@charset "utf8";
/*=============================
  - header
	- fotter
	- navigation
==============================*/

/*----------------------------------------------------
	260825 ブランドカラー（サイト別に値だけ差し替える）
	発注者支援(8shigyo)では 青 2557a7（HOME系）/ 2f6aab（下層系）の2系統が直書きされていたものを
	トークン化した。HOMEは primary、下層ページは primary-sub を使う関係を維持している。
	施工管理: 反映ガイド「濃いめのグリーン」。
	260825 支給ロゴ(logo2.png)のマークの緑を実測したところ 6db131（色相89度の黄緑）だったため、
	主色を同じ色相のまま明度を落とした濃緑に揃えた（当初の 1e6631 は色相137度でロゴと不調和だった）。
	（旧色の16進をここに書くと一括置換に巻き込まれるため # を付けずに記す）
----------------------------------------------------*/
:root {
	--c-primary:      #33691e;   /* 旧 2557a7 HOME・共通の主色。ロゴ緑と同色相の濃緑 */
	--c-primary-sub:  #43801f;   /* 旧 2f6aab 下層ページの主色（一段明るい） */
	--c-primary-dark: #244a15;   /* 旧 1e4687 */
	--c-primary-mid:  #6da33f;   /* 旧 5078b7 */
	--c-primary-pale: #dcebd0;   /* 旧 dde4f6 */
	--c-primary-bg:   #f1f7ec;   /* 旧 edf1ff 淡い背景 */
	/* 260826 元は #f0780c。CTAの地色として使うと白文字とのコントラストが 2.84:1 しかなく、
	   WCAG AA（通常文字 4.5:1）に届かない。白背景にオレンジ文字で置く箇所も 3.0:1 で不足していた。
	   色相・彩度はそのままに明度だけ下げ（V 0.94→0.72）、白文字 4.59:1 ／ 白地の文字 4.59:1 を確保した。
	   鮮やかな元の色は装飾専用として --c-accent-vivid に残す（文字を乗せないこと）。 */
	--c-accent:       #b85c09;   /* 旧 dc0c13 / db0c12 CTA（ワイヤーはオレンジ） */
	--c-accent-vivid: #f0780c;   /* 装飾のみ。文字の地色には使わない */
	/* --c-accent は白地でちょうど 4.59:1。淡い色を敷いた地の上に置くと 4.5:1 を割るので
	   （例: #f1f7ec の上で 4.21:1）、色付きの地に文字として乗せるときはこちらを使う。 */
	--c-accent-deep:  #a35008;   /* 淡い地の上に置くオレンジ文字用 */
	/* 260908 カンプの強調文字は鮮やかなオレンジ（#f0780c 相当）だが、白地で 2.84:1 しかなく
	   本文サイズでは WCAG AA（4.5:1）に届かない。ただし 18.66px以上の太字なら基準が 3.0:1 に緩む。
	   #f0780c の色相28度・彩度95%を保ったまま明度だけ 94%→91% に落とし、白地 3.01:1 を確保した色。
	   **19px以上の太字にのみ使うこと。** 本文サイズには --c-accent / --c-accent-deep を使う。 */
	--c-accent-bright: #e9740c;
	--c-logo:         #6db131;   /* 支給ロゴの緑。差し色として使う */
	/* 260908 転職支援サービスへ誘導するCTAだけを赤にする指示（ユーザー判断）。
	   --c-accent（オレンジ）はタグ・ラベル等でも使っており、変数ごと変えると
	   事例の「＼ここが成功しました／」等まで赤くなるため、CTA専用の変数を分けた。
	   クローン元の赤に戻した形。白文字とのコントラストは 5.12:1 で、
	   現行のオレンジ 4.59:1 より良い（WCAG AA 4.5:1 をクリア）。 */
	--c-cta:          #dc0c13;   /* 転職支援CTA専用。地色にのみ使う（白地の文字色には使わない） */
	/* 260910 「求人検索する」ボタン専用の緑（ユーザー指示 #00B050）。
	   指定どおりだと白文字とのコントラストが 2.87:1 で、大きい文字の基準 3.0:1 にも届かない。
	   色相147度・彩度100%はそのままに明度だけ 69%→67% へ落として 3.03:1 を確保した。
	   --c-primary（見出し帯・枠線・アイコンの濃緑）とは別に持つ。**20px以上の太字にのみ使うこと。** */
	--c-search:       #00ab4e;
	/* 260915 SPのCTAのように20pxを下回るサイズで同じ緑を使う場合の色。
	   色相147度はそのままに明度だけ落として 5.47:1（AA 4.5:1 クリア）にした。
	   サイズを問わず使える。並べても色味の違いはほぼ分からない。 */
	--c-search-deep:  #007a38;

	/* 半透明で使う分のRGB値。旧CSSに 1e4687c7 のような8桁hex（末尾c7＝不透明度78%）が
	   あり、色だけトークンに置換すると "var(--c-primary-dark)c7" という不正な値になって
	   宣言ごと破棄される。半透明はここから rgba() で組む。 */
	--c-primary-dark-rgb: 36, 74, 21;
}

