/* ============================================================
   エッジクラフテック株式会社｜採用LP  スタイルシート
   ============================================================
   ◆ このファイル ＝「見た目・デザイン（色・形・余白）」を変えるところ
   ◆ 文章を変えたいときは index.html を編集してください
   ◆ 色は、すぐ下の :root（カラーパレット）を直すと全体に反映されます
   ============================================================ */

/* ---------- カラーパレット（ここを変えると全体の色が変わる） ---------- */
:root{
  /* メインの色（さわやかな水色） */
  --sky:        #2E9FD8;   /* メインの水色 */
  --sky-dark:   #2484B8;   /* 濃いめの水色（文字・ホバー） */
  --aqua:       #57C7E6;   /* 明るいアクア（差し色・グラデ） */
  --mint:       #41C0A0;   /* ほんの少しのミント（小さな差し色） */

  /* 公式ブランドの色（ロゴ・見出し・ボタンのアクセント。水色ベースはそのまま） */
  --brand:      #006090;   /* 公式の深い青（ロゴの色） */
  --brand-dark: #003054;   /* 公式のネイビー（ホバー・引き締め） */

  /* 濃紺（ネイビー）— 招待状／CONTACT／SCENE／フッターで共通に使う色（2026-07-30 整理）
     ※ ここを直すと、上の4か所のネイビーがまとめて変わります */
  --navy:       #23527A;   /* グラデの上（基本のネイビー） */
  --navy-light: #2A6091;   /* グラデの中間（少し明るい） */
  --navy-dark:  #1E4870;   /* グラデの下・フッター（いちばん濃い） */

  --ink:        #21394D;   /* 見出しの濃い文字（やわらかい紺） */
  --text:       #46555F;   /* 本文の文字 */
  --muted:      #7C8A96;   /* 補足のグレー */
  --line:       #DBEBF6;   /* 罫線 */

  /* 背景 */
  --bg:         #FFFFFF;   /* 白 */
  --bg-light:   #F1F8FD;   /* 薄い水色（交互の背景） */
  --bg-sky:     #E5F3FC;   /* もう少し濃い薄水色 */

  /* 形・影 */
  --radius:     16px;
  --radius-lg:  22px;
  --shadow:     0 14px 34px rgba(46,159,216,.12);   /* やわらかい影 */
  --shadow-sm:  0 6px 18px rgba(46,159,216,.10);
  --maxw:       1080px;    /* コンテンツの最大幅 */
}

/* ---------- 全体の土台 ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--text);
  line-height:1.9;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--sky-dark); }

/* 中央寄せの共通コンテナ */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* セクション共通 */
.section{ padding:96px 0; }
.section[id]{ scroll-margin-top:80px; }   /* 固定ヘッダー分、上に余白 */
.bg-light{ background:var(--bg-light); }

/* セクション見出し */
.sec-head{ margin-bottom:40px; }
.sec-head.center{ text-align:center; }
.eyebrow{
  font-family:"Outfit",sans-serif; font-weight:700; letter-spacing:.16em;
  font-size:.84rem; color:var(--brand); margin:0 0 12px;
  display:flex; align-items:center; gap:12px;
}
.sec-head.center .eyebrow{ justify-content:center; }
.eyebrow span{
  font-family:"Noto Sans JP",sans-serif; font-weight:700; letter-spacing:.04em;
  font-size:.82rem; color:var(--muted);
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--mint); display:inline-block;
}
.eyebrow.eyebrow-light{ color:#fff; }
.eyebrow.eyebrow-light span{ color:rgba(255,255,255,.82); }
.eyebrow.eyebrow-light::before{ background:rgba(255,255,255,.7); }
.sec-title{
  font-size:2rem; line-height:1.45; font-weight:900; color:var(--ink);
  margin:0 0 12px; letter-spacing:.01em;
}
.sec-title .accent{ color:var(--brand); }
.lead{ font-size:1.04rem; color:var(--muted); margin:6px 0 0; }
.notice{ margin-top:22px; font-size:.86rem; color:var(--muted); text-align:center; }

/* スマホだけで改行させる目印（2026-07-30 追加）
   使い方：改行したいところに <br class="br-sp"> を入れるだけ。
   　　　　PC・タブレット（641px以上）では改行しません。 */
.br-sp{ display:none; }
@media (max-width:640px){ .br-sp{ display:inline; } }

/* ---------- ボタン（最小限・シンプル） ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:.96rem; text-decoration:none; cursor:pointer;
  padding:13px 28px; border-radius:999px; border:2px solid transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-accent{ background:var(--brand); color:#fff; }
.btn-accent:hover{ background:var(--brand-dark); }
.btn-line{ background:transparent; color:var(--sky-dark); border-color:var(--sky); }
.btn-line:hover{ background:var(--bg-sky); }
.btn-line-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn-line-light:hover{ background:rgba(255,255,255,.14); border-color:#fff; }

/* テキストリンク（ボタンの代わりの、軽い導線） */
.text-link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--sky-dark); font-weight:700; font-size:.96rem; text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.text-link::after{ content:"→"; transition:transform .15s ease; }
.text-link:hover{ border-color:var(--sky); }
.text-link:hover::after{ transform:translateX(3px); }

/* ---------- 写真の置き場（プレースホルダ） ---------- */
.ph{
  display:grid; place-items:center; text-align:center;
  color:var(--muted); font-size:.9rem; font-weight:700;
  background:
    repeating-linear-gradient(45deg, rgba(46,159,216,.06) 0 14px, transparent 14px 28px),
    var(--bg-light);
  border:1px dashed #AFD2EA;
}
.ph small{ display:block; font-weight:500; font-size:.76rem; opacity:.85; margin-top:4px; }
/* 写真が入っている枠は、点線とうすい模様を消す（写真だけを見せる） */
.ph:has(img){ border:0; background:none; }
.ph-face{ border:0; background:none; }
/* はめ込んだ写真は枠いっぱいに表示（中央基準で自動トリミング） */
.ph-video img, .shot img, .ph-portrait img, .ph-face img{ width:100%; height:100%; object-fit:cover; display:block; }

/* =========================================================
   ヘッダー（固定ナビ）
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.site-header.scrolled{ box-shadow:0 6px 18px rgba(46,159,216,.10); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.brand-logo{
  width:40px; height:40px; border-radius:11px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--sky),var(--aqua));
  display:grid; place-items:center; color:#fff; font-weight:900; font-size:.92rem;
  font-family:"Outfit",sans-serif;
}
/* 公式ロゴ画像（ヘッダー） */
.brand-logo-img{ width:40px; height:40px; flex:0 0 auto; object-fit:contain; }
/* ロゴ横の会社名ブロック（上＝会社名／下＝英字 の2段組み） */
.brand-text{ display:flex; flex-direction:column; justify-content:center; line-height:1.15; }
.brand-name{ font-weight:900; color:var(--ink); font-size:1.04rem; letter-spacing:.02em; display:block; white-space:nowrap; }
.brand-en{ display:block; font-family:"Outfit",sans-serif; font-size:.64rem; color:var(--muted); font-weight:600; letter-spacing:.18em; }

