@charset "utf-8";
/* ==========================================================================
   舐めたくてグループ 男子求人サイト（NAMETAKUTE GROUP RECRUIT）
   SP固定幅 420px デザイン / レスポンシブなし・PCでは中央寄せ
   ========================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: none; border: 0; }
a { text-decoration: none; color: inherit; }

/* ---------- base ---------- */
:root {
  --w: 420px;
  --blue: #006abd;
  --blue-d: #0044bb;
  --navy: #001652;
  --blue-l: #0051d4;
  --yellow: #fff100;
  --gold: #baa16e;
  --nav-h: 73px;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
               "メイリオ", Meiryo, sans-serif;
  font-weight: 400;
  color: #222;
  background: #e9e9e9;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  position: relative;
  width: var(--w);
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
  padding-bottom: var(--nav-h);
}

/* 汎用 */
.sec { position: relative; display: block; width: var(--w); }
.t  { position: absolute; line-height: 1; white-space: nowrap; }
.tb { position: absolute; line-height: 1; }
.ab { position: absolute; }

/* 流れるテキスト（共通） */
.ticker { position: absolute; left: 0; width: 420px; overflow: hidden; height: 16px; }
.ticker-track {
  display: flex; width: max-content; animation: marquee 24s linear infinite;
  font-size: 13px; font-weight: 700; font-style: italic; line-height: 16px; white-space: nowrap;
}
.ticker-track span { padding-right: 26px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker.gold .ticker-track { color: #655f00; }
.ticker.white .ticker-track { color: #fff; }

/* 丸い ▶ ボタン（背景画像上に文字だけ載せる） */
.play { position: absolute; color: #fff; font-size: 16px; line-height: 1; }
.play.dark { color: #000; }

/* 見出し内の英字ラベル */
.tag { position: absolute; font-size: 14px; font-weight: 700; font-style: italic; color: #fff; letter-spacing: .5px; }

/* ==========================================================================
   FIRST VIEW
   ========================================================================== */
.fv { width: 420px; height: 591px; }

/* ==========================================================================
   ごあいさつ
   ========================================================================== */
.greet {
  height: 716px;
  background: url("../img/greet-bg.png") no-repeat center / 420px 716px;
}
.greet .ticker.t1 { top: 5px; }
.greet .ticker.t2 { top: 695px; }
.greet .logo20 { position: absolute; top: 78px; left: 126px; width: 169px; height: 180px; }
.greet h2, .greet h3, .greet p { text-align: center; width: 420px; left: 0; }
.greet .en1 { top: 259px; font-size: 15px; font-weight: 700; color: var(--blue-l); letter-spacing: 1px; }
.greet .jp1 { top: 280px; font-size: 15px; font-weight: 500; color: var(--navy); letter-spacing: 1px; }
.greet .jp1 span { border-bottom: 1px solid var(--navy); padding-bottom: 3px; }
.greet .en2 { top: 300px; font-size: 15px; font-weight: 500; color: var(--blue-l); line-height: 21px; letter-spacing: 1px; }
.greet .jp2 { top: 340px; font-size: 15px; font-weight: 500; color: var(--navy); line-height: 21px; letter-spacing: 1px; }
.greet .jp2 span { border-bottom: 1px solid var(--navy); padding-bottom: 2px; }
.greet .body { top: 405px; font-size: 13px; font-weight: 400; color: #1e1e1e; line-height: 32px; letter-spacing: .6px; }

/* ==========================================================================
   20周年特設ページ
   ========================================================================== */
.history {
  height: 145px;
  background: url("../img/history-bg.jpg") no-repeat center / 420px 145px;
}
.history .tag { top: 30px; left: 52px; }
.history .ttl1 { top: 57px; left: 40px; font-size: 18px; font-weight: 700; color: var(--blue-d); letter-spacing: .5px; }
.history .ttl2 { top: 86px; left: 40px; font-size: 33px; font-weight: 700; color: var(--blue-d); letter-spacing: .5px; }
.history .play { top: 96px; left: 365px; font-size: 12px; }

/* ==========================================================================
   青いセクション（働き方＋求人検索）
   ========================================================================== */
.blue {
  height: 2013px; margin-top: -3px;
  background: url("../img/blue-bg.jpg") no-repeat center / 420px 2013px;
}
.blue .tag.ws { top: 46px; left: 51px; font-size: 13px; }
.blue .circ { top: 57px; font-size: 17px; font-weight: 700; font-style: italic; color: #fff; }
.blue .ws1 { top: 74px; left: 39px; font-size: 19px; font-weight: 700; color: #fff; letter-spacing: 1px; }
.blue .ws2 { top: 100px; left: 39px; font-size: 33px; font-weight: 700; color: #fff; letter-spacing: 1px; }
.blue .ticker.t3 { top: 183px; }
.blue .ticker.t4 { top: 1983px; }
.blue .rc-head { position: absolute; top: 221px; left: 0; width: 420px; height: 310px; }
.blue .lead {
  position: absolute; top: 532px; left: 0; width: 420px; text-align: center;
  font-size: 11.5px; font-weight: 500; color: #fff; line-height: 21px; letter-spacing: .3px;
}
.blue .ybtn {
  position: absolute; top: 587px; left: 75px; width: 270px; height: 39px; border-radius: 20px;
  background: var(--yellow); display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--blue); letter-spacing: 1px;
}

/* --- 条件検索フィルター --- */
.fgroup { position: absolute; left: 0; width: 420px; }
.fgroup .glabel {
  position: absolute; left: 19px; top: 1px; width: 56px;
  font-size: 14.5px; font-weight: 700; color: #fff; line-height: 17px; letter-spacing: .5px;
}
.fcols { display: flex; padding-left: 74px; }
.fcol li { display: flex; align-items: center; }
.fcol li + li { margin-top: var(--rgap, 12px); }
.fcol i {
  flex: none; width: 22px; height: 22px; background: #fff; border-radius: 2px;
  display: block; margin-right: 7px;
}
.fcol span { font-size: 12px; font-weight: 500; color: #fff; letter-spacing: .2px; white-space: nowrap; }
.fsep { position: absolute; left: 19px; width: 390px; height: 1px; background: #fff; }

.g-work   { top: 649px; }  .g-work   .fcol:nth-child(1){width:124px} .g-work   .fcol:nth-child(2){width:115px} .g-work   li+li{--rgap:10.5px}
.g-earn   { top: 836px; }  .g-earn   .fcol:nth-child(1){width:124px} .g-earn   .fcol:nth-child(2){width:94px}  .g-earn   li+li{--rgap:14px}
.g-treat  { top: 930px; }  .g-treat  .fcol:nth-child(1){width:124px} .g-treat  li+li{--rgap:14px}
.g-detail { top: 1026px; } .g-detail .fcol:nth-child(1){width:117px} .g-detail .fcol:nth-child(2){width:126px} .g-detail li+li{--rgap:12px}
.g-job    { top: 1388px; } .g-job    .fcol:nth-child(1){width:150px} .g-job    .fcol:nth-child(2){width:93px}  .g-job    li+li{--rgap:13.2px}

.sep-1 { top: 817px; } .sep-2 { top: 911px; } .sep-3 { top: 1008px; } .sep-4 { top: 1372px; }

.searchbtn {
  position: absolute; top: 1608px; left: 32px; width: 355px; height: 51px; border-radius: 8px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 500; color: #1b2a5e; letter-spacing: 2px;
}
.searchbtn::after {
  content: ""; position: absolute; right: 42px; width: 21px; height: 21px;
  border: 2px solid #1b2a5e; border-radius: 50%;
}
.searchbtn i {
  position: absolute; right: 38px; bottom: 12px; width: 9px; height: 2px;
  background: #1b2a5e; transform: rotate(45deg);
}

/* ==========================================================================
   社内研修制度 / 特別昇給制度
   ========================================================================== */
.band2 { position: relative; display: block; width: 420px; }
.band2 .tag { top: 63px; }
.band2 .ttl1 { top: 93px; left: 40px; font-size: 19px; font-weight: 700; letter-spacing: 1px; }
.band2 .ttl2 { top: 122px; left: 38px; font-size: 46px; font-weight: 700; letter-spacing: 1px; }
.band2 .play { top: 142px; left: 369px; }

.training {
  height: 209px; margin-top: -4px;
  background: url("../img/training-bg.jpg") no-repeat center / 420px 209px;
}
.training .tag { left: 56px; }
.training .ttl1, .training .ttl2 { color: #fff; }

.salary {
  height: 210px; margin-top: -3px;
  background: url("../img/salary-bg.jpg") no-repeat center / 420px 210px;
}
.salary .tag { top: 62px; left: 55px; }
.salary .ttl1 { top: 94px; color: #111; }
.salary .ttl2 { top: 124px; color: #111; }
.salary .play { top: 143px; }

/* 黒帯ティッカー */
.blackbar { position: relative; height: 37px; margin-top: -4px; background: #000; overflow: hidden; }
.blackbar .ticker { top: 10px; }

/* ==========================================================================
   BBQ
   ========================================================================== */
.bbq { width: 420px; height: 592px; margin-top: -2px; }

/* ==========================================================================
   リンクボタン一覧
   ========================================================================== */
.links { height: 379px; background: #fff; }
.linkbtn {
  position: absolute; left: 18px; width: 384px; height: 73px;
  border: 2px solid var(--gold); border-radius: 8px; background: #fff;
  display: flex; align-items: center;
}
.linkbtn span { margin-left: 26px; font-size: 18px; font-weight: 700; color: #111; letter-spacing: 1px; }
.linkbtn span::before {
  content: ""; display: inline-block; width: 14px; height: 14px; background: #111;
  margin-right: 6px; vertical-align: -1px;
}
.linkbtn::before {
  content: ""; position: absolute; right: 27px; top: 50%; width: 56px; height: 1px; background: #111;
}
.linkbtn::after {
  content: ""; position: absolute; right: 27px; top: 50%; margin-top: -3px;
  width: 7px; height: 7px; border-top: 1px solid #111; border-right: 1px solid #111;
  transform: rotate(45deg);
}
.lb-1 { top: 23px; } .lb-2 { top: 109px; } .lb-3 { top: 195px; } .lb-4 { top: 281px; }

/* ==========================================================================
   メディア紹介
   ========================================================================== */
.media {
  height: 644px;
  background: url("../img/media-bg.jpg") no-repeat center / 420px 644px;
}
.media .tag { top: 36px; left: 57px; font-size: 13px; }
.media .ttl1 { top: 66px; left: 42px; font-size: 19px; font-weight: 700; color: #111; letter-spacing: 1px; }
.media .ttl2 { top: 96px; left: 40px; font-size: 47px; font-weight: 700; color: #111; letter-spacing: 1px; }
.media a { position: absolute; display: block; }
.m-tiktok   { top: 160px; left: 20px; width: 380px; height: 113px; }
.m-ganmushi { top: 268px; left: 19px; width: 383px; height: 165px; }
.m-insta    { top: 371px; left: 19px; width: 401px; height: 260px; }
.m-x        { top: 491px; left: 19px; width: 383px; height: 140px; }
.media a img { width: 100%; height: 100%; }

/* ==========================================================================
   一日の流れ
   ========================================================================== */
.routine { display: block; height: 309px; }
.routine-1 { background: url("../img/routine-1.jpg") no-repeat center / 420px 309px; }
.routine-2 { background: url("../img/routine-2.jpg") no-repeat center / 420px 309px; margin-top: -4px; }
.routine .tag { top: 43px; left: 57px; }
.routine .ttl1 { top: 74px; left: 42px; font-size: 19px; font-weight: 700; color: #fff; letter-spacing: 1px; }
.routine .ttl2 { top: 104px; left: 40px; font-size: 46px; font-weight: 700; color: #fff; letter-spacing: 1px; }
.routine .play { top: 117px; left: 308px; }
.routine .body {
  position: absolute; top: 159px; left: 41px;
  font-size: 12.5px; font-weight: 400; color: #fff; line-height: 30px; letter-spacing: .3px;
}
.routine .label { position: absolute; }
.routine-1 .label { top: 254px; left: 299px; width: 91px; height: 38px; }
.routine-2 .label { top: 260px; left: 299px; width: 82px; height: 30px; }

/* ==========================================================================
   食事会
   ========================================================================== */
.meal { width: 420px; height: 464px; margin-top: -1px; }

/* ==========================================================================
   下部固定メニュー
   ========================================================================== */
.navbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: var(--w); height: var(--nav-h); display: flex; z-index: 50;
}
.navbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; height: 100%;
}
.navbar .n1, .navbar .n3 { background: #0081e5; }
.navbar .n2, .navbar .n4 { background: #1eafa6; }
.navbar .en { font-size: 20px; font-weight: 700; font-style: italic; letter-spacing: 1px; }
.navbar .jp { margin-top: 7px; font-size: 11px; font-weight: 500; letter-spacing: .5px; }

/* ▶ の色（円の塗りに合わせる） */
.training .play, .routine .play { color: #000; }
.g-detail .glabel { font-size: 12.5px; line-height: 16px; }