/*----------------------------------------------------
	PC/SP 表示切替
----------------------------------------------------*/
.sp_disp { display: none !important; }
@media screen and (max-width: 650px) {
.sp_disp { display: block !important; }
}
/* 260915 responsive.css の SP ブロックは 680px 境界で `.sp_disp{display:block!important}` を
   効かせている（このサイトのSP境界は 650px）。その 651〜680px の帯はハンバーガーが出ず
   グローバルナビが並ぶ表示なので、放っておくとナビに「新規会員登録」「会員ログイン」が
   混ざる。ヘッダーのナビ内だけ詳細度を上げて消す。
   ※ .sp_disp を使っているのは header.tpl の4箇所（マイページ／新規会員登録／
     ログアウト／会員ログイン）だけなので、影響はヘッダーに限られる。 */
@media screen and (min-width: 651px) {
  #header .menu .inner .menu_list a.sp_disp { display: none !important; }
}

/*----------------------------------------------------
	header
----------------------------------------------------*/
#header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
#header .header_top {
  background-color: #fff;
}
#header .header_top .inner {
  width: 100%;
  max-width: 1220px;
  padding-left: 20px;
  padding-right: 20px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}
/* 260908 ロゴ素材を Sekokan_logo_G_3.png（597x236）由来に差し替え、460x170 で書き出した。
   PCは今までCSS指定が無く画像の原寸（163x60）がそのまま表示サイズだったので、
   解像度を上げるとロゴだけ巨大化する。表示サイズはここで固定する。 */
/* 260910 ロゴを logo2.png（横組み・比5.59）へ差し替えたため幅を広げた。
   元は163px（セコカンXロゴ・比2.71）で高さ60px。同じ高さを保つと335px。
   ロゴ右端からメニュー左端までの空きは417pxあるので収まる（実測）。 */
#header .header_top .logo_img {
  width: 335px;
  height: auto;
}

#header .header_top .inner  .menu-ani-button-wrap {
  display: block;
  width: 30px;
  height: 100%;
  margin-left: 10px;
}


#header .header_top .header_menu {
  display: flex;
  align-items: center;
}
#header .header_top .header_menu li a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  width: 120px;
  height: 100px;
  text-align: center;
  border-left: 1px solid #efefef;
}

#header .header_top .header_menu li:last-child a {
  border-right: 1px solid #efefef;
}

#header .header_top .header_menu li a img {
    margin-bottom: 5px;
}
#header .header_top .header_menu li a p {
  width: 100%;
  height: 30px;
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}



#header .menu {
  background-color: #344548ee;
}
/* 260826 グローバルナビを6項目にしたところ、横幅が足りない画面でリンクが2段になり、
   .inner が height:50px 固定だったため **2段目が暗いバーの外（本文の上）へ25pxはみ出していた**
   （実測 1024px。背景が透明なので白文字が本文に重なる）。
   ・.inner の height:50px を min-height にする（.menu_list が折り返しても .inner が伸びて
     必ずバーの中に収まる。.inner 自体は1段のままにし、右のCTAは従来どおり縮ませる）
   ・.menu_list を flex にして、インライン要素の間に入る空白（1項目あたり数px）を無くす
   ・651〜1199px は余白と文字を少し詰め、1024px でも1段に収まるようにする
     （実測: 施工管理 1024px でリンク実寸計 800px → 669px、確保できる幅 685px） */
#header .menu .inner {
  width: 100%;
  max-width: 1220px;
  padding-left: 20px;
  padding-right: 20px;
  min-height: 50px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-weight: bold;
}
#header .menu .inner .menu_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#header .menu .inner .menu_list a {
  font-size: 16px;
  color: #fff;
  padding: 0 20px;
  height: 50px;
  display: inline-flex;
  align-items: center;
}



#header .menu .inner .menu_right {
  font-size: 16px;
  /* 260908 転職支援CTAは赤（--c-cta）。定義は base.css 冒頭 */
  background-color: var(--c-cta);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 360px;
  height: 50px;
  color: #fff;
}

@media screen and (min-width: 651px) and (max-width: 1199px) {
  #header .menu .inner .menu_list a {
    padding: 0 12px;
    font-size: 15px;
  }
  /* CTAは width:360px 固定だが中の文字は実測224〜231px。この幅では固定分がそのまま
     ナビの折り返しに効いてしまうので、内容に合わせて詰める（約265px＝95px の余裕が出る）。 */
  #header .menu .inner .menu_right {
    width: auto;
    padding: 0 20px;
    /* 261013 幅が足りないと CTA が縮んで「無｜料」「30｜秒」で割れていた。1行に固定する（実測 263.8px。
       ナビが2段になる境目は変わらない）。中身は header.tpl で .menu_right_txt の span で包み、inline-flex の
       子が2列に分かれないようにしている */
    white-space: nowrap;
  }
}
/* 261013 下層の見出し帯は responsive.css で「ナビが2段になる幅（〜789px）」だけ margin-top:200px にしている。
   ナビの2段化はスクロールバーを除いたレイアウト幅で決まり、media はビューポート幅で決まるので、
   Windows の Chrome（スクロールバー 15px）では 790〜804px でナビが2段のまま帯の余白だけ 150px に戻り、
   ナビの2段目が帯に 50px 重なっていた（faq は h1 が隠れる）。この幅だけナビを1段に固定し、リンクの余白を詰めて収める。
   上限は実測の境目＋15px に、さらに 15px の保険（スクロールバー有りで 807px の余白が 2.3px しか無いため） */
