@charset "UTF-8";

/* ==========================================================
   命名規約 ── 触る前に一読すること
   ----------------------------------------------------------
   本サイトのCSSは3階層です。決して混ぜないでください。
     ① 親テーマ SWELL … .c- / .p- / .l- / .u- / .is-（FLOCSS）
                         → 触らず、衝突させず、参照のみとします
     ② 既存の子テーマ … 素のBEM（.header__inner 等）
                         → 継続使用します。触った時だけ見直します
     ③ 採用案内ページ群（page-guide.php） … 素のBEM・接頭辞なし ← 新規はすべてここ

   命名ルール：
     - ブロック名は「役割を表す固有の複合語」（.pageHead / .jobCard）
     - 素の総称語（.button .card .tag 等）は使いません（衝突回避のため）
     - 番号では管理しません（.sec--08 のような命名は禁止です）
     - 要素は __、修飾は --、JSフックは js-、状態は .block.is-xxx

   要素クラスを付けるかどうかの判断：
     - 親クラスの範囲内で「その種類のタグが1つしかない・構造上迷わない」なら
       素のタグ＋親クラスで狙います（例：.workSection__item h3 / .positionCard__link p）
       → HTMLにクラスを足しません。コーディング担当（非エンジニア含む）の負担軽減が目的です
     - ただし次に該当する要素は、これまで通り __要素名クラスを付けます：
       ①JS/CSSから個別に位置指定・装飾アンカーにする（grid-column指定、::after基準等）
       ②他ブロックでも再利用する共通部品（.btn系、.sectionHead系）
       ③そのブロックに同種タグが複数あり、タグ選択子だけでは区別できない
     - 迷ったら「後で誰かが要素を1つ足しても事故らないか」で判断します

   スコープ：全ページで読み込まれる。ページ本文の部品のみを置き、
   header/footer（.siteHeader等）は common-mod.css 側に置く。
   common.css（本番原本）には混ぜないこと。

   注意：img{width:100%} 等のbareセレクタは置かないこと（旧ページやロゴにも効く）。
   ========================================================== */

/* ==========================================================
   デザイントークン ── 唯一の基準
   色を変えるなら、原則ここ一箇所だけを書き換える
   ========================================================== */
:root{
  /* 色：ブランド */
  --c-primary:   #2E7D4F;  /* SELVAグリーン（暫定・カンプから目分量。調整は1行） */
  --c-primary-d: #1F5C39;  /* 濃緑：塗りパネル・強調ブロック */
  --c-primary-s: #E9F2EC;  /* 淡緑：callout・帯の背景 */

  /* 色：文字・地 */
  --c-text:      #1A211C;  /* 基本文字（ほぼ黒） */
  --c-muted:     #5B655E;  /* 補助文字（グレー） */
  --c-bg:        #FFFFFF;  /* 地の白 */
  --c-bg-soft:   #F4F7F4;  /* セクション交互の淡い地 */
  --c-bg-faint:  #FAFDFB;  /* ほぼ白・微緑（Adobe RGB 0.985/0.993/0.983 換算）。ABOUT等の背景 */
  --c-footer:    #232826;  /* フッター濃色 */
  --c-border:    #E2E8E3;  /* 罫線・カード枠 */

  /* 字組み */
  --font-head:   "Noto Sans JP", sans-serif;  /* 和文 見出し・本文 */
  --font-en:     "Jost", sans-serif;          /* 英字アイブロウ */

  /* 寸法 */
  --wrap:        1100px;   /* 内容幅（既存 #content と一致） */
  --space-sec:   80px;     /* セクション上下の基準余白 */
  --radius:      8px;      /* カード・ボタンの角丸 */
  --headerH:     76px;     /* ヘッダー高さ（SP値の上書きはcommon-mod.css） */
}


/* ==========================================================
   UTILITY: 汎用（採用案内ページ群共通）
   ========================================================== */

/* スクロールで要素をフェードイン（nier.jsの本番オリジナル部分が .scroll を付与） */
.js-fade{
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
.js-fade.scroll{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* トップページはサイドバー非表示 */
body.home #sidebar{
  display: none;
}


/* ==========================================================
   COMPONENT: セクション・アイブロウ  .sectionEyebrow
   ========================================================== */
.sectionEyebrow{
  margin: 0;
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-primary);
}


