@charset "UTF-8";
/* =============================================================
   chrome_shared.css  （クローム統一・単一ソース）
   common.css（先方ページ）× css_recruit（サブページ）の競合を解消し、
   ヘッダー / ドロップダウン / フッター / ハンバーガー / MV(.sub-ttl) を
   正解サブページ(work.html 等)と「完全に同じ」挙動へ揃える。

   使い方：各ページで CSS 一式の「最後」に1つだけ読み込む。
     TOP     : common(css/style.css) → intro.css → このファイル
     manual  : common(css/style.css) → css_recruit/style.css → このファイル
   本文レイアウトには触れない（chrome限定）。
   ============================================================= */

/* ------------------------------------------------------------
   rem基準の復元（本文フォントの肥大化を修正）
   css_recruit/style.css のリセット（html,body,…{font-size:100%}）が
   後勝ちで html を 16px に戻し、本文(type_check.css / job.css 等)の rem 指定が
   約1.6倍に膨らむのを打ち消す。元サイト(common.css)と同じ 10px 基準へ戻す。
   ※このファイルは job / type_check / job_introduction / TOP のみが読み込む。
     TOP は元々 10px のため無変化、about/work 等は本ファイル未読込のため影響なし。
   ------------------------------------------------------------ */
html { font-size: 10px; }
/* MVのタイプカーソルは rem 依存のため、従来の見た目(3.6rem×16px=57.6px)を維持 */
.ityped-cursor { font-size: 57.6px; }

/* letter-spacing も元サイト(common.css)に合わせる。
   css_recruit/style.css の body{letter-spacing:2px} が本文まで広げているのを打ち消し、
   本文は normal(0)、header/footer のみ 2px（元 common.css と同一）に戻す。 */
body { letter-spacing: normal; }
header, footer { letter-spacing: 2px; }

/* 基本タイポグラフィの復元。
   css_recruit/style.css のリセット（…{font-size:100%}）が common.css の
   p/h1/h2 指定を打ち消し、本文が効かなくなるのを元 common.css と同じ値に戻す。
   chrome の p/h* は id・class・!important でガード済みのため影響しない。 */
p { font-size: 1.6rem; }
h1 { font-size: 5rem; }
h2 { font-size: 2.6rem; }
h2 span { font-size: 1.6rem; display: block; }

/* ------------------------------------------------------------
   ボタン基礎（フッター/ハンバーガーで使用）
   ------------------------------------------------------------ */
.btn.active, .btn:active { box-shadow: none; -webkit-box-shadow: none; }
.btn01 {
  padding: 15px 95px;
  font-weight: bold;
  display: inline-block;
  text-decoration: none !important;
  font-size: 16px;
  box-sizing: border-box;
  transition: all .3s;
  background-color: #3169d1;
  color: #fff !important;
}
.btn-red2 { background-color: #E85D5D; border: 3px solid #E85D5D; color: #fff !important; }
.btn-org  { background-color: #F79E44; border: 3px solid #F79E44; color: #fff !important; }
.btn-org2 { background-color: #FF7900; border: 3px solid #FF7900; color: #fff !important; width: 100%; }
.btn-wh   { background-color: #fff;    border: 3px solid #000;    color: #000 !important; }

/* ------------------------------------------------------------
   ヘッダー（ロゴ左・ナビ右を1行で維持。common.css の flex/縦積み漏れを打ち消す）
   ------------------------------------------------------------ */
#header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  width: 100%;
  min-height: 80px;
  height: auto;
  background: #fff;
  z-index: 99999999;
  font-size: 14px;
}
/* clearfix の擬似要素が flex アイテム化して space-between を崩す（右に大きな空き）のを防ぐ */
#header:before,
#header:after { content: none !important; display: none !important; }
#header h1 {
  float: none;
  flex: 0 0 auto;
  margin: 0;
  padding: 15px 0 0 40px;
}

/* ドロップダウン：横1行を維持（nowrap で“落ち”を防止、余白は可変） */
#fade-in2.dropmenu {
  float: none;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}
.dropmenu:before, .dropmenu:after { display: none; } /* clearfix由来の余分なflex子要素を消す */
.dropmenu > li {
  float: none;
  position: relative;
  margin: 0;
  padding: 0 clamp(5px, 0.7vw, 20px);
  text-align: center;
  background: #fff;
  white-space: nowrap;
}
.dropmenu li.nav-red { padding: 0; height: auto; }
.dropmenu li a { display: block; margin: 0; }
.dropmenu > li > a {
  font-size: 14px;
  line-height: 1;
  padding: 0 0 5px 0;
  margin: 30px 0;
  display: inline-block;
  font-weight: 500;
}

/* サブメニュー */
.dropmenu li ul { list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; }
.dropmenu li ul li { width: 150%; margin-left: -25px; white-space: nowrap; }
.dropmenu li ul li a {
  padding: 30px 15px;
  border-top: 1px solid #E2E2E3;
  border-left: 1px solid #E2E2E3;
  border-right: 1px solid #E2E2E3;
  background: #fff;
  text-align: center;
  line-height: 1;
}
.dropmenu li ul li.nav-last a { border-bottom: 1px solid #E2E2E3; }
#fade-in2 { position: relative; z-index: 5; }
#fade-in2 li ul {
  opacity: 0; top: 0%; visibility: hidden; transition: .5s;
  z-index: -10; width: 100%; margin-top: 2px;
}

/* ENTRY（nav-red） */
.dropmenu > li.nav-red > a {
  background-color: #F79E44;
  border: 5px solid #F79E44;
  color: #fff !important;
  box-sizing: border-box;
  transition: all .3s;
  position: relative;
  line-height: 71px;
  margin: 0 0 0 20px;
  padding: 0 30px;
  display: block;
}

/* オレンジ下線（common の別方式 hover を打ち消し、css_recruit と同じワイプに） */
.dropmenu li ul li a span,
.dropmenu a {
  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(247,158,68,1) 50%);
  background-position: 0 0;
  background-size: 201% auto;
  background-repeat: repeat;
  transition: .3s;
}