@media screen and (min-width: 790px) and (max-width: 821px) {
  #header .menu .inner .menu_list {
    flex-wrap: nowrap;
  }
  #header .menu .inner .menu_list a {
    padding: 0 9px;
  }
}
/* 261013 「30秒」は header.tpl で .inline-block で包み「30｜秒」と割れないようにしている。common.css の「* { color:#000 }」が span に効くので色を継承させる */
#header .menu .inner .menu_right span {
  color: inherit;
}


@media screen and (max-width: 650px) {
  #header {
    width: 100%;
    height: auto;
  }
  #header .header_top .inner {
    width: 100%;
    height: auto;
    padding: 0 20px;
  }
  #header .header_top .logo_img {
    width: 230px;
    /* 261008 ロゴを文字だけの logo_kana.png（比7.85）にしたら、同じ幅で高さが 41→29px に下がり、
       ヘッダーが 61→49px に縮んだ。下層の見出し帯は responsive.css の .heading{margin-top:60px} で
       ヘッダー約61px を前提に置いてあり、間に約11pxの白地が出た（ミテクレ実測）。
       上下の余白を 10→16px にしてヘッダーの高さを元の約61px に戻す */
    margin: 16px 0;
  }
  #header .header_top .header_menu {
    display: none;
  }

  

  #header .menu .inner {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
  }
  
  /* 260915 上の PC 用ルールで .menu_list を flex にしてあるため（260826 の折り返し対策）、
     ここで display を戻さないと子の a{display:block} が flex item 化して効かず、
     SPメニューが「ＨＯＭＥ／はじめての方／施工管理業務の情報」の3項目を1行に詰めた
     横並びになる。SPは1項目1行なので block に戻す。 */
  #header .menu .inner .menu_list {
    display: block;
    width: 100%;
    padding: 10px 0;
  }
  #header .menu .inner .menu_list a {
    display: block;
    text-align: center;
    height: auto;
    padding: 10px 0;
  } 
  #header .menu .inner .menu_right {
    background-color: #0000;
    display: block;
    text-align: center;
    width: 100%;
    height: auto;
  }
}

/*  main-v  */
.main-v {
  position: relative;
  background: url(../images/bk_mv.jpg?v=260910a) no-repeat;
  background-size: cover;
  background-position: top center;
  /* 260908 写真が受け持つのはタグ／H1／リード／チェック3行／バッジ＋CTAまで。
     カンプでは実績エリアは写真の外（白地）にあるので、写真はここで終わらせる。
     #header は absolute で高さ150pxあり、ヒーローの上に重なる。その分は
     .main-title-wrap の padding-top で空ける。
     高さは中身に追従させ、背景画像（1920x800）は cover で合わせる。 */
  min-height: 640px;
  /* 実績エリアを .main-v の外に出したので、はみ出しぶんの余白は不要になった */
  margin-bottom: 0;
}
/* 260908 カンプは「明るい地に濃い文字」なので、260825 に入れていた黒のスクリム
   （暗い写真＋白文字にするためのもの）は外した。背景画像 bk_mv.jpg 側で
   左半分に白を焼き込んであるため、文字の下地は実測で 245,246,247 前後の白。
   代わりに、写真が明るすぎる個体差に備えて薄い白のグラデーションだけ残す。 */
.main-v::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}
/* 260825 .main-title-wrap / .main_result_wrap には z-index を付けないこと。
   どちらも ::before より DOM 後方にあるため、position だけでスクリムの上に描かれる。
   z-index:1 を付けると重ね合わせの文脈が上がり、直後の section.movie_pt（YouTube 5本）を
   踏みつけてサムネの上53%が下敷きになり、再生ボタンが5個ともクリックできなくなる。 */
.main-v .main-title-wrap {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  /* 260908 #header は absolute・高さ150pxでヒーローに重なる。実測で被らない位置まで空ける。
     192px は、タグを -4.5度 回転させていたとき右端が持ち上がる分を足した値。
     260930 タグを水平にした後もこの値のままで、ヘッダー下端からタグまでは全幅で42px（org-mitekure 実測） */
  padding: 192px 20px 0;
  position: relative;
}
/* 260908 グローバルナビが2段になる幅ではヘッダーが 150→200px に伸びる（実測: 1000px=150、
   960px=200）。padding-top が足りずタグがヘッダーの下敷きになっていた（実測 clear=-23px）。
   これは今回の回転より前からの状態で、タグが水平だったときも食い込んでいた。
   ※このメディアクエリは上の padding 指定より後ろに置くこと（同じ詳細度なので後勝ち） */