/* メニューは right 寄せ（margin-left:auto）にして、そのすぐ右に応募ボタンを置きます */
.nav-menu{ display:flex; align-items:center; gap:16px; margin-left:auto; }
.nav-menu ul{ display:flex; align-items:center; gap:14px; list-style:none; margin:0; padding:0; }
.nav-menu a{ text-decoration:none; color:var(--text); font-weight:700; font-size:.84rem; white-space:nowrap; }
.nav-menu a:hover{ color:var(--sky-dark); }

/* ヘッダー右の「応募する」ボタン（2026-07-30 追加） */
.nav-cta{
  flex:0 0 auto; margin-left:18px;
  padding:9px 20px; font-size:.88rem; white-space:nowrap;
}

/* スマホ用メニューボタン（ハンバーガー） */
.nav-toggle{
  display:none; width:46px; height:46px; border:0; background:transparent;
  cursor:pointer; padding:10px; border-radius:10px;
}
.nav-toggle span{
  display:block; height:2px; background:var(--ink); border-radius:2px; margin:5px 0;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --- 画面幅にあわせてヘッダーを縮める（2026-07-30 追加）---------------
   ボタンが増えた分、ぎゅうぎゅうにならないよう3段階で調整します
   ① 〜1080px：文字と余白を少し小さく
   ② 〜900px ：PCメニューをしまって、三本線ボタン（ハンバーガー）に切り替え
   ③ 〜400px ：会社名とボタンをもう一段小さく
   -------------------------------------------------------------------- */
@media (max-width:1080px){
  .nav-menu ul{ gap:10px; }
  .nav-menu a{ font-size:.78rem; }
  .nav-cta{ margin-left:12px; padding:8px 16px; font-size:.84rem; }
  .brand-name{ font-size:.96rem; }
}

@media (max-width:900px){
  /* 三本線ボタンを表示。応募ボタンはその左どなりに置きます */
  .nav-toggle{ display:block; order:3; flex:0 0 auto; }
  .nav-cta{ order:2; margin-left:auto; margin-right:4px; padding:8px 16px; font-size:.82rem; }

  /* PCメニューは、ふだんは隠して「開く」を押したときだけ下に出します
     （開閉の動き＝ js/main.js が .open を付け外しします） */
  .nav-menu{
    display:none; margin-left:0;
    position:absolute; left:0; right:0; top:100%;
    background:rgba(255,255,255,.98);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 26px rgba(46,159,216,.14);
    padding:6px 22px 14px;
  }
  .nav-menu.open{ display:block; }
  .nav-menu ul{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-menu li{ border-bottom:1px solid var(--line); }
  .nav-menu li:last-child{ border-bottom:0; }
  .nav-menu a{ display:block; padding:14px 4px; font-size:.95rem; }
}

@media (max-width:400px){
  .site-header .wrap.nav{ padding:0 14px; }
  .brand{ gap:8px; }
  .brand-name{ font-size:.82rem; }
  .brand-en{ font-size:.56rem; letter-spacing:.12em; }
  .nav-cta{ padding:7px 11px; font-size:.74rem; }
  .nav-toggle{ width:40px; height:40px; padding:9px; }
}

/* =========================================================
   ① ヒーロー（背景写真を画面いっぱいに／設計図v17）
   ※ 写真を差し替えるときは index.html の .hero-bg の中の src を書き換え
   ========================================================= */
.hero{
  position:relative; overflow:hidden; color:var(--text);
  background:
    radial-gradient(640px 420px at 6% 108%, rgba(65,192,160,.14) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-sky) 0%, #ffffff 80%);
}
/* 背景写真：画面のはしからはしまで、いっぱいに敷きます。
   ★ 2026-07-31 変更：前は写真を右半分だけ（left:52%）に置いていましたが、
     「文字のある場所にも写真を敷いてほしい」というご要望で、全面に広げました。
     文字が読めなくなるので、上に白いベール（.hero::after）を1枚かぶせています。
   ▼ 写真の「見せる位置」を変えたいとき → 下の 30% の数字
     （小さくすると上のほう＝天井側、大きくすると下のほう＝手前側が見えます） */
.hero-bg{
  position:absolute; inset:0; z-index:0;
}
/* 2026-07-31：PC用とスマホ用で写真を出しわけるため、HTMLで <picture> を使っています。
   <picture> はそのままだと「文字あつかい」で高さが合わないので、写真の枠にぴったり合わせます */
.hero-bg picture{ display:block; width:100%; height:100%; }
/* 2026-07-31：写真を全面に広げたことで、下の3人のあごが切れていたため
   見せる位置を 30% → 70%（＝下のほうを見せる）に変更しました */
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 70%;
  display:block;
}

/* 文字のうしろにかける「白いベール」（左が濃く、右へいくほど透明）
   ・左＝文字がのっている side なので白く、写真はうっすら透けます
   ・右＝社員の写真をそのまま見せたいので、透明にしています
   ▼ もっと文字を読みやすくしたいとき → 左側（0%〜42%）の数字を .95 くらいに上げる
   ▼ もっと写真を見せたいとき         → 左側の数字を .80 くらいに下げる
   ▼ 白い部分の“はば”を変えたいとき   → 各行の ％（26% / 42% / 54% …）を動かす */
/* 2026-08-05：白い部分を「ほんの少しだけ」右へ延長しました。
   ・目的：文字の右はしにかかる観葉植物（背の高いほう）を、もっと目立たなくするため
   ・人物には かからない ように、いちばん右の「透明になる位置」は 64% → 65% と
     1%しか動かしていません。動かしたのは、おもに左〜まん中の数字です
   ▼ もっと白くしたい → 各行の ％ を 3〜4 ずつ大きくする
   ▼ 元に戻したい   → _バックアップ の style_白グラデ延長前backup_2026-08-05_1308.css */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.90) 30%,
    rgba(255,255,255,.76) 42%,
    rgba(255,255,255,.40) 49%,
    rgba(255,255,255,.10) 57%,
    rgba(255,255,255,0)   65%);
}
.hero-inner{
  position:relative; z-index:2;
  display:block;
  padding:96px 22px 104px;
}
/* 画面のはばが 1080px 以下（細めのウィンドウ）のとき。
   文字の右はしが写真の人に近づくので、白いベールを少し右まで伸ばします */
@media (max-width:1080px) and (min-width:901px){
  /* 2026-08-05：上の設定に合わせて、こちらも同じくらい少しだけ延長しました */
  .hero::after{
    background:linear-gradient(100deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.92) 35%,
      rgba(255,255,255,.81) 47%,
      rgba(255,255,255,.46) 56%,
      rgba(255,255,255,.14) 64%,
      rgba(255,255,255,0)   73%);
  }
}
.hero-copy{ max-width:540px; }
.hero-concept{
  display:inline-block; font-weight:700; color:var(--sky-dark);
  font-size:1rem; letter-spacing:.04em; margin:0 0 10px;
  border-bottom:2px solid var(--aqua); padding-bottom:3px;
}
.hero-title{
  font-size:2.85rem; line-height:1.4; font-weight:900; color:var(--ink); margin:6px 0 20px;
  letter-spacing:.01em;
}
.hero-title .accent{ color:var(--brand); }

