@charset "UTF-8";

/* =========================================================
   バイキャリ 事業者向けサイト  common.css  ─ 全ページ共通レイヤ
   ・デザイントークン(:root)＝色・フォント（本サイト bilingual-career.com と共通の値）
   ・ベース／コンテンツ幅の器／ボタン／ヘッダー／フッター
   読み込み順は各ページで  ress → Google Fonts → common.css → (top.css | lower.css)

   ■ レイアウト方針
   ・PC（>1100px）  : コンテンツ幅 1240px 固定（Figma PC フレーム 1920 の中央 1240）。
                      帯（オレンジ／黒／クリーム／CTA）は全幅で左右に広がる。
                      body に min-width 1280px（1240 + 左右 20px）を置き、1280px 未満は横スクロールバー。
   ・SP（≤1100px）  : Figma SP フレーム（750px = 375 の 2 倍）の値を
                      min(calc(N/750*100vw), Npx) でそのまま書く（375px で N/2 px、750px 以上で N px）。
                      コンテンツは max-width 750px で中央寄せ。負の値は max() で書く。
   ・アンカーは scroll-behavior: smooth。TOP の演出（カウントアップ／横流れ／SP カルーセル／吹き出し）は
     assets/js/top.js。JS が動くと <html> に .js が付くので、演出用の初期状態は .js 前置で書く。
   ========================================================= */

/* ===== デザイントークン ===== */
:root{
  --c-orange:   #DE3B00;   /* 濃いオレンジ：帯・見出し・アクセント */
  --c-cream:    #F9EEDA;   /* 薄いオレンジ：背景・フッター・ボタン文字 */
  --c-purple:   #6518FF;   /* Clickable：ボタン */
  --c-black:    #202020;   /* 本文・黒帯 */
  --c-ink:      #1A1A1A;   /* txt_main */
  --c-green:    #04DC00;   /* FV スプラッシュ */
  --c-line:     #E0E0E0;
  --c-gray-bg:  #EEEEEF;
  --c-required: #D62E2E;
  --c-optional: #4A5568;
  --c-white:    #ffffff;

  --f-jp:       "Zen Kaku Gothic New", sans-serif;
  --f-en:       "Barlow", sans-serif;
  --f-step:     "Boldonse", sans-serif;
}

/* ===== ベース ===== */
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body{
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-black);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
}
/* PC：1240 + 左右 20px を下限にして、狭いビューポートでは横スクロールバーを出す */
@media (min-width: 1101px){
  body{ min-width: 1280px; }
}
img, svg{
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
a{
  color: inherit;
  text-decoration: none;
}
ul, ol{
  margin: 0;
  padding: 0;
}
em, strong{ font-style: normal; }

/* ===== コンテンツ幅の器 ===== */
.container{
  width: 1240px;
  margin-inline: auto;
}
@media (max-width: 1100px){
  .container{
    width: 100%;
    max-width: 750px;
    padding-inline: min(calc(20/750*100vw), 20px);
  }
}

/* ===== ボタン ===== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 40px;
  border-radius: 8px;
  background: var(--c-purple);
  color: var(--c-cream);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.btn:hover{ opacity: .85; }
.btn--outline{
  padding: 0 20px;
  border: 1px solid var(--c-cream);
  background: transparent;
  font-family: var(--f-en);
  font-size: 16px;
  text-align: center;
}
@media (max-width: 1100px){
  .btn{
    height: min(calc(72/750*100vw), 72px);
    padding: 0 min(calc(40/750*100vw), 40px);
    border-radius: min(calc(8/750*100vw), 8px);
    font-size: min(calc(24/750*100vw), 24px);
  }
  .btn--outline{
    padding: 0 min(calc(20/750*100vw), 20px);
    font-size: min(calc(16/750*100vw), 16px);
  }
}

/* ===== ヘッダー（オレンジ帯 + 黒帯）：全ページ共通 =====
   帯は全幅。中身は 1240 の器ではなく画面端から 60px（Figma 準拠） */
.site-header__top{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 60px;
  background: var(--c-orange) url("../img/common/bk_bg.png") center center / cover no-repeat;
}
.site-header__logo{
  display: block;
  width: 165px;
  height: 40px;
  margin-right: auto;
}
.site-header__logo img{
  width: 100%;
  height: 100%;
}
.site-header__nav{
  padding: 20px 60px;
  background: var(--c-black);
  color: var(--c-white);
}
.site-header__nav-inner{
  display: flex;
  gap: 48px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -1px;
  white-space: nowrap;
}
@media (max-width: 1100px){
  .site-header__top{
    gap: min(calc(20/750*100vw), 20px);
    padding: min(calc(20/750*100vw), 20px);
  }
  .site-header__logo{
    width: min(calc(165/750*100vw), 165px);
    height: min(calc(40/750*100vw), 40px);
  }
  .site-header__nav{
    padding: min(calc(20/750*100vw), 20px) min(calc(30/750*100vw), 30px);
  }
  .site-header__nav-inner{
    gap: min(calc(48/750*100vw), 48px);
    font-size: min(calc(20/750*100vw), 20px);
    letter-spacing: max(calc(-1/750*100vw), -1px);
  }
}

/* ===== セクション共通（TOP / 下層で使う見出し類） ===== */
.sec{ padding-block: 140px; }
.sec__cap{
  padding-bottom: 20px;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 1px;
  color: var(--c-orange);
  text-align: center;
}
.sec__title{
  padding-bottom: 60px;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  color: #000;
  text-align: center;
}
@media (max-width: 1100px){
  .sec{ padding-block: min(calc(140/750*100vw), 140px); }
  .sec__cap{
    padding-bottom: min(calc(20/750*100vw), 20px);
    font-size: min(calc(34/750*100vw), 34px);
    letter-spacing: min(calc(1/750*100vw), 1px);
  }
  .sec__title{
    padding-bottom: min(calc(60/750*100vw), 60px);
    font-size: min(calc(42/750*100vw), 42px);
  }
}

/* ===== フッター：全ページ共通（クリーム地・全幅） ===== */
.site-footer{
  padding: 60px 0;
  background: var(--c-cream);
  color: var(--c-black);
  text-align: center;
}
.site-footer__logo{
  display: block;
  width: 165px;
  height: 40px;
  margin: 0 auto 10px;
}
.site-footer__logo img{
  width: 100%;
  height: 100%;
}
.site-footer__nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
}
.site-footer__nav a:hover{ text-decoration: underline; }
.site-footer__copy{
  font-family: var(--f-en);
  font-size: 12px;
  line-height: 1;
}
@media (max-width: 1100px){
  .site-footer{ padding: min(calc(60/750*100vw), 60px) min(calc(20/750*100vw), 20px); }
  .site-footer__logo{
    width: min(calc(198/750*100vw), 198px);   /* PC比 1.2倍（165→198） */
    height: min(calc(48/750*100vw), 48px);    /* PC比 1.2倍（40→48） */
    margin-bottom: min(calc(30/750*100vw), 30px);
  }
  .site-footer__nav{
    gap: min(calc(16/750*100vw), 16px);
    margin-bottom: min(calc(30/750*100vw), 30px);
    font-size: min(calc(20/750*100vw), 20px);
    line-height: min(calc(24/750*100vw), 24px);
  }
  .site-footer__copy{ font-size: min(calc(16/750*100vw), 16px); }
}