@media screen and (min-width: 651px) and (max-width: 999px) {
  .main-v .main-title-wrap {
    padding-top: 242px;
  }
}
.main_result_wrap {
  position: relative;
}

/* ===== 260908 ヒーロー（カンプ image29） ===== */
/* 「発注者支援・施工管理の転職に強い！」の緑タグ。
   260908 カンプでは帯ごと右上がりに傾いたリボン（-4.51度）だったが、
   260930 先方依頼でMVの文字は帯を含めてすべて水平にした。
   260910 帯を画面左端まで伸ばすのをやめ、版面内に収める（ユーザー指示）。
   右端はカンプと同じ燕尾（リボン）形にする。カンプを水平化して測った実測値は
   帯の高さ63px・右端中央の切り込み13px＝帯高の約20%。切り込みを px 固定にすると
   SPで深くなりすぎるので em で持たせる（0.5em＝PC20pxで10px・SP13pxで6.5px） */
.main-v .mv_tag {
  display: inline-block;
  background-color: var(--c-primary-dark);
  color: #fff;
  /* カンプ実測（1536px幅で帯の高さ61px・文字26px相当）に対して17pxは小さすぎた。
     260910 MVの文字はまとめて一回り大きく（ユーザー指示）。20→22px */
  font-size: 22px;
  font-weight: bold;
  /* 260910 MVの文字はイタリックにする（ユーザー指示）。Zen Kaku Gothic New に
     イタリック字形は無いのでブラウザの合成斜体になる。260930 の水平化でも斜体は残している */
  font-style: italic;
  line-height: 1;
  /* 左右とも切り込み（0.5em）のぶんを足して、文字が谷に食い込まないようにする */
  padding: 12px 40px 12px 40px;
  /* 260910 帯とH1が近かったので 18→38px（ユーザー指示で +20px） */
  margin-bottom: 38px;
  /* 260910 左右とも燕尾（ユーザー指示）。切り込みは 0.5em。
     260930 帯の回転（-4.5度）をやめて水平にした（先方依頼）。回転を打ち消すために
     左辺を 0.173em 倒していた分も不要になったので、左右対称の燕尾に戻した */
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.5em) 50%, 100% 100%, 0 100%, 0.5em 50%);
}
/* H1。大きさはカンプの主見出しに合わせる。
   261008 文言を SEOライティング資料E列からカンプの主見出し「建設業界のプロが／あなたの転職を全力サポート！」へ（先方指示）。
   260910 カンプに合わせて主見出し -4.4度・リード -4.4度・チェック3行 -3.6度で傾けていたが、
   260930 先方依頼ですべて水平にした（transform を外しただけで、文字の大きさ・余白は変えていない） */
.main-v .mv_head {
  color: var(--c-primary-dark);
  /* 260910 MVの文字はまとめて一回り大きく（ユーザー指示）。40→44px */
  font-size: 44px;
  /* 260910 カンプの主見出しは極太。Zen Kaku Gothic New は 900 まで読み込んである
     （index.html の Google Fonts に wght@...;900 を指定済み）ので bold(700)→900 */
  font-weight: 900;
  font-style: italic;
  line-height: 1.34;
  letter-spacing: 0.01em;
  /* 260910 サイト名の行とリードが近すぎたので 14→34px（ユーザー指示で +20px）。
     261008 リードを見出しへ上げて削除したので、旧リード→チェック3行の間隔 42px を引き継ぐ */
  margin-bottom: 42px;
}
/* color をここで必ず指定すること。common.css のリセット `* { color:#000 }` が
   全要素へ color を「直接」当てるため、span で囲むと親 h1 の色を継がず黒に落ちる */
.main-v .mv_head .mv_line {
  display: block;
  /* 260910 1行目は黒（ユーザー指示）。261008 カンプも1行目は黒 */
  color: #000;
  /* 260930 行ごとの回転（-4.4度）をやめて水平にした（先方依頼） */
}
/* 261008 2行目「あなたの転職を全力サポート！」はカンプどおり緑（実測 #1a6632 前後）。
   チェック3行のアイコンと同じカンプ実測の緑 #1C6C36 にそろえる。
   助詞は下の .particle（黒）より詳細度を上げて、同じ緑にする（カンプは助詞も緑）。
   旧 .mv_line_site（ロゴ画像の行）と .mv_lead（リード）は撤去した */
.main-v .mv_head .mv_line_accent,
.main-v .mv_head .mv_line_accent .particle {
  color: #1c6c36;
}
/* 260910 「なら」は助詞なので本文より小さくするが、0.7em では落ちすぎたので一回り上げる。
   em 指定なので SP で mv_head が小さくなっても比率を保つ。261008 「の・が・を」も同じ扱い */
.main-v .mv_head .particle {
  font-size: 0.8em;
  color: #000;
}
.main-v .mv_points {
  margin-bottom: 26px;
}
/* 260908 チェックをSVG（Bootstrap Icons）に変えたので、擬似要素の枠＋レ点は廃止。
   文字は19px。18.66px以上の太字にすることで、強調オレンジが 3.0:1 基準で使える */
