/* 東星テック 採用サイト 共通スタイル(リニューアル版)
   デザイン: 今風の求人サイトらしい、余白と階層のすっきりしたモダンな見た目。
   深い紺(夜空)× 星の金 をブランド色に、白ベース+柔らかい影+大きめの角丸。
   スマホ優先 / 利用者向け文字は日本語のみ */
:root{
  --navy:#10294f;
  --navy2:#0a1c38;
  --gold:#f5a301;
  --gold-dark:#b97a06;
  --ink:#182236;
  --sub:#64748b;
  --line:#e5eaf1;
  --bg:#f7f9fc;
  --card:#ffffff;
  --link:#1d6fd1;
  --radius:18px;
  --shadow:0 4px 20px rgba(13,38,76,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.8;
  font-size:16px;
  -webkit-text-size-adjust:100%;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ===== ヘッダー(白・すっきり) ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;flex-direction:column;line-height:1.3;color:var(--navy);min-width:0}
.brand:hover{text-decoration:none}
.brand .brand-en{font-weight:800;font-size:20px;letter-spacing:.12em;white-space:nowrap}
.brand .brand-en .star{color:var(--gold)}
.brand .brand-ja{font-size:11px;color:var(--sub);letter-spacing:.1em;white-space:nowrap}
.header-nav{margin-left:auto}
.header-nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;align-items:center}
.header-nav a{
  color:var(--ink);font-size:14px;font-weight:600;padding:9px 12px;border-radius:999px;display:block;white-space:nowrap;
}
.header-nav a:hover{background:#eef3fa;text-decoration:none}
.header-cta{
  background:var(--gold);color:#23180a !important;font-weight:800 !important;
  box-shadow:0 3px 10px rgba(245,163,1,.35);
}
.header-cta:hover{background:#ffb31f}
@media (max-width:760px){
  .site-header .wrap{flex-wrap:wrap;row-gap:8px}
  .brand{flex:1 1 auto}
  .brand .brand-en{font-size:17px}
  .header-nav{margin-left:0;width:100%}
  .header-nav ul{flex-wrap:wrap;justify-content:flex-start}
  .header-nav a{font-size:12.5px;padding:7px 9px}
}

/* ===== ヒーロー ===== */
.hero{
  background:
    radial-gradient(560px 260px at 85% -40px, rgba(245,163,1,.28), transparent 60%),
    radial-gradient(700px 320px at -10% 110%, rgba(38,99,199,.35), transparent 60%),
    radial-gradient(2px 2px at 14% 26%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 36% 12%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(2px 2px at 58% 34%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 76% 16%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 90% 44%, rgba(255,255,255,.8) 50%, transparent 51%),
    linear-gradient(155deg,#1a3a6e 0%, var(--navy) 48%, var(--navy2) 100%);
  color:#fff;
  padding:60px 0 54px;
}
.hero .kicker{
  display:inline-block;font-size:12.5px;letter-spacing:.16em;font-weight:700;
  color:#ffd97a;border:1px solid rgba(245,163,1,.6);border-radius:999px;padding:4px 14px;margin:0 0 18px;
  background:rgba(245,163,1,.12);
}
.hero h1{font-size:36px;line-height:1.45;margin:0 0 14px;font-weight:800;letter-spacing:.01em}
.hero h1 .hl{color:var(--gold)}
.hero p.lead{margin:0 0 24px;color:#d7e2f2;font-size:16px;max-width:660px}
.hero-stats{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px}
.hero-stats .stat{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:7px 16px;font-size:13px;color:#e8edf6;
}
.hero-stats .stat b{font-size:17px;color:#fff;margin-right:3px}
@media (max-width:760px){ .hero{padding:40px 0 34px} .hero h1{font-size:26px} .hero p.lead{font-size:15px} }

/* ===== 検索ボックス ===== */
.search-box{
  background:var(--card);border-radius:20px;padding:22px;
  box-shadow:0 18px 44px rgba(5,17,38,.28);
  color:var(--ink);
}
.search-box h2{font-size:16px;margin:0 0 12px}
.search-grid{display:grid;grid-template-columns:1fr 1fr 1.4fr auto;gap:12px}
.search-grid label{font-size:12.5px;color:var(--sub);display:block;margin-bottom:5px;font-weight:600}
.search-grid select,.search-grid input{
  width:100%;font-size:16px;padding:12px;border:1.5px solid var(--line);border-radius:12px;background:#fbfcfe;color:var(--ink);
}
.search-grid select:focus,.search-grid input:focus{outline:none;border-color:var(--gold)}
.search-btn{
  align-self:end;background:var(--gold);color:#23180a;border:none;font-weight:800;
  font-size:16px;padding:13px 26px;border-radius:999px;cursor:pointer;
  box-shadow:0 4px 14px rgba(245,163,1,.35);
}
.search-btn:hover{background:#ffb31f}
@media (max-width:760px){ .search-grid{grid-template-columns:1fr 1fr} .search-btn{grid-column:1/-1;width:100%} }

/* ===== セクション ===== */
.section{padding:52px 0 8px}
.section h2.sec-title{
  font-size:22px;margin:0 0 8px;padding-left:14px;border-left:5px solid var(--gold);line-height:1.4;font-weight:800;
}
.section p.sec-lead{color:var(--sub);font-size:15px;margin:0 0 18px}
.page-head{padding:38px 0 6px}
.page-head .kicker{
  display:inline-block;font-size:13px;font-weight:700;color:var(--gold-dark);
  letter-spacing:.06em;margin:0 0 8px;
}
.page-head h1{font-size:27px;margin:0 0 10px;line-height:1.45;font-weight:800}
.page-head p{color:var(--sub);margin:0;font-size:15px}
@media (max-width:760px){ .page-head h1{font-size:22px} .section{padding:40px 0 6px} }

/* ===== パンくず ===== */
.crumbs{font-size:12.5px;color:var(--sub);padding:16px 0 0}
.crumbs a{color:var(--sub)}
.crumbs .sep{margin:0 6px;color:#b7c0cf}

/* ===== 求人カード ===== */
.job-card{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin:0 0 12px;color:var(--ink);
  box-shadow:0 2px 10px rgba(13,38,76,.04);
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.job-card:hover{border-color:#f3cd72;text-decoration:none;box-shadow:0 10px 26px rgba(13,38,76,.11);transform:translateY(-1px)}
.job-card .jc-top{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.chip{
  display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 11px;
  background:#eaf1fa;color:var(--navy);
}
.chip.occ{background:#fdf0d0;color:#8a5a04}
.chip.new{background:#ffe0e0;color:#b02a2a}
.job-card h3{font-size:17px;margin:0 0 6px;line-height:1.55;font-weight:700}
.job-card .jc-meta{font-size:13.5px;color:var(--sub);margin:0}
.job-card .jc-salary{font-size:17px;font-weight:800;color:var(--gold-dark);margin:5px 0 0}

/* ===== 枠内スクロール一覧(社内ルール: 枠の高さを決めてその中でスクロール) ===== */
.frame-list{
  border:1px solid var(--line);border-radius:20px;background:#edf1f7;
  padding:14px;max-height:66vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.frame-list .job-card:last-child{margin-bottom:0}
.frame-note{font-size:12px;color:var(--sub);margin:8px 2px 0}

/* ===== リンクタイル ===== */
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:760px){ .tile-grid{grid-template-columns:repeat(2,1fr)} }
.tile{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;color:var(--ink);box-shadow:0 2px 10px rgba(13,38,76,.04);
}
.tile:hover{border-color:#f3cd72;text-decoration:none;box-shadow:var(--shadow)}
.tile b{display:block;font-size:16px;margin-bottom:2px}
.tile span{font-size:12.5px;color:var(--sub)}
.tile .cnt{color:var(--gold-dark);font-weight:700;font-size:14px}

/* ===== テーブル ===== */
.spec-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.spec-table th,.spec-table td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:15px}
.spec-table th{width:124px;background:#f2f6fb;color:var(--navy);font-size:13.5px;white-space:nowrap}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:none}
@media (max-width:760px){ .spec-table th{width:96px} }

/* ===== ボタン(今風のピル型) ===== */
.btn{
  display:inline-block;background:var(--gold);color:#23180a;font-weight:800;border:none;
  padding:14px 30px;border-radius:999px;font-size:16px;cursor:pointer;text-align:center;
  box-shadow:0 4px 14px rgba(245,163,1,.35);
}
.btn:hover{background:#ffb31f;text-decoration:none}
.btn.navy{background:var(--navy);color:#fff;box-shadow:0 4px 14px rgba(16,41,79,.3)}
.btn.navy:hover{background:#1d3f73}
.btn.block{display:block;width:100%}
.btn-sub{
  display:inline-block;border:1.5px solid var(--navy);color:var(--navy);font-weight:700;
  padding:11px 24px;border-radius:999px;font-size:15px;background:#fff;
}
.btn-sub:hover{text-decoration:none;background:#eef3fa}

/* ===== 求人詳細 ===== */
.job-head{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;margin:16px 0;box-shadow:var(--shadow)}
.job-head h1{font-size:23px;line-height:1.55;margin:10px 0 10px;font-weight:800}
.job-head .salary-big{font-size:25px;font-weight:800;color:var(--gold-dark)}
.prose{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;margin:0 0 16px;box-shadow:var(--shadow)}
.prose h2{font-size:18.5px;margin:0 0 12px;padding-left:12px;border-left:5px solid var(--gold);font-weight:800}
.prose h2:not(:first-child){margin-top:26px}
.prose p{margin:0 0 12px;font-size:15.5px}
.prose ul{margin:0 0 12px;padding-left:20px;font-size:15.5px}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 6px}
@media (max-width:760px){ .flow{grid-template-columns:1fr 1fr} }
.flow .step{background:#f2f6fb;border-radius:14px;padding:14px;font-size:13.5px}
.flow .step b{display:block;color:var(--navy);font-size:14.5px;margin-bottom:5px}
.flow .step .no{
  display:inline-block;background:var(--navy);color:#fff;border-radius:50%;width:21px;height:21px;
  text-align:center;line-height:21px;font-size:12px;margin-right:6px;
}

/* ===== モバイル固定応募バー ===== */
.mobile-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(13,38,76,.1);
}
.mobile-cta .btn{width:100%;padding:14px}
@media (max-width:760px){ .mobile-cta{display:block} body.has-mobile-cta{padding-bottom:80px} }

/* ===== FAQ ===== */
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:16px;margin:0 0 10px;box-shadow:0 2px 8px rgba(13,38,76,.03)}
.faq-item summary{
  cursor:pointer;padding:16px 18px;font-weight:700;font-size:15.5px;list-style:none;position:relative;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"＋";position:absolute;right:18px;color:var(--gold-dark);font-weight:800}
.faq-item[open ] summary::after{content:"－"}
.faq-item .faq-a{padding:0 18px 16px;font-size:14.5px;color:#3c4657}
.faq-item .faq-a p{margin:0 0 8px}

/* ===== フォーム ===== */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;margin:16px 0;box-shadow:var(--shadow)}
.form-card label{display:block;font-weight:700;font-size:14px;margin:18px 0 6px}
.form-card label:first-child{margin-top:0}
.form-card .req{color:#c0392b;font-size:12px;margin-left:6px}
.form-card input[type=text],.form-card input[type=email],.form-card input[type=tel],
.form-card select,.form-card textarea{
  width:100%;font-size:16px;padding:13px;border:1.5px solid var(--line);border-radius:12px;background:#fbfcfe;
}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:none;border-color:var(--gold)}
.form-card .hint{font-size:12.5px;color:var(--sub);margin-top:4px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ===== 特長・汎用 ===== */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){ .feature-grid{grid-template-columns:1fr} }
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 2px 10px rgba(13,38,76,.04)}
.feature h3{margin:0 0 9px;font-size:16.5px;color:var(--navy)}
.feature h3 .ico{color:var(--gold);margin-right:6px}
.feature p{margin:0;font-size:14.5px;color:#3c4657}
.notice-box{background:#fff8e6;border:1px solid #f3d68a;border-radius:16px;padding:15px 18px;font-size:14.5px;margin:16px 0}
.cta-band{
  background:
    radial-gradient(420px 200px at 88% -30px, rgba(245,163,1,.3), transparent 60%),
    linear-gradient(150deg,#1a3a6e,var(--navy2));
  color:#fff;border-radius:22px;
  padding:34px 24px;margin:30px 0;text-align:center;
  box-shadow:0 14px 34px rgba(5,17,38,.22);
}
.cta-band h2{margin:0 0 10px;font-size:21px}
.cta-band p{margin:0 0 18px;color:#d7e2f2;font-size:15px}

/* ===== フッター ===== */
.site-footer{background:var(--navy2);color:#c7d2e6;margin-top:56px;padding:40px 0 28px;font-size:13.5px}
.site-footer .f-brand{color:#fff;font-weight:800;font-size:18px;letter-spacing:.12em;margin:0 0 6px}
.site-footer .f-brand .star{color:var(--gold)}
.site-footer nav ul{list-style:none;margin:16px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.site-footer nav a{color:#c7d2e6}
.site-footer .f-meta{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;margin-top:16px;color:#93a3bd;font-size:12.5px}
.site-footer .f-meta p{margin:0 0 5px}