/* ==========================================================
   COMPONENT: ボタン  .btn / .btn--primary / .btn--outline / .btn--outline-primary / .btn--white
   ----------------------------------------------------------
   header/footer の全高エントリーボタン（common-mod.css側）とは別物です。
   本文中で使う汎用ボタンです。

   .btn--outline        中立（グレー枠・黒文字）。ホバーで緑になります。
                         例）「記事一覧を見る」等、.sectionHead__link と対
   .btn--outline-primary 常時グリーン（枠線・文字とも）。「事業内容を見る」等、
                         ページを跨いで登場する緑リンクはこちらを使います。
   .btn--white           白塗り・緑文字。緑背景（CTA帯等）の上で使う専用です。
   ========================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 32px;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.btn--primary{
  background: var(--c-primary);
  color: #fff;
}
.btn--primary::after{
  content: "\203A";  /* › */
  display: inline-block;
  width: .3em;
  height: 1.2em;
  font-size: 1.6em;
  line-height: 1;
}
.btn--primary:hover{ background: var(--c-primary-d); }

.btn--outline{
  background: #ffffffac;
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.btn--outline:hover{
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.btn--outline-primary{
  background: transparent;
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
}
/* .btn は display:inline-flex です。::after は独立したFlexアイテムとして扱われるため、
   縦位置は vertical-align（Flex内では無視されます）ではなく、Flexアイテム自身の
   クロス軸整列プロパティ align-self で指定します。 */
.btn--outline-primary::after{
  content: "\203A";  /* › */
  display: inline-block;   /* 自身も1文字をきっちり収める箱にします */
  width: .3em;
  height: 1.2em;
  font-size: 1.6em;  /* ›は字形の内側に余白が多く、本文と同じサイズだと小さく見えるため大きめに */
  line-height: 1;
}
.btn--outline-primary:hover{
  background: var(--c-primary);
  color: #fff;
}

.btn--white{
  background: #fff;
  color: var(--c-primary-d);
}
.btn--white::after{
  content: "\203A";  /* › */
  display: inline-block;
  width: .3em;
  height: 1.2em;
  font-size: 1.6em;
  line-height: 1;
}
.btn--white:hover{ background: var(--c-primary-s); }

@media (max-width: 480px){
  .btn{ height: 48px; padding: 0 24px; font-size: 1.4rem; }
}


/* ==========================================================
   COMPONENT: セクション見出し  .sectionHead
   ----------------------------------------------------------
   「アイブロウ＋見出し（左）＋一覧へのリンク（右）」の型です。
   新着記事／ABOUT／魅力／インタビュー／募集職種など、
   トップの複数セクションで繰り返し使います。
   ========================================================== */
.sectionHead{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
}
.sectionHead__title{
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 2.6rem;
  color: var(--c-text);
}
.sectionHead__title .sectionEyebrow{
  display: block;   /* h2内でも見出しの上に独立した行として置きます */
}
.sectionHead__link{
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  border: 1px solid var(--c-primary);
  border-radius: 5px;
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-primary);
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.sectionHead__link::after{ content: "\203A"; }  /* › */
.sectionHead__link:hover{
  border-color: var(--c-primary);
  color: var(--c-primary);
}

@media (max-width: 600px){
  .sectionHead{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ==========================================================
   COMPONENT: 下部CTA帯  .ctaBand
   ----------------------------------------------------------
   全幅・緑グラデーションです。他セクションのような細い境界線は
   引きません（帯自体の強い色面が区切りになるため）。
   ========================================================== */
.ctaBand{
  padding-block: 96px;   /* 56pxから拡大し、カンプに近づけています */
  background: linear-gradient(120deg, var(--c-primary), var(--c-primary-d));
  color: #fff;
}
.ctaBand__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
.ctaBand__heading{
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: min(3.5rem, 3vw);
}
.ctaBand__desc{
  margin: 0;
  font-size: min(1.8rem, 1.6vw);
  opacity: .9;
}
.ctaBand .btn{
  height: 60px;        /* 通常の.btnより大きく */
  padding-inline: 56px;   /* 40pxから拡大、もう少し幅広に */
  border-radius: 0;
  font-size: 1.6rem;
}
.ctaBand .btn::after{
  content: "\203A";   /* › 他のボタン類と同じ手法・同じ文字で統一しています */
  margin-left: 4px;
  color: var(--c-primary-d);   /* 白背景の上、.btn--whiteの文字色に合わせています */
}

@media (max-width: 700px){
  .ctaBand__inner{
    flex-direction: column;
    text-align: center;
  }
  .ctaBand__heading{
    font-size: min(3rem, 8vw);
  }
  .ctaBand__desc{
    font-size: min(1.6rem, 5vw);
  }
  .ctaBand .btn{
    display: flex;         /* SPは列幅いっぱいに広げます */
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================
   COMPONENT: パンくずリスト  .pageBreadcrumb
   ----------------------------------------------------------
   SWELL本体のパンくず自動生成（parts/breadcrumb.php）はアイコン
   フォントや.p-breadcrumb系CSSが読み込まれておらず、流用すると
   見た目が崩れます。そのため、WordPressコアの機能（get_the_title / home_url）
   だけを使い、このページのデザイントークンに合わせて自前で組んでいます。
   page-guide.phpから全採用案内ページ共通で呼ばれます。
   見た目は /recruitment/blog/ 等、旧サイト側に残っている
   style.cssの`.breadcrumb`（斜め45度の小さな正方形を矢印に見立てる
   方式）に合わせています。色だけ旧サイトの#53a436ではなく、
   このサイトのトークン（var(--c-primary)）に統一しています。
   ========================================================== */
.pageBreadcrumb {
  /* ルート style.css の旧ルール nav{position:absolute;width:100%} を
     明示的に上書きしています（.gnav・.footerNav・.qaTabsと同じ理由）。 */
  position: static;
  width: auto;
  padding: 1rem 0;
}
.pageBreadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  list-style: none;
  font-size: 1.4rem;
  color: var(--c-text);
}
.pageBreadcrumb li {
  position: relative;
  padding: 0 3rem 0 0;
  line-height: 1.3;
}
.pageBreadcrumb li:last-child {
  padding: 0;
}
.pageBreadcrumb li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.3rem;
  margin: auto;
  width: 4px;
  height: 4px;
  border-top: 1px solid var(--c-primary);
  border-right: 1px solid var(--c-primary);
  transform: rotate(45deg);
}
.pageBreadcrumb a {
  font-size: 1.4rem;
  color: inherit;
  text-decoration: none;
}
.pageBreadcrumb a:hover {
  color: var(--c-primary);
}

@media (max-width: 900px) {
  .pageBreadcrumb ol {
    font-size: 1.2rem;
  }
  .pageBreadcrumb a {
    font-size: 1.2rem;
  }
}

/* ==========================================================
   COMPONENT: ページ見出し  .pageHero
   タイトル＋リード文＋写真、下に注記バー。採用案内ページ共通の構成です。
   ----------------------------------------------------------
   写真がPCで画面右端に接触するため、.pageHero__inner を
   var(--wrap) に収めず、左右を独立して伸ばす構成にしています
   （テキスト側だけ、wrapの左端に揃うようpaddingで調整しています）。
   ========================================================== */
.pageHero__inner{
  display: flex;
  align-items: stretch;
  margin-bottom: 3rem;
}
.pageHero__text{
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 56px;
  padding-right: 40px;
  padding-left: max(24px, calc((100vw - var(--wrap)) / 2));
  padding-bottom: 40px;
}
.pageHero__title{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 4rem;
  color: var(--c-text);
  margin-bottom: 16px;
}
.pageHero__title .sectionEyebrow{
  display: block;   /* h1内でも見出しの上に独立した行として置きます（.sectionHead__titleと同じ扱いです） */
}
.pageHero__lead{
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.9;
  color: var(--c-primary);
}
.pageHero__desc{
  margin-top: 16px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--c-text);
}
.pageHero__media{
  flex: 0 0 50%;
  position: relative;
  z-index: 0;
  max-width: 50%;
}
.pageHero__media::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, #fff 0%, #ffffff00 100%) no-repeat left / cover;
}
.pageHero__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pageHero__note{
  margin-top: 32px;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-primary);
  border-radius: var(--radius);
}
.pageHero__noteIcon{
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--c-primary);
}
.pageHero__note p{
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--c-text);
}