/* li を flex にすると、テキストノードと <em> が別々のアイテムになり
   gap が語の間にも入って「非公開求人多数！ 好条件の求人 をご紹介」と隙間が空く。
   アイコンは絶対配置にして、行は通常のインライン組みのままにする */
.main-v .mv_points li {
  position: relative;
  padding-left: 33px;
  /* 260910 MVの文字はまとめて一回り大きく（ユーザー指示）。19→21px */
  font-size: 21px;
  /* 21px にすると3行目「建設業界に精通した…が伴走」が1行に収まらない（実測: 必要495px
     に対して枠476px＝19px不足）。枠は右の .mv_cta の padding-right:162px＝追従ボタン
     よけで決まっていて削れないので、3行とも同じだけ字間を詰めて収める */
  letter-spacing: -0.05em;
  font-weight: bold;
  font-style: italic;
  color: #23301c;
  line-height: 1.5;
  /* 260930 回転（-3.6度）をやめて水平にした（先方依頼） */
}
.main-v .mv_points li + li {
  margin-top: 12px;
}
/* 260930 li の回転をやめたので、チェックボックスを逆回転で直立させる指定（+3.6度）も外した */
.main-v .mv_points .ck {
  position: absolute;
  left: 0;
  top: 3px;
  display: inline-flex;
  color: var(--c-primary);
}
/* 260910 stroke を currentColor 任せにしない。親 .ck の color は緑（実測 rgb(51,105,30)）
   なのに、この svg の computed color だけが黒に落ちる（svg に color を当てているCSSは
   1本も無いことを全スタイルシート走査で確認済み）。currentColor はその黒を拾うため、
   枠もレ点も黒く描かれていた。Bootstrap Icons を fill="currentColor" で置いていた
   ときから同じ症状だったので、今回の差し替えで出たものではない */
.main-v .mv_points .ck svg {
  width: 22px;
  height: 22px;
  stroke: var(--c-primary);
}
/* 強調はカンプ準拠の鮮やかなオレンジ。19px太字なので 3.0:1 基準を満たす（定義は冒頭のコメント参照） */
/* 260910 行をイタリックにしたので、強調部分だけ直立に戻ると1行の中で字形が食い違う。
   em の既定値と同じだが、意図した指定であることを明示するため italic を書く */
.main-v .mv_points li em {
  color: var(--c-accent-bright);
  font-style: italic;
}

/* 260908 チェック3行とバッジ＋CTAを横並びにする（カンプの構成） */
.main-v .mv_body {
  display: flex;
  /* 下端揃えにするとチェック3行がCTAの高さぶん押し下げられ、リードとの間が空く。
     カンプはリードのすぐ下にリストが来て、CTAだけが少し下がる */
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.main-v .mv_body .mv_points {
  flex: 0 1 auto;
  margin-bottom: 0;
}
/* 260908 カンプではバッジとCTAが右寄り（人物の手前）に置かれている。
   リストの先頭より30px下から始まるので、その分だけ落とす */
.main-v .mv_cta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  margin-top: 26px;
}
/* チェック3行（実測 最大約450px）とバッジ＋CTA（月桂冠178＋gap22＋CTA約290＝約490px）を
   横に並べるには gap30＋左右padding40 を足して約1010px 要る。
   それ未満だとリストが1文字ずつ折り返して崩れる（実測 770pxで「非公開求／人多数！」、1050pxでも2行、1150pxでも3行目が2行）ので、
   カンプの横並びは足りる幅のときだけにして、狭い画面は縦積みへ戻す */
@media screen and (max-width: 1199px) {
  .main-v .mv_body {
    display: block;
  }
  .main-v .mv_cta {
    margin-top: 24px;
  }
}
/* 追従ボタン .fix_pt（幅120px・right30px＝右端から150px）との重なり回避。
   中央寄せコンテナ(1220px)の右端が追従ボタンに掛かるのは画面幅1520px未満のときだけなので、
   その範囲でだけ左へ逃がす。広い画面はカンプ通り右端に置く */
@media screen and (max-width: 1519px) {
  .main-v .mv_cta {
    padding-right: 162px;
  }
}
/* 月桂冠バッジ。素材は common/images/laurel.svg（CC0・出所は index.html のコメント参照）。
   原本は 324x296 の横長なので object-fit: contain で比率を保つ */