/* ------------------------------------------------------------
   ナビ ⇔ ハンバーガー 切替（bootstrap 相当：1200px）
   common の visible-lg/xs だけだと 768〜1199px で両方消えるバグを回避
   ------------------------------------------------------------ */
@media (min-width: 1200px) {
  #fade-in2.dropmenu { display: flex !important; }
  #js__sideMenu { display: none !important; }
}
@media (max-width: 1199px) {
  #fade-in2.dropmenu { display: none !important; }
  #js__sideMenu { display: block !important; }
}

/* ------------------------------------------------------------
   PCマウスホバー（992px以上）— css_recruit/mediaquery.css と同一
   ------------------------------------------------------------ */
@media (min-width: 992px) {
  .btn01:hover  { background-color: transparent; }
  .btn-red2:hover { border: 3px solid #E85D5D; color: #E85D5D !important; background: #2B4357; }
  .btn-org:hover  { border: 3px solid #FF7900; color: #FF7900 !important; background: #2B4357; }
  .btn-org2:hover { border: 3px solid #FF7900; color: #FF7900 !important; background: #fff; }

  #fade-in2 li:hover ul { top: 100%; visibility: visible; opacity: 1; }

  .dropmenu li ul li a span:hover,
  .dropmenu a:hover {
    background-position: -100% 0;
    background-size: 201% auto;
    background-repeat: repeat;
    opacity: 1;
  }
  .dropmenu > li.nav-red > a:hover {
    background-color: transparent;
    border: 5px solid #F79E44;
    color: #F79E44 !important;
  }
}

/* ------------------------------------------------------------
   ハンバーガー（オーバーレイ / トリガー / ナビ / サイドメニュー）
   ページCSSの h2 巨大化・右はみ出しを防止
   ------------------------------------------------------------ */
.overlay {
  content: ""; display: block; width: 0; height: 0;
  background-color: rgba(0,0,0,.5);
  position: absolute; top: 0; left: 0; z-index: 2;
  opacity: 0; transition: opacity .5s;
}
.overlay.open { width: 100%; height: 100%; opacity: 1; }

#js__sideMenu { position: relative; }
.menu-trigger {
  display: inline-block; width: 36px; height: 28px;
  vertical-align: middle; cursor: pointer;
  position: fixed; top: 25px; right: 20px; z-index: 999999999; /* #header(8桁)より必ず上に */
}
.menu-trigger span {
  display: inline-block; box-sizing: border-box; position: absolute;
  left: 0; width: 100%; height: 4px; background-color: #000; transition: all .5s;
}
.menu-trigger.active span { background-color: #212121; }
.menu-trigger span:nth-of-type(1) { top: 0; }
.menu-trigger.active span:nth-of-type(1) { transform: translateY(12px) rotate(-45deg); }
.menu-trigger span:nth-of-type(2) { top: 12px; }
.menu-trigger.active span:nth-of-type(2) { opacity: 0; }
.menu-trigger span:nth-of-type(3) { bottom: 0; }
.menu-trigger.active span:nth-of-type(3) { transform: translateY(-12px) rotate(45deg); }

nav {
  width: 290px; height: 100%; padding-top: 80px;
  background-color: #fff; position: fixed; top: 0; right: 0; z-index: 10;
  transform: translate(290px); transition: all .5s;
  font-size: 16px; box-sizing: border-box; max-width: 100vw;
}
nav.open { transform: translateZ(0); }
nav .nav-wap { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: 30px; }
nav .btn { padding: 6px 11%; }
nav .nav-wap > ul > li { padding: 10px 0 10px 20%; }
nav .btn01 { padding: 15px 55px; font-size: 16px !important; }
nav .btn02 .btn01 { padding: 15px 50px 15px 45px; }
nav .btn02 .btn01 img { width: 12px; height: 12px; margin-left: 5px; }
nav .btn01 img { width: 12px; height: 12px; }
nav .ham_nav_entry  { width: 100%; background-color: #FF7900; border: 2px solid #FF7900; border-radius: 9999px; }
nav .ham_nav_contact{ width: 100%; background-color: #fff; border: 2px solid #000; color: #000 !important; border-radius: 9999px; }
/* ハンバーガー内テキスト：ページCSSの h2{font-size:2.6rem等} 漏れを打ち消す */
nav h2 { font-size: 16px !important; font-weight: 400; line-height: 1.4; }
nav .nav-wap > ul > li > a { font-size: 16px !important; line-height: 1.4; }
.side-menu__ul--child { display: none; }
.active .side-menu__ul--child { display: block; transition: all .5s; }
.side-menu__ul--child li a,
.side-menu__ul--child li a span { display: block; padding: 8px 0 0 11px; font-size: 12px !important; line-height: 1.4; transition: all .5s; }
.side-menu__ul > li > a,
.side-menu__ul > li h2 { display: block; padding: 10px 0 10px 20px; color: #333; transition: all .5s; }
.side-menu__ul h2 { cursor: pointer; transition: all .5s; }
.side-menu__li > h2:after { content: ' +'; color: #F79E44; font-size: 20px; transition: all .5s; position: relative; top: 2px; }
.side-menu__li.active h2:after { content: ' －'; transition: all .5s; }
.side-menu__ul > li > h2:hover,
.side-menu__ul > li a:hover { background: #f26964; color: #333; }

/* ------------------------------------------------------------
   フッター（正解サブページ work.html と同一）
   ------------------------------------------------------------ */
#footer { width: 100%; position: relative; z-index: 100; }
#footer .footer-hed { background: #757575; text-align: center; padding: 80px 0 80px; }
#footer .footer-hed .btn { padding: 0; }
#footer .footer-hed .btn a .btn01 {
  display: flex; justify-content: center; align-items: center;
  border-radius: 9999px; padding: 20px 95px; width: 300px;
  max-width: 100%; margin: 30px auto; box-sizing: border-box;
}
/* ボタン幅・余白は全幅で不変（正解サブページと同一。1000px等で変化させない） */
#footer .btn01 { margin: 30px auto; }
#footer .footer-hed .btn a .btn_entry { background-color: #FF7900; border: 2px solid #FF7900; }
#footer .footer-hed .btn a .btn_contact {
  background-color: #fff; border: 2px solid #fff; color: #000 !important;
  background-image: url(../img/common/contact_bg.svg);
  background-repeat: no-repeat; background-position: center right 75px; background-size: 12px 12px;
}
/* ホバーで背景が消える（サブページ css_recruit/style.css の &:hover と同一）。
   汎用の .btn01:hover(0,2,0) では上の指定(1,4,1)に負けて効かないため、
   同じ詳細度に :hover を足して打ち勝たせる。transition は .btn01 の all .3s が効く。 */
#footer .footer-hed .btn a .btn_entry:hover,
#footer .footer-hed .btn a .btn_contact:hover {
  background-color: transparent;
}
#gf-table { padding-left: 65px;
  padding-top: 15px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
  height: auto;
  padding-bottom: 100px; }
#gf-table a, #gf-table th { text-align: left; padding: 10px 0; font-weight: bold; color: #fff; 
  transition: all 0.3s;
}
#gf-table td { padding-bottom: 10px; padding-right: 40px; }
#gf-table td.link-icon a {
  padding-right: 15px;
  background: url(../img/common/icon2.svg) no-repeat bottom right;
  background-position: right 15px; background-size: 12px 12px;
}
#footer .footer-fot { display: block; width: 940px; max-width: 100%; margin: 30px auto; text-align: center; box-sizing: border-box; }
#footer .footer-fot li { float: left; padding: 0 10px 0 17px; }
#footer .footer-fot li img { width: 12px; height: auto; }
#footer .footer-fot p { font-size: 10px; font-weight: 600; margin-left: 50px; }
#footer p.footer-top { margin-top: 10px; }
#footer p.footer-top a { color: #fff; font-size: 16px; font-weight: 500; }

/* ------------------------------------------------------------
   MV（.sub-ttl）
   ------------------------------------------------------------ */
.sub-ttl h3 { font-size: 42px; letter-spacing: 5px; font-weight: 600; line-height: 1.0; }

/* ------------------------------------------------------------
   bootstrap 互換ユーティリティ（TOP/manual は bootstrap 未読込のため補完）
   フッターの企業サイト等リンクの表示/非表示をサブページと一致させる
   ------------------------------------------------------------ */
@media (max-width: 767px)                        { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px){ .hidden-md { display: none !important; } }
@media (min-width: 1200px)                       { .hidden-lg { display: none !important; } }

/* ============================================================
   レスポンシブ（css_recruit/mediaquery.css のクローム部分を再現）
   ============================================================ */
@media (max-width: 1024px) {
  #footer .footer-fot { width: 100%; padding: 0 15px; }
  #footer .footer-fot li { padding: 0 17px 0 0; width: 100%; display: block; margin: auto; background: none; float: none; }
  #footer .footer-fot ul { width: 100%; margin: auto; float: none; }
  #footer .footer-fot p { width: 100%; margin-left: 0; float: none; text-align: center; }
  #footer .footer-hed { padding-bottom: 30px; }
  .sub-ttl { background-size: 100% 300px; height: 300px; margin-top: 80px; }
  .sub-ttl h3 { font-size: 40px; font-weight: 600; }
  .pan { width: 90%; max-width: 100%; box-sizing: border-box; }
}

@media (max-width: 767px) {
  #header { height: 80px; min-height: 80px; }
  #header h1 { padding: 10px 0 0 15px; }

  /* フッターボタンは正解サブページに合わせ width:300px のまま（縮小しない）。SPは余白のみ 5px */
  #footer .footer-hed { padding-bottom: 80px; box-sizing: border-box; overflow: hidden; }
  #footer .footer-hed .btn a .btn01 { margin: 5px auto; }
  /* bootstrap 未読込のため visible-* が効かない改行をSPで非表示 */
  #footer .footer-fot br { display: none; }
  #footer .fot-logo { margin-bottom: 0; }
  #footer .fot-logo img { width: 50%; height: auto; max-width: 235px; }
  #footer p.footer-top { margin-bottom: 20px; }
  #footer .footer-fot { width: 100%; margin: 20px auto; padding: 0 15px; box-sizing: border-box; overflow: hidden; }
  #footer .footer-fot p { width: 100%; font-size: 8px; margin-left: 0; letter-spacing: 0.1em; float: none; text-align: center; }
  #footer .footer-fot li { padding: 0; width: 100%; display: block; margin: auto; background: none; float: none; }
  #footer .footer-fot ul { width: 100%; margin: auto; float: none; }

  .sub-ttl { background-size: 100% 220px; height: 150px; padding: 40px 0 140px; margin-top: 80px; }
  .sub-ttl h3 { font-size: 8vw; letter-spacing: 5px; }
  .sub-ttl h4 { font-size: 5vw; margin-top: 8px; }
  .sub-ttl hr { width: 55px; margin-top: 12px; }
}