@media (max-width: 900px){
  .pageHero__inner{
    flex-direction: column;
  }
  .pageHero__text{
    flex: none;
    max-width: 100%;
    padding: 40px 24px 40px;
  }
  .pageHero__title{
    font-size: 2.8rem;
    margin-bottom: 12px;
  }
  .pageHero__lead{
    /* .bizCard で決めたSPのバランス（見出しと本文の差を詰め、全体を大きめ・読みやすく）
       に合わせて引き上げています。以前の1.5remだと本文サイズとして見劣りしていました */
    font-size: 1.7rem;
    line-height: 1.7;
  }
  .pageHero__desc{
    margin-top: 12px;
    font-size: 1.5rem;
    line-height: 1.7;
  }
  .pageHero__media{
    flex: none;
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }
  .pageHero__note{
    margin: 20px 0;
    padding: 10px 16px;
  }
  .pageHero__noteIcon{
    width: 44px;
    height: 44px;
  }
  .pageHero__note p{
    font-size: 1.7rem;
  }
}


.pageColumn {
  margin: 0 auto;
  max-width: var(--wrap);
}
.pageColumn > section {
  padding: 35px 24px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
}

@media (max-width: 1100px){
  .pageColumn {
    max-width: 95%;
  }
}

@media (max-width: 900px){
  .pageColumn > section {
    border-top: 1px solid var(--c-border);
    border-right: none;
    border-bottom: 1px solid var(--c-border);
    border-left: none;
    border-radius: 0;

  }
}

/* ページ末尾のCTA帯には .ctaBand を使う（独自クラスは作らない）。 */