.main-v .mv_award {
  position: relative;
  width: 178px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* 260910 支給画像にメダル面が入ったので、CSSで作っていた金の面は撤去した */
.main-v .mv_award_leaf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 260910 カンプは金の面に黒文字。茶(#6b5310)では面に沈む */
.main-v .mv_award_text {
  position: relative;
  text-align: center;
  line-height: 1.45;
  color: #000;
  font-weight: bold;
}
.main-v .mv_award_text span {
  display: block;
  font-size: 13px;
}
.main-v .mv_award_text strong {
  display: block;
  font-size: 17px;
  margin-top: 2px;
}

.main-v .mv_apply {
  background-color: rgba(255, 255, 255, 0.94);
  /* 260910 一度カンプに合わせて上辺を弧にしたが、ユーザー判断で直線へ戻した */
  border-radius: 10px;
  padding: 14px 18px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.main-v .mv_apply_head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  /* 260910 bold(700)→900。カンプの見出しはベタ塗りに近い太さ */
  font-weight: 900;
  color: #23301c;
  margin-bottom: 10px;
}
.main-v .mv_free {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--c-primary);
  color: var(--c-primary);
  font-size: 15px;
  flex-shrink: 0;
}
/* 260908 MVの登録ボタンはカンプがオレンジ（実測 #f47a11）。赤はヘッダー・新着求人下・追従ボタンの
   「転職支援サービス」CTA専用で、こちらはカンプ通りオレンジに戻す。
   カンプの #f47a11 そのものは白文字 2.75:1 で大文字基準にも届かないため、
   色相28度・彩度をそのままに明度だけ落とした --c-accent（白文字 4.59:1）を使う */
.main-v .mv_apply_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 260910 登録ボタンはサイト内すべて赤で統一する（ユーザー指示）。
     ヘッダーの「転職支援サービス（無料）」・追従ボタンと同じ --c-cta。
     白文字とのコントラストは 5.1:1 で AA を満たす */
  background-color: var(--c-cta);
  color: #fff;
  border-radius: 6px;
  padding: 9px 54px 11px 24px;
  position: relative;
}
/* 260908 color を書かないと既存の span 指定（黒）が勝ち、赤地に黒文字で 4.11:1 になる（実測） */
.main-v .mv_apply_btn .sub {
  font-size: 13px;
  color: #fff;
}
.main-v .mv_apply_btn .main {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.2;
  color: #fff;
}
.main-v .mv_apply_btn::after {
  content: "";
  position: absolute;
  right: 24px;
  top: calc(50% - 6px);
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.main-v .btn01 {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 650px) {
  .main-v {
    /*height: calc(60vw + 60px);*/
    /* 260908 SPの #header は高さ105px（absolute）。60pxのままだとタグがヘッダーに
       食い込む（実測 tag top=79 < header bottom=105）ので余裕を持たせる */
    padding-top: 100px;
    height: auto;
    /* SPは写真が .main-title-wrap に移るので、PCの min-height:640px を残すと
       中身より背が高くなって下に空白ができる */
    min-height: 0;
	background: none;
    margin-bottom: 0;	/* 260825 PCで付けたはみ出し補正はSPでは不要（カードが枠内に収まる） */
  }
  /* 260825 SPは .main-v の背景が none になり、写真が .main-title-wrap に移る。
     .main-v::before は .main-title-wrap より前に描かれるので写真の下になり効かない。 */
  .main-v::before {
    display: none;
  }
  .main-v .main-title {
    padding: 5px 10px;
  }
  .main-v .main-title-wrap {
    width: 100%;
    padding: 5vw 4vw;
	/* 260908 PC同様「明るい地に濃い文字」へ。260825 に入れていた黒55%のスクリムは、
	   文字色を濃色にした今は逆に読めなくなるので白に置き換える。
	   SPは写真の人物が画面幅に対して大きく出るため、白を強めに敷いて文字を守る。
	   擬似要素で被せると非配置の子テキストより上に来てしまうので背景に重ねる。 */
	background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../images/bk_mv.jpg?v=260910a) no-repeat;
    background-size: cover;
    /* 260908 背景は 1920x640 の横長。SPの縦長枠に cover で入れると横が大きく切れるので、
       right だと人物の右端（背景のビル）ばかりが出て顔が中途半端に切れる。
       人物の中心が来る位置を実測で選ぶ */
    background-position: top 66%;
  }
  /* ===== 260908 ヒーロー（SP） ===== */
  .main-v .mv_tag {
    font-size: 13px;
    /* 左右とも PC と同じく切り込み（0.5em＝6.5px）ぶんを上乗せする */
    padding: 8px 26px 8px 26px;
    /* PCの +20px に合わせて広げる。SPは全体が半分ほどの縮尺なので +10px 相当 */
    margin-bottom: 22px;
  }
  .main-v .mv_head {
    /* 261008 見出しをカンプの「建設業界のプロが／あなたの転職を全力サポート！」に替えた。
       長い2行目（約13.3em）を1行に収めて、黒と緑の行が混ざって折れないようにする。
       枠幅は画面幅にほぼ比例するので vw で追従させ、24pxで頭打ちにする（320pxで20.5px・375pxで24px）。
       旧値 min(22px, 5.6vw) は旧1行目「…の転職なら」を1行に収めるための値だった */
    font-size: min(24px, 6.4vw);
    line-height: 1.35;
    /* 261008 リードを見出しへ上げて削除したので、旧リード→チェック3行の間隔 26px を引き継ぐ（旧 10px） */
    margin-bottom: 26px;
  }
  /* 261008 行は PC と同じ block のまま（2行で組む）。SP で inline に戻していた指定、
     ロゴ画像の行（.mv_line_site）・リード（.mv_lead）の指定は撤去した。
     260930 SPで h1 ごと回していた指定（-4.4度）をやめて水平にした（先方依頼） */
  .main-v .mv_points li {
    font-size: 14px;
    padding-left: 27px;
  }
  .main-v .mv_points li::before {
    width: 18px;
    height: 18px;
    top: 1px;
  }
  .main-v .mv_points li::after {
    left: 5px;
    top: 5px;
    width: 8px;
    height: 4px;
  }
  /* SPは横に並べる幅が無いので、チェック3行とCTAを縦に戻す */
  .main-v .mv_body {
    display: block;
  }
  .main-v .mv_cta {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 22px;
    /* SPは追従ボタンが画面下部の別レイヤーなので、PC用の逃がしは解除する */
    padding-right: 0;
  }
  .main-v .mv_award {
    width: 142px;
    height: 130px;
    margin: 0 auto;
  }
  /* バッジがPCの8割になるので文字も落とす。等倍のままだと左右の葉に文字が触れる */
  .main-v .mv_award_text span {
    font-size: 11px;
  }
  .main-v .mv_award_text strong {
    font-size: 14px;
  }
  .main-v .mv_apply {
    padding: 12px 14px 14px;
  }
  .main-v .mv_apply_head {
    font-size: 16px;
    gap: 8px;
  }
  .main-v .mv_free {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
  .main-v .mv_apply_btn {
    padding: 8px 40px 10px 16px;
  }
  .main-v .mv_apply_btn .main {
    font-size: 17px;
  }
  .main-v .mv_apply_btn::after {
    right: 18px;
  }
}



.main_company_wrap {
    background: rgba(255,255,255,0.7);
    padding: 1.0em 0.5em;
    display: inline-block;
    position: absolute;
    bottom: 1em;
    right: calc((100% - 1180px) / 2);
}
.main_company_wrap .ministry {
    width: 350px;
}
.main_company_wrap .inner {
    margin-top: 10px;
    display: flex;
}
.main_company_wrap .inner figure {
    width: 110px;
}

@media screen and (max-width: 650px) {
	.main_company_wrap {
		width: 100%;
        background: var(--c-primary-bg);
/*        padding: 1.0em 1.5em;*/
		padding: 10px 10px 15px 10px;
        position: static;
	}
	.main_company_wrap .ministry {
		width: 50%;
		margin: auto;
	}
	.main_company_wrap .inner { 
		gap: 0 30px; 
		justify-content: center;
        margin-top: 5px;
	}
	.main_company_wrap .inner figure {
/*		width: calc((100% - 60px) / 3);*/
		width: calc(50% / 3);
	}
	.main_company_wrap .inner figure img {
		
	}
}




/*----------------------------------------------------
	footer
----------------------------------------------------*/
#footer {
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  border-top: 5px solid #dddede;
}
#footer .foot-content {
  padding: 25px 0 10px;
}
#scroll-top a {
  border-radius: 50%;
  background: var(--c-primary);
  bottom: 70px;
  display: block;
  float: right;
  height: 70px;
  width: 70px;
  padding: 5px;
  position: fixed;
  right: 30px;
  text-align: center;
  padding-top: 16px;
  z-index: 9999;
}
#footer .copy {
  letter-spacing: 0.05em;
  padding: 10px 0;
  background-color: var(--c-primary);
  font-weight: bold;
}
@media screen and (max-width: 650px) {
  #footer {
    padding-top: 0;
  }
  #footer .foot-content {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #footer .foot-content h2 {
    text-align: center;
    margin-bottom: 15px;
  }
  #scroll-top a {
    bottom: 30px;
    height: 50px;
    width: 50px;
    padding-top: 10px;
  }
}