/* 「PCのときだけ改行する」しるし（2026-08-05 追加）
   ・使い方：index.html の中で <br class="br-pc"> と書くだけ
   ・PC＝改行する／スマホ（900px以下）＝消えて、前後の文字が1行につながります
   ・追加した理由：ヒーローの紹介文（.hero-lead）の1行が長く、背景の観葉植物に
     重なって読みにくかったため、PC版だけ 3行 → 4行 に分けました
   ・見出し（.hero-title）は変更していません
   ▼ スマホでも同じ位置で改行したいとき
     → 下の「@media (max-width:900px)」の中にある .br-pc の1行を消してください */
.br-pc{ display:inline; }
.hero-lead{ font-size:1.06rem; color:var(--text); margin:0 0 28px; max-width:560px; }
.hero-chips{ display:flex; gap:14px; margin:0 0 30px; flex-wrap:wrap; }
.chip{
  background:#fff; border:1.5px solid var(--sky); border-radius:14px;
  padding:12px 18px; min-width:140px; box-shadow:var(--shadow-sm);
}
.chip b{ display:block; font-family:"Outfit",sans-serif; color:var(--sky-dark); font-size:1.5rem; line-height:1.2; }
.chip span{ font-size:.78rem; color:var(--muted); }
.hero-cta{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }

/* ============================================================
   スマホ・タブレット（〜900px）のヒーロー
   ★ 2026-07-30 変更：写真を「文字のうしろ」から「文字の下」へ移動しました。
     ・上＝文章だけ（うすい水色の背景）／下＝写真、の2段（縦積み）になります
     ・写真の上のふちは、グラデーションでふわっと消して背景になじませています
     ・並び順は order で入れかえています（HTMLの順番は変えていません）
   ▼ 写真の高さを変えたいとき → 下の clamp(210px, 58vw, 330px) の数字
   ▼ なじませる幅を変えたいとき → mask-image の最後の 62% を大きく／小さく
   ============================================================ */
@media (max-width:900px){
  .hero{ display:flex; flex-direction:column; }

  /* ① 文章（上） */
  .hero-inner{ order:1; padding:56px 22px 30px; }
  .hero::after{ display:none; }   /* 文字が写真の上に来ないので、白いベールは不要 */
  .hero-copy{ max-width:none; }

  /* 2026-08-05：PC専用の改行を、スマホでは消します。
     スマホは写真が文字の「下」に来るので重なりがなく、
     画面のはばに合わせて自然に折り返したほうが読みやすいためです */
  .br-pc{ display:none; }

  /* ② 写真（下）。上のふちだけ、ほんの少しだけ ぼかして背景になじませます
     ★ 2026-07-30 変更：うすくなる範囲を 62% → 18% に short くしました。
       前は写真の上から6割がうすくなっていたので、うしろに立っている4人の顔が
       消えかけていました。いまは上のふち（写真の高さの2割弱）だけがうすくなります。
     ▼ もっとなじませたい（ぼかしを広げたい）とき → 下の 18% を 26% くらいに
     ▼ もっとくっきりさせたいとき             → 下の 18% を 12% くらいに */
  .hero-bg{
    order:2;
    position:relative; inset:auto;
    width:100%; height:clamp(210px, 58vw, 330px);
    -webkit-mask-image:linear-gradient(180deg,
      rgba(0,0,0,0)   0%,
      rgba(0,0,0,.30) 5%,
      rgba(0,0,0,.68) 10%,
      rgba(0,0,0,.90) 14%,
      rgba(0,0,0,1)   18%);
            mask-image:linear-gradient(180deg,
      rgba(0,0,0,0)   0%,
      rgba(0,0,0,.30) 5%,
      rgba(0,0,0,.68) 10%,
      rgba(0,0,0,.90) 14%,
      rgba(0,0,0,1)   18%);
  }
  /* 写真の「見せる位置」。数字を小さくすると 上（天井のほう）が多く見えます
     ★ 2026-07-31：スマホ用の写真 hero2sumaho.png に合わせて 14% → 40% に変更。
       14% のままだと、タブレット幅（768pxあたり）で手前の3人のあごが切れていました */
  .hero-bg img{ object-position:center 40%; }
}
@media (max-width:760px){
  .hero-inner{ padding:48px 22px 26px; }
}

/* =========================================================
   ② Philosophy（理念／EDGE・CRAFT・TECH）
   ※ 設計図v17で、旧「VISION帯」と入れ替えたセクション
   ========================================================= */
/* 2026-07-31：背景を白→ネイビー（濃紺）に変更。
   ネイビーの色そのものを変えたいときは、いちばん上の :root の --navy 系を直してください */
.philosophy{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
}
/* 背景が濃紺になったので、見出しまわりの文字は白系にそろえます */
.philosophy .eyebrow{ color:#fff; }
.philosophy .eyebrow span{ color:rgba(255,255,255,.82); }
.philosophy .eyebrow::before{ background:rgba(255,255,255,.7); }
.philosophy .sec-head{ margin-bottom:44px; }
.philosophy-text{
  font-size:1.9rem; font-weight:900; line-height:1.5; margin:0;
  color:#fff; letter-spacing:.02em;
}
/* 「新しい価値を創造する。」に水色のマーカー */
.philosophy-text .accent{
  color:#fff;
  background:linear-gradient(transparent 62%, rgba(87,199,230,.55) 62%);
  padding:0 2px;
}
.philosophy-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
/* 3枚のカードは白のまま。背景が濃紺になったので、影だけ濃くして浮き上がらせています */
.phil-card{
  background:#fff; border:1px solid rgba(255,255,255,.28); border-radius:var(--radius);
  border-top:4px solid var(--aqua); box-shadow:0 14px 34px rgba(0,0,0,.28);
  padding:30px 26px 28px;
}
.phil-en{
  font-family:"Outfit",sans-serif; font-weight:700; font-size:1.6rem;
  color:var(--sky); letter-spacing:.06em; margin:0 0 12px; line-height:1.2;
}
.phil-ja{ margin:0 0 12px; color:var(--ink); font-size:1.06rem; font-weight:900; }
.phil-desc{ margin:0; color:var(--text); font-size:.94rem; line-height:1.9; }
@media (max-width:860px){
  .philosophy-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
  .philosophy-text{ font-size:1.5rem; }
}

/* =========================================================
   ②.5 はたらく風景（画像ショーケース／斜めカット）
   ========================================================= */
.showcase{ padding:84px 0; background:var(--bg); }
.showcase .eyebrow{ justify-content:center; margin-bottom:28px; }
/* 額縁（写真の外わく）。2026-07-30：水色 → 招待状・CONTACTと同じネイビーに変更 */
.showcase-stage{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  max-width:920px; margin:0 auto; padding:22px;
  background:linear-gradient(165deg, var(--navy) 0%, var(--navy-light) 48%, var(--navy-dark) 100%);
  border-radius:20px; box-shadow:0 20px 44px rgba(30,72,112,.22);
}
.shot{ aspect-ratio:4/3; overflow:hidden; }
.shot .ph{ width:100%; height:100%; }
.shot-left{ clip-path:polygon(0 0, 100% 0, 88% 100%, 0 100%); }    /* 右下が斜め ╲ */
.shot-right{ clip-path:polygon(12% 0, 100% 0, 100% 100%, 0 100%); } /* 左上が斜め ╲ */
.ph-shot{
  border:1px dashed rgba(255,255,255,.75);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.15) 0 14px, transparent 14px 28px),
    rgba(255,255,255,.22);
  color:#fff;
}
.ph-shot small{ color:rgba(255,255,255,.85); }
.showcase-caption{
  text-align:center; margin:28px 0 0; font-family:"Outfit",sans-serif;
  font-size:1.5rem; font-weight:700; color:var(--navy);   /* 2026-07-30：ネイビーに統一 */
}
.showcase-caption span{
  display:block; font-family:"Noto Sans JP",sans-serif; font-size:.92rem;
  font-weight:700; color:var(--muted); margin-top:8px; letter-spacing:.04em;
}
@media (max-width:760px){
  .showcase-stage{ grid-template-columns:1fr; gap:14px; max-width:420px; padding:16px; }
  .shot{ aspect-ratio:16/10; }
  .shot-left,.shot-right{ clip-path:none; border-radius:14px; }
  .showcase-caption{ font-size:1.25rem; }
}