/*----------------------------------------------------
	sp ハンバーガーメニューcss
----------------------------------------------------*/
.menu-ani-button {
  cursor: pointer;
  position: absolute;
  width: 30px; /*---線の長さ---*/
  height: 25px; /*---線の太さ長さによって調整---*/
  margin-top: -10px;
}
.bar,
.bar:before,
.bar:after {
  height: 3px; /*---線の太さ---*/
  border-radius: 3px;
  width: 100%;
  background-color: #000;
  transition: all 0.25s;
  position: absolute;
}
.bar {
  left: 0;
  top: 10px;
}
.bar:before {
  content: "";
  left: 0;
  top: -10px;
}
.bar:after {
  content: "";
  left: 0;
  top: 10px;
}

.menu-animated .bar {
  background-color: transparent;
  transition: all 0.25s;
}
.menu-animated .bar:before {
  transition: all 0.25s;
  content: "";
  transform: rotate(45deg);
  top: 0px;
}
.menu-animated .bar:after {
  transition: all 0.25s;
  content: "";
  transform: rotate(-45deg);
  top: 0px;
}

/*----------------------------------------
ナビゲーション(ヘッダー)
----------------------------------------*/
#header .fixed-wrap {
  height: 100%;
}
#header .fixed-wrap,
#header .menu,
#header .sub-menu {
  display: flex;
}
#header .menu nav ul {
  display: flex;
  padding-top: 5px;
}
#header .menu nav ul li {
  margin-left: 30px;
}
#header .menu nav ul li a {
  display: block;
  transition: 0.3s;
  color: #000;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.03em;
}
#header .menu nav ul li a:hover {
  opacity: 0.7;
}
#header .menu .tel-wrap {
  margin-left: 40px;
  margin-right: 20px;
}
#header .menu .tel-wrap a {
  display: block;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 0 0 0 20px;
  background: url("../images/header-tel.png") no-repeat left 5px;
}
#header .menu .btn-wrap .btn01 {
  width: 200px;
  min-width: 200px;
  padding: 13px 0 15px;
}
@media screen and (max-width: 650px) {
  #header .fixed-wrap {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1000;
    background: #fff;
    padding-top: 2vw;
  }
  #header .menu {
    display: none;
    /*padding-top: 40px;*/
    padding-bottom: 20px;
  }
  #header .menu nav ul {
    display: block;
    padding: 0 5;
  }
  #header .menu nav ul li {
    width: 100%;
    border: none;
    text-align: left;
    margin-left: 0;
	  border-bottom: 1px solid #ddd;
  }
  #header .menu nav ul li:first-of-type { border-top: 1px solid #ddd; }
  #header .menu nav ul li a {
    font-size: 15px;
    padding: 18px 0;
    text-align: center;
  }
  #header .sub-menu {
    display: block;
  }
  #header .logo-wrap .menu-ani-button-wrap {
    display: block;
    width: 30px;
    height: 100%;
    margin-left: 10px;
  }
  #header .menu .btn-wrap {
    margin-top: 20px;
    padding: 0 8vw;
  }
  #header .menu .btn-wrap .btn01 {
    width: 100%;
    min-width: 100%;
    padding: 18px 0 20px;
  }
  #header .logo-wrap .sp-tel {
    display: block;
    padding-top: 3px;
  }
  #header .logo-wrap .sp-tel i {
    font-size: 30px;
    color: #2fbbdc;
    transform: rotate(105deg);
  }
}
/*----------------------------------------
ナビゲーション(フッター)
----------------------------------------*/
#foot-navi > .ul-wrap > ul {
  text-align: center;
  display: table;
  table-layout: auto;
  margin: 0 auto;
}
#foot-navi > .ul-wrap > ul > li {
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px;
}
#foot-navi > .ul-wrap > ul > li:last-of-type {
}
#foot-navi > .ul-wrap > ul > li > a {
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #000;
  transition: 0.3s;
}
#foot-navi > .ul-wrap > ul > li > a:hover {
  opacity: 0.5;
}
/* 260917 display:table のまま7項目を1行に詰めるため、1064px以下では各項目が縮み
   「個人情報保護方｜針」「利用規｜約」のように語の途中で折り返していた。
   この幅では項目ごとに折り返さず、サイトの案内5項目と企業様向け2項目で行を分ける
   （成り行きで折り返すと、745〜1064pxで2行目が「人材紹介サービス…」1項目だけになる）。
   ::before を幅100%・高さ0の区切りとして order で5項目目と6項目目の間に置く。
   区切りの行にも row-gap が付かないよう、行の間隔は li の上下 margin で取る。
   1行に収まるのは表示幅1065px以上。Windows のスクロールバー（約17px）の分を見込み、1099pxまでとする */
@media screen and (min-width: 651px) and (max-width: 1099px) {
  #foot-navi > .ul-wrap > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -6px auto;
  }
  #foot-navi > .ul-wrap > ul::before {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 1;
  }
  #foot-navi > .ul-wrap > ul > li {
    display: block;
    white-space: nowrap;
    margin: 6px 0;
  }
  #foot-navi > .ul-wrap > ul > li:nth-child(n+6) {
    order: 2;
  }
}

.footer_links {
  text-align: center;
  margin: 30px 0 30px 0;
}
.footer_links a {
  display: inline-block;
  margin: 0 10px;
}

.footer_info {
  text-align: center;
  margin-bottom: 10px;
}
/* 260910 ロゴを logo_site.png（1393×249）へ差し替えた。img に幅指定が無いと原寸で出るため、
   figure 側で幅を持たせて img を追従させる。SPは下の @media で 70% に切り替わる。 */
.footer_info figure {
  width: 335px;
  /* 260910 親の text-align:center は幅を持つブロックには効かないので auto で中央に寄せる。
     幅を入れた時点で左寄せになっていた */
  margin: 0 auto 10px;
}
.footer_info figure img {
  width: 100%;
  height: auto;
}
.footer_info p {
  font-size: 12px;
  font-weight: bold;
}


@media screen and (max-width: 650px) {
  #foot-navi > .ul-wrap > ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 4vw;
  }
  #foot-navi > .ul-wrap > ul li {
    min-width: 50%;
    text-align: center;
    margin: 0 auto 4vw auto;
  }
  #foot-navi > .ul-wrap > ul > li > a {
    /* 260917 3.5vw だけだと650pxで22.75pxになり、651px（15px）との境目で急に大きくなっていた。PCと同じ15pxを上限にする */
    font-size: min(3.5vw, 15px);
}
  .footer_info {
    padding: 0 20px;
  } 
  .footer_info figure {
    width: 70%;
    margin: 0 auto 2vw auto;
  } 
}