/* =========================================================
   ③ 招待状（見せ場）
   ※ 2026-07-17 改善後LP_全体イメージ_v2 のデザインに更新
      （中央見出し＋封筒アイコン＋白い“便せん”カード）
   ========================================================= */
/* 上：見出しの帯（淡い水色・旧デザインと同じ見え方）
   下：本文（濃紺） */
/* セクション全体を淡い水色にして、濃紺の本文を「角丸カード」として内側に浮かせます
   （封筒の中身のように、ひとつの塊に見せるため） */
.invite{
  position:relative; scroll-margin-top:80px;
  background:linear-gradient(180deg, var(--bg-sky) 0%, var(--bg-light) 100%);
  padding:0 22px 96px;
}

/* --- 見出しの帯 --- */
.invite-head-band{
  background:transparent;
  padding:92px 0 40px;
}
.invite-head-band .sec-head{ margin-bottom:0; }
.invite-head-band .sec-title{ color:var(--ink); }
.invite-head-band .accent{ color:var(--brand); }
.invite-mark{ display:flex; justify-content:center; color:var(--sky); margin:0 0 16px; }
.invite-eyebrow{ color:var(--sky-dark); }
.invite-eyebrow::before{ display:none; }   /* 左のミント棒なし・中央寄せ */
.invite-eyebrow .inv-bar{ width:2px; height:15px; background:var(--sky); opacity:.55; }
.invite-eyebrow .inv-ja{
  font-family:"Noto Sans JP",sans-serif; font-weight:700; letter-spacing:.06em;
  font-size:.88rem; color:var(--sky-dark);
}

/* --- 本文（濃紺の角丸カード）--- */
.invite-body{
  max-width:1168px; margin:0 auto;
  background:linear-gradient(165deg, var(--navy) 0%, var(--navy-light) 48%, var(--navy-dark) 100%);
  color:rgba(255,255,255,.92);
  border-radius:26px;
  padding:52px 0 58px;
  box-shadow:0 24px 56px rgba(30,72,112,.24);
}
@media (max-width:760px){
  .invite{ padding:0 14px 62px; }
  .invite-head-band{ padding:62px 0 30px; }
  .invite-body{ border-radius:18px; padding:34px 0 40px; }
}

/* 左：写真／右：文章 */
.invite-story{
  display:grid; grid-template-columns:.82fr 1.18fr; gap:38px;
  align-items:center; margin:0;
}
.invite-story-photos{ display:grid; gap:20px; }
.invite-shot{
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.invite-shot img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
@media (max-width:860px){
  .invite-story{ grid-template-columns:1fr; gap:24px; }
  .invite-story-photos{ max-width:460px; margin:0 auto; }
}
.story-quote{
  font-size:1.4rem; font-weight:900; color:#fff; line-height:1.6;
  border-left:4px solid var(--aqua); padding-left:18px; margin:0 0 18px;
}
.story-lead{ font-size:1.02rem; color:rgba(255,255,255,.88); margin:0 0 14px; }
.story-lead b{ color:var(--aqua); }

/* 2枚のカードの並び（上下に重ねて、横幅いっぱいに使います） */
.invite-cards{ margin:38px 0 0; display:grid; gap:22px; }

/* 「独りにしない」カード：左にイラスト／右に文章 */
.care-card{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  border-left:5px solid var(--mint);
  border-radius:var(--radius); padding:28px 32px; margin:0;
  display:grid; grid-template-columns:170px 1fr; gap:30px; align-items:center;
}
.care-art{ color:var(--aqua); }
.care-art svg{ width:100%; height:auto; display:block; }
/* ふきだしが、ふわっと上下に動きます */
.care-art .care-bubble{ animation:careFloat 3.2s ease-in-out infinite; transform-origin:center; }
.care-art .dot{ animation:careDot 1.6s ease-in-out infinite; }
.care-art .dot2{ animation-delay:.22s; }
.care-art .dot3{ animation-delay:.44s; }
@keyframes careFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-5px); }
}
@keyframes careDot{
  0%,100%{ opacity:.35; }
  40%    { opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .care-art .care-bubble, .care-art .dot{ animation:none; }
}
.care-text h3{ margin:0 0 10px; color:#fff; font-size:1.14rem; }
.care-text p{ margin:0; color:rgba(255,255,255,.88); font-size:.98rem; }
@media (max-width:760px){
  .care-card{ grid-template-columns:1fr; gap:18px; padding:24px 22px; text-align:center; }
  .care-art{ max-width:190px; margin:0 auto; }
  .care-text{ text-align:left; }
}

/* 面接で見ているところ */
.look-card{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius); padding:26px 32px; margin:0;
}
.look-card h3{ margin:0 0 14px; font-size:1.1rem; color:#fff; }
.look-list{ list-style:none; margin:0 0 14px; padding:0; }
.look-list li{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:12px 10px; margin:0 -10px; border-radius:12px;
  border-bottom:1px solid rgba(255,255,255,.12);
  transition:background .25s ease;
}
.look-list li:last-child{ border-bottom:0; }
.look-list .x{
  color:rgba(255,255,255,.55); font-size:.95rem;
}
/* ★ 2026-07-30 変更：ここには前まで ✓（チェック）マークが出ていました。
     「話がうまいかどうか“ではありません”」という打ち消しの文の頭に、
     ✓（＝これが正解、のしるし）が付いていて意味がねじれていたので、消しました。
   ▼ マークを戻したいとき  → content:"" の "" の中に記号を入れる（例 "✕ "）
   ▼ その場合の色のおすすめ → color を rgba(255,255,255,.5) に（水色だと目立ちすぎます） */
.look-list .x::before{ content:""; }
.look-list .o{ color:#fff; font-weight:700; font-size:1rem; position:relative; padding-left:24px; }
.look-list .o::before{
  content:"→"; position:absolute; left:0; color:var(--aqua); font-weight:900;
}
.look-note{ margin:6px 0 0; color:var(--aqua); font-weight:700; font-size:.98rem; }

/* --- 強調したい部分（3つの「→」のあと）に触れると、ふわっと少し大きくなります
       ※ 締めの「だから、特別な準備はいりません。…」は動きなし --- */
.look-list .o{
  display:inline-block; transform-origin:left center;
  transition:transform .25s cubic-bezier(.34,1.4,.64,1), color .25s ease;
}
.look-list li:hover,
.look-list li:focus-within{ background:rgba(255,255,255,.09); }
.look-list li:hover .o,
.look-list li:focus-within .o,
.look-list li:active .o{ transform:scale(1.07); color:var(--aqua); }
@media (prefers-reduced-motion: reduce){
  .look-list .o{ transition:none; transform:none !important; }
}

.invite-outro{
  margin:40px auto 0; max-width:760px; text-align:center;
  font-size:1.06rem; color:rgba(255,255,255,.9); font-weight:500;
}

/* =========================================================
   ④ 社長からのご挨拶
   ========================================================= */
.message-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:40px; display:grid;
  grid-template-columns:220px 1fr; gap:40px; align-items:start;
}
.message-side{ text-align:center; }
.ph-portrait{
  width:170px; height:170px; border-radius:50%; margin:0 auto 16px;
  font-size:.8rem; overflow:hidden;
}
.message-name{ font-weight:900; color:var(--ink); font-size:1.18rem; margin:0; }
.message-role{ font-size:.9rem; color:var(--sky-dark); font-weight:700; margin:2px 0 0; }
.message-hobby{ font-size:.8rem; color:var(--muted); margin:6px 0 0; }
.message-body p{ margin:0 0 16px; }
.message-vision{
  background:var(--bg-sky); border-left:4px solid var(--sky); border-radius:10px;
  padding:14px 18px; margin:18px 0; font-weight:700; color:var(--ink);
}

/* --- スマホ・タブレット（〜860px）の社長からのご挨拶 ------------------
   ★ 2026-07-30 変更：これまで画面が狭くても「左に写真220px／右に本文」の
     2列のままだったため、本文が右の細いすき間に押しこまれていました。
     1列にして「上＝顔写真（中央）／下＝ごあいさつ」の縦並びに直しました。
   ※ ごあいさつの文章は、読みやすさのため左ぞろえのままにしています。
     中央ぞろえにしたいときは、下の .message-body p の行のコメントを外してください。
   -------------------------------------------------------------------- */
@media (max-width:860px){
  .message-card{
    grid-template-columns:1fr;        /* 2列 → 1列 */
    gap:26px; padding:32px 26px;
    justify-items:center;             /* 中身を中央ぞろえに */
  }
  .message-side{ text-align:center; }
  .message-body{ width:100%; }
  .ph-portrait{ width:150px; height:150px; margin:0 auto 14px; }
  /* .message-body p{ text-align:center; } */
}
@media (max-width:520px){
  .message-card{ padding:26px 20px; }
  .ph-portrait{ width:132px; height:132px; }
}
/* === ⑧ まずは知ってください ＋ フッター（CONTACT / FOOTER） ===
   ※ 2026-07-30：フッターの背景・線・余白の指定は、このファイルのいちばん下
     「フッター（設計図v17で追加）」にまとめました。ここにあった同じ指定は
     二重で分かりにくかったので削除しています（見た目は変わりません）。
   ※ 下の .footer-cta ～ .footer-links は、今のHTMLでは使っていない予備のスタイルです。 */
.site-footer .footer-cta{ text-align:center; max-width:680px; margin:0 auto 52px; }
.footer-eyebrow{ font-size:13px; letter-spacing:.18em; color:var(--sky-dark); font-weight:700; margin:0 0 10px; }
.footer-title{ font-size:clamp(20px,2.6vw,26px); color:var(--ink); font-weight:700; line-height:1.4; margin:0 0 14px; }
.footer-lead{ color:var(--text); margin:0 0 26px; }
.footer-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:20px; }
.footer-links{ font-size:14px; color:var(--muted); margin:0; }
.footer-links a{ color:var(--sky-dark); text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }
.footer-links .sep{ margin:0 10px; color:var(--line); }
.footer-sign{ border-top:1px solid var(--line); padding-top:32px; text-align:center; }
.footer-logo{ height:26px; width:auto; display:block; margin:0 auto 14px; }
.footer-meta{ color:var(--muted); font-size:13px; line-height:1.9; margin:0 0 14px; }
.footer-meta p{ margin:0; }
.footer-meta a{ color:var(--sky-dark); text-decoration:none; }
.footer-copy{ color:var(--muted); font-size:12px; letter-spacing:.04em; margin:0; }
/* ※ 2026-07-30：ここにあったフッターの余白指定（スマホ用）は、
     いちばん下の指定に上書きされて効いていなかったため削除しました（見た目は変わりません） */

/* ============================================================
   ▼▼ 復元したセクションのスタイル（2026-06-16 復旧）▼▼
   並べ替え作業の途中で消えた分を、水色デザインに合わせて作り直し。
   対象：スクロール表示 / 数字で見る / 先輩の声 / 応募の流れ / FAQ / トップへ戻る
   ============================================================ */

/* --- スクロールでふわっと表示（JSが動くときだけ。動かなければ全部表示） --- */
html.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
html.js .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1; transform:none; transition:none; }
}
.hero-copy{ position:relative; z-index:1; }

/* --- ⑦ 数字で見る（ABOUT）の数字カード --- */
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
.stat{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:28px 22px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.stat-num{
  font-family:"Outfit",sans-serif; font-weight:700; color:var(--sky-dark);
  font-size:2.5rem; line-height:1.1;
}
.stat-num small{
  font-family:"Noto Sans JP",sans-serif; font-size:.9rem; font-weight:700;
  color:var(--sky-dark); margin-left:3px;
}
.stat-label{ font-weight:900; color:var(--ink); font-size:1.04rem; margin-top:8px; }
.stat-note{ font-size:.84rem; color:var(--muted); line-height:1.7; margin-top:2px; }
@media (max-width:860px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .stat-grid{ grid-template-columns:1fr; } }

/* --- ④ 社長メッセージの中の小物（消えていた分） --- */
.mission-list{ margin:6px 0 16px; padding-left:1.2em; color:var(--text); }
.mission-list li{ margin:0 0 8px; }
.message-sign{ margin:20px 0 0; font-weight:900; color:var(--ink); text-align:right; }

/* --- ⑤ 先輩社員の声（VOICE） --- */
.voice-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px; }
.voice-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:28px 26px; display:flex; flex-direction:column;
}
.ph-face{
  width:86px; height:86px; border-radius:50%; margin:0 0 16px; overflow:hidden;
  font-size:.72rem;
}
.voice-name{ font-weight:900; color:var(--text); font-size:1.14rem; margin:0 0 6px; letter-spacing:.03em; }
.voice-tag{ font-weight:900; color:var(--sky-dark); font-size:1.02rem; margin:0 0 4px; line-height:1.5; }
.voice-meta{ font-size:.8rem; color:var(--muted); font-weight:700; margin:0 0 12px; }
.voice-comment{ font-size:.98rem; color:var(--text); margin:0; }
/* ★ 2026-07-30 追加：段落が2つ以上ある人（②③）は、段落と段落のあいだが
   くっついていて、文章がひと続きに見えていました。2つ目以降の段落だけ、
   上に すきま をあけて読みやすくします（1段落だけの①は変わりません）。
   ▼ すきまを変えたいとき → 下の .9em の数字（大きくすると広がる） */
.voice-comment + .voice-comment{ margin-top:.9em; }
@media (max-width:860px){ .voice-grid{ grid-template-columns:1fr; max-width:520px; margin:8px auto 0; } }

/* --- ⑥ 応募から入社までの流れ（FLOW） --- */
.flow-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px; }
.flow-step{
  position:relative; background:#fff; border:1px solid var(--line);
  border-top:4px solid var(--sky); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:30px 26px 26px;
}
.flow-no{
  font-family:"Outfit",sans-serif; font-weight:700; font-size:2rem; color:var(--sky);
  line-height:1; display:block;
}
.flow-en{
  font-family:"Outfit",sans-serif; font-weight:600; letter-spacing:.14em;
  font-size:.72rem; color:var(--mint); display:block; margin:4px 0 12px;
}
.flow-step h3{ margin:0 0 8px; color:var(--ink); font-size:1.12rem; }
.flow-step p{ margin:0; font-size:.96rem; }
@media (max-width:860px){ .flow-grid{ grid-template-columns:1fr; max-width:520px; margin:8px auto 0; } }

/* --- ⑥.5 未経験からのロードマップ（2026-07-17 追加・改善後LP_全体イメージ_v2準拠） --- */
.roadmap{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:34px 38px 24px; margin-top:30px;
}
.roadmap-head{ text-align:center; margin:0 0 12px; }
.roadmap-head .eyebrow{ justify-content:center; }
.roadmap-title{ margin:0 0 8px; color:var(--ink); font-size:1.5rem; font-weight:900; }
.roadmap-lead{ margin:0; color:var(--muted); font-size:.94rem; }

/* うねる道と、その上に段違いで乗る3枚のカード */
.roadmap-track{ position:relative; margin-top:26px; }
.roadmap-path{
  position:absolute; inset:0; width:100%; height:100%;
  color:var(--sky); pointer-events:none;
}
.roadmap-line{
  list-style:none; margin:0; padding:0; position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  align-items:end; min-height:340px;
}
.roadmap-step{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px 22px 22px; max-width:270px;
  text-align:center;                 /* 中の文字とイラストを中央ぞろえに */
}
.roadmap-step.rm-1{ align-self:end;    margin-bottom:6px; }
.roadmap-step.rm-2{ align-self:center; margin-bottom:34px; }
.roadmap-step.rm-3{ align-self:start;  margin-top:6px; justify-self:end; }
/* 成長アイコン（新芽 → 蕾 → 木）。画面に入ると、ゆっくり育ちます */
.rm-icon{ display:block; width:52px; height:52px; margin:0 auto 12px; color:var(--mint); }
.rm-3 .rm-icon{ color:#2FA98A; }
.rm-icon svg{ width:100%; height:100%; display:block; overflow:visible; }

/* ============================================================
   ロードマップのイラストの色（2026-07-30 追加）
   ============================================================
   ★ ここだけ見れば、3つのイラストの色を全部変えられます。
     以前は全部みどり1色でした。鉢は素焼き色、土は茶色、キラキラは4色にして、
     「ちょっとカラフル」にしています。
   ★ 色の書き方：#RRGGBB（例 #C9784F ＝ 素焼きのオレンジ茶）
   ★ opacity は「濃さ」。1 が濃く、0 に近づくほど うすくなります。
   ============================================================ */

/* --- ① 新芽（START）※2026-07-30 蕾と入れ替え ------------- */
.rm-1 .rm-stem  { stroke:#3FA97F; }                /* 茎＝こいみどり */
.rm-1 .rm-leaf-l{ fill:#7ED09F; opacity:.9; }      /* 左の葉＝明るいみどり */
.rm-1 .rm-leaf-r{ fill:#2FA98A; opacity:1; }       /* 右の葉＝こいみどり */
.rm-1 .rm-ground{ stroke:#B08160; opacity:.6; }    /* 土＝茶色 */

/* --- ② 植木鉢＋蕾→花（GROW）※2026-07-30 新芽と入れ替え ---- */
.rm-2 .rm-pot-rim { fill:#B56743; opacity:.95; }   /* 鉢のふち（少し濃い素焼き色） */
.rm-2 .rm-pot-body{ fill:#C9784F; opacity:.95; }   /* 鉢の本体（素焼き色） */
.rm-2 .rm-bud     { fill:#F0819B; opacity:1; }     /* 蕾（つぼみ）＝ピンク */
.rm-2 .rm-bud-leaf{ fill:#41C0A0; opacity:.8; }    /* 蕾のわきの葉＝みどり */
.rm-2 .rm-bud-stem{ stroke:#41C0A0; }              /* 茎＝みどり */
.rm-2 .rm-petal   { fill:#F0819B; opacity:.95; }   /* 花びら5枚＝ピンク */
.rm-2 .rm-core    { fill:#F6C445; opacity:1; }     /* 花のまん中＝きいろ */

/* --- ③ 木（PRO）------------------------------------------ */
.rm-3 .rm-stem  { stroke:#8B5E3C; }                /* 幹＝茶色 */
.rm-3 .rm-branch{ stroke:#8B5E3C; opacity:.8; }    /* 枝＝茶色 */
.rm-3 .rm-c1    { fill:#2FA98A; opacity:1; }       /* 中央の葉＝こいみどり */
.rm-3 .rm-c2    { fill:#6FC79E; opacity:.9; }      /* 左の葉＝中間のみどり */
.rm-3 .rm-c3    { fill:#8FD3A8; opacity:.9; }      /* 右の葉＝明るいみどり */
.rm-3 .rm-ground{ stroke:#B08160; opacity:.6; }    /* 土＝茶色 */
/* キラキラ4つ（順番にまたたきます）。濃さは動きの方で決まるので、色だけ指定します */
.rm-3 .sp1{ fill:#F6C445; }                        /* きいろ */
.rm-3 .sp2{ fill:#57C7E6; }                        /* みずいろ */
.rm-3 .sp3{ fill:#F0819B; }                        /* ピンク */
.rm-3 .sp4{ fill:#9BDC6E; }                        /* きみどり */

/* ★ SVGを拡大縮小するときの基準点を、図の座標（viewBox）にそろえます。
     これが無いと、動きが出なかったり変な方向に伸びたりします */
.rm-icon .rm-emerge,
.rm-icon .rm-stem,
.rm-icon .rm-leaf-l,
.rm-icon .rm-leaf-r,
.rm-icon .rm-branch,
.rm-icon .rm-crown,
.rm-icon .sp{ transform-box:view-box; }

/* 動く部品は、最初は「土の中」「縮んだ状態」にしておきます */
.rm-icon .rm-emerge{ transform:translateY(22px); }
.rm-icon .rm-stem{ transform-origin:30px 48px; transform:scaleY(.12); }
.rm-icon .rm-leaf-l,
.rm-icon .rm-leaf-r,
.rm-icon .rm-branch,
.rm-icon .rm-crown{ transform-origin:30px 44px; transform:scale(0); }
.rm-icon .sp{ opacity:0; }
.rm-icon .sp1{ transform-origin:50px 13px; }
.rm-icon .sp2{ transform-origin:9px 22px; }
.rm-icon .sp3{ transform-origin:47px 36.4px; }
.rm-icon .sp4{ transform-origin:17px 11px; }

/* カードが表示されたら（.is-visible）、順番に育ちます */
.roadmap-step.is-visible .rm-icon .rm-emerge{
  animation:rmEmerge 1.1s cubic-bezier(.22,1,.36,1) forwards;
}
.roadmap-step.is-visible .rm-icon .rm-stem{
  animation:rmStem .9s cubic-bezier(.22,1,.36,1) forwards;
}
.roadmap-step.is-visible .rm-icon .rm-leaf-l,
.roadmap-step.is-visible .rm-icon .rm-leaf-r,
.roadmap-step.is-visible .rm-icon .rm-branch,
.roadmap-step.is-visible .rm-icon .rm-crown{
  animation:rmGrow .7s cubic-bezier(.34,1.56,.64,1) forwards;
}
.roadmap-step.is-visible .rm-icon .rm-leaf-l{ animation-delay:.55s; }
.roadmap-step.is-visible .rm-icon .rm-leaf-r{ animation-delay:.68s; }
.roadmap-step.is-visible .rm-icon .rm-branch{ animation-delay:.5s; }
.roadmap-step.is-visible .rm-icon .rm-c1{ animation-delay:.6s; }
.roadmap-step.is-visible .rm-icon .rm-c2{ animation-delay:.78s; }
.roadmap-step.is-visible .rm-icon .rm-c3{ animation-delay:.9s; }

/* キラキラ（木が育ちきったあとに、ゆっくりまたたきます） */
.roadmap-step.is-visible .rm-icon .sp{
  animation:rmTwinkle 2.6s ease-in-out infinite;
}
.roadmap-step.is-visible .rm-icon .sp1{ animation-delay:1.2s; }
.roadmap-step.is-visible .rm-icon .sp2{ animation-delay:1.7s; }
.roadmap-step.is-visible .rm-icon .sp3{ animation-delay:2.1s; }
.roadmap-step.is-visible .rm-icon .sp4{ animation-delay:2.5s; }

@keyframes rmEmerge{ from{ transform:translateY(22px); } to{ transform:translateY(0); } }
@keyframes rmStem{ from{ transform:scaleY(.12); } to{ transform:scaleY(1); } }
@keyframes rmGrow{ from{ transform:scale(0); } to{ transform:scale(1); } }
@keyframes rmTwinkle{
  0%,100%{ opacity:0;   transform:scale(.4); }
  45%    { opacity:.95; transform:scale(1); }
}

/* JSが動かないとき／動きを減らす設定のときは、最初から育った状態で表示 */
html:not(.js) .rm-icon .rm-emerge,
html:not(.js) .rm-icon .rm-stem,
html:not(.js) .rm-icon .rm-leaf-l,
html:not(.js) .rm-icon .rm-leaf-r,
html:not(.js) .rm-icon .rm-branch,
html:not(.js) .rm-icon .rm-crown{ transform:none; }
html:not(.js) .rm-icon .sp{ opacity:.9; }
@media (prefers-reduced-motion: reduce){
  .rm-icon .rm-emerge,
  .rm-icon .rm-stem,
  .rm-icon .rm-leaf-l,
  .rm-icon .rm-leaf-r,
  .rm-icon .rm-branch,
  .rm-icon .rm-crown{ transform:none; animation:none !important; }
  .rm-icon .sp{ opacity:.9; animation:none !important; }
}
/* ============================================================
   ②「蕾 → 花が咲く」アニメーション（2026-07-30 追加）
   ============================================================
   じゅんばん：
     0.0秒〜 鉢から蕾がのぼってくる（前からある rmEmerge の動き）
     1.15秒〜 蕾がすっと小さくなって消える
     1.35秒〜 花びらが5枚、0.1秒ずつずれて開く
     1.95秒〜 まん中の黄色いしんが、ぽんと出る
   ▼ 全体を早くしたいとき → 下の 1.15s / 1.35s などの数字を小さくします
   ▼ 花びらの間隔を変える → pt1〜pt5 の delay の 0.1秒きざみを変えます
   ============================================================ */
.rm-icon .rm-petal,
.rm-icon .rm-core{
  transform-box:view-box; transform-origin:30px 20px; transform:scale(0);
}
.rm-icon .rm-bud-wrap{ transform-box:view-box; transform-origin:30px 24px; }

.roadmap-step.rm-2.is-visible .rm-bud-wrap{
  animation:rmBudFade .45s ease-in 1.15s forwards;
}
.roadmap-step.rm-2.is-visible .rm-petal{
  animation:rmBloom .55s cubic-bezier(.34,1.56,.64,1) forwards;
}
.roadmap-step.rm-2.is-visible .pt1{ animation-delay:1.35s; }
.roadmap-step.rm-2.is-visible .pt2{ animation-delay:1.45s; }
.roadmap-step.rm-2.is-visible .pt3{ animation-delay:1.55s; }
.roadmap-step.rm-2.is-visible .pt4{ animation-delay:1.65s; }
.roadmap-step.rm-2.is-visible .pt5{ animation-delay:1.75s; }
.roadmap-step.rm-2.is-visible .rm-core{
  animation:rmBloom .4s cubic-bezier(.34,1.56,.64,1) 1.95s forwards;
}
@keyframes rmBudFade{ to{ opacity:0; transform:scale(.55); } }
@keyframes rmBloom { from{ transform:scale(0); } to{ transform:scale(1); } }

/* JSが動かないとき／「動きを減らす」設定のときは、はじめから咲いた状態で出します */
html:not(.js) .rm-icon .rm-petal,
html:not(.js) .rm-icon .rm-core{ transform:none; }
html:not(.js) .rm-icon .rm-bud-wrap{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  .rm-icon .rm-petal,
  .rm-icon .rm-core{ transform:none; animation:none !important; }
  .rm-icon .rm-bud-wrap{ opacity:0; animation:none !important; }
}

.rm-when{ display:block; color:var(--ink); font-weight:900; font-size:1.06rem; margin:0 0 8px; }
.rm-badge{
  display:inline-block; background:var(--sky); color:#fff;
  font-family:"Outfit",sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.08em; padding:4px 12px; border-radius:999px; margin:0 0 10px;
}
.roadmap-step.rm-3 .rm-badge{ background:var(--brand); }

/* --- ③のバッジ「PRO」だけ、光の輪がふわっと広がります（B案／2026-07-30）---
   ・木が育ちきったあと（1.6秒後）から、輪が広がって消えるのをくり返します
   ・文字は うすくならない ので、目立つのに読みやすいままです
   ・速さを変えたいとき   → 2.6s の数字を大きくすると、もっとゆっくりに
   ・輪の大きさを変える   → 9px の数字を大きくすると、輪が大きく広がります
   ・輪の濃さを変える     → rgba(0,96,144,.45) の .45 を大きくすると、濃くなります
     （0,96,144 は公式の深い青 #006090 のことです）
   ・「動きを減らす」設定のパソコンでは、光りません（いちばん下の指定）
   ------------------------------------------------------------------- */
.roadmap-step.rm-3.is-visible .rm-badge{
  animation:rmProGlow 2.6s ease-in-out 1.6s infinite;
}
@keyframes rmProGlow{
  0%,100%{ box-shadow:0 0 0 0   rgba(0,96,144,.45); }
  55%    { box-shadow:0 0 0 9px rgba(0,96,144,0);   }
}
@media (prefers-reduced-motion: reduce){
  .roadmap-step.rm-3.is-visible .rm-badge{ animation:none; box-shadow:none; }
}
.rm-desc{ display:block; color:var(--text); font-size:.88rem; line-height:1.8; margin:0; }
.roadmap-note{ margin:24px 0 0; text-align:center; color:var(--mint); font-size:.9rem; font-weight:700; }

/* スマホでは、まっすぐな縦のタイムラインに */
@media (max-width:860px){
  .roadmap{ padding:26px 22px 20px; }
  .roadmap-path{ display:none; }
  .roadmap-line{
    grid-template-columns:1fr; gap:16px; min-height:0;
    max-width:460px; margin:0 auto; position:relative;
  }
  .roadmap-line::before{
    content:""; position:absolute; left:16px; top:10px; bottom:10px; width:4px;
    border-radius:2px; z-index:0;
    background:linear-gradient(180deg, var(--sky) 0%, var(--sky) 60%, var(--mint) 100%);
  }
  .roadmap-step,
  .roadmap-step.rm-1,
  .roadmap-step.rm-2,
  .roadmap-step.rm-3{
    position:relative; z-index:1;
    max-width:none; margin:0 0 0 36px; align-self:auto; justify-self:auto;
  }
  .roadmap-note{ text-align:center; }
}

/* --- ⑧ よくある質問（FAQ／開閉は details タグ） --- */
.faq-wrap{ max-width:820px; margin:0 auto; }
.faq-cat{ font-weight:900; color:var(--sky-dark); margin:28px 0 12px; font-size:1.04rem; }
.faq-cat:first-child{ margin-top:0; }
.qa{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); margin:0 0 12px; overflow:hidden;
}
.qa summary{
  list-style:none; cursor:pointer; position:relative;
  padding:18px 56px 18px 22px; font-weight:700; color:var(--ink); font-size:1rem;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; background:var(--bg-sky); color:var(--sky-dark);
  display:grid; place-items:center; font-weight:900; font-size:1.15rem;
}
.qa[open] summary::after{ content:"–"; }
.qa-body{ padding:0 22px 20px; color:var(--text); font-size:.96rem; }
.qa-note{ display:block; margin-top:8px; color:var(--muted); font-size:.86rem; }

/* --- 右下「↑ トップへ戻る」ボタン --- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:50px; height:50px; border-radius:50%;
  background:var(--brand); color:#fff; text-decoration:none;
  display:grid; place-items:center; font-size:1.3rem; font-weight:700;
  box-shadow:0 8px 20px rgba(0,96,144,.35);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--brand-dark); }
@media (max-width:640px){ .to-top{ right:14px; bottom:14px; width:46px; height:46px; font-size:1.2rem; } }
/* ▲▲ 復元したセクションのスタイル ここまで ▲▲ */

/* ============================================================
   ▼▼ CONTACT（過去のCTAデザインに復元・2026-06-16）▼▼
   「いますぐ決めなくて、大丈夫。」水色グラデの締めセクション
   ============================================================ */
/* ★ 2026-07-30：グラデの向きを「ななめ(165deg)」→「まっすぐ下(180deg)」に変更。
     ななめだと下のふちの色が左右でちがうため、フッターとの境目に線が見えていました。
     まっすぐ下にすると、下のふちがどこでも --navy-dark になり、フッターとぴったりつながります */
.cta{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-light) 50%, var(--navy-dark) 100%);
  color:#fff; text-align:center;
}
.cta .eyebrow.eyebrow-light{ color:var(--aqua); }
.cta .wrap{ max-width:760px; }
.cta .eyebrow{ justify-content:center; }
.cta-title{
  font-size:2rem; font-weight:900; color:#fff; line-height:1.45;
  margin:0 0 14px; letter-spacing:.01em;
}
.cta-lead{ font-size:1.06rem; color:rgba(255,255,255,.96); margin:0 0 28px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta .btn-accent{ background:#fff; color:var(--brand); }
.cta .btn-accent:hover{ background:var(--bg-sky); color:var(--brand-dark); }
.cta-sub-links{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin:20px 0 0; }
.cta-sub-links .text-link{ color:#fff; }
.cta-sub-links .text-link:hover{ border-color:#fff; }
.cta-mail{ margin:24px 0 0; font-size:.96rem; color:rgba(255,255,255,.96); }
.cta-mail a{ color:#fff; font-weight:700; }
.cta-job{ margin:18px 0 0; }
.cta-job a{
  color:#fff; font-weight:700; text-decoration:none; font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:2px;
}
.cta-job a:hover{ border-color:#fff; }
/* ▲▲ CONTACT 復元 ここまで ▲▲ */


/* ============================================================
   フッター（設計図v17で追加。コピーライト1行だけのシンプルな形）
   ============================================================ */
.site-footer{
  background:var(--navy-dark);              /* CONTACTの一番下とまったく同じ紺 */
  border-top:0;                             /* 2026-07-30：境目の細い線を削除（上と一体に見せる） */
  padding:26px 0; text-align:center;
}
.site-footer .footer-copy{
  color:rgba(255,255,255,.72); font-size:.78rem; letter-spacing:.06em; margin:0;
}