@charset "UTF-8";

/* ==========================================================
   front.css ── トップページ専用（is_front_page() のみ読込）
   ----------------------------------------------------------
   命名規約・トークンは guide.css を参照してください。ここにはトップ固有の
   組み立て（FV・統計・MOVIE・CTA配置など）のみを書きます。
   共通部品（ボタン・カード・ピル等）は guide.css へ書いてください。
   ========================================================== */

.wrap{
  overflow: hidden;   /* 装飾（葉っぱ等）の画面端はみ出しを防ぎます。削除しないでください */
}


/* ==========================================================
   セクション境界線 ── カンプ通り、各セクションの間に1本引く
   ----------------------------------------------------------
   個々のセクションブロックには書かず、ここに集約します。
   新しいセクションを追加したら、このセレクタにクラス名を足してください。
   ========================================================== */
.newsSection,
.aboutSection,
.movieSection,
.workSection,
.interviewSection,
.positionsSection{
  border-top: 1px solid var(--c-border);
}


/* ==========================================================
   SECTION: ファーストビュー  .hero
   ----------------------------------------------------------
   写真は img-hero_sp.jpg を PC/SP共通で使い回します。
   PC/タブレットのみ、.hero::before に「ウィンドウ幅いっぱい」の
   背景レイヤー（多層の淡緑グラデーション＋葉っぱ）を敷きます。
   今は仮のCSSグラデーションで代用しています。実素材（合成画像）が来たら
   background-image に差し替えてください（下のTODO参照）。
   SPはこの背景レイヤーごと非表示にします（写真そのまま）。
   ========================================================== */
.hero{
  position: relative;
  /* padding-block: 64px; */
  /* height: 65vh; */
  /* min-height: 580px; */
  overflow: hidden;   /* 背景レイヤーが画面端からはみ出さないための保険 */

}
.hero::before {
  content: "";
  display: block;
  padding-top: 40%;
  width: 100%;
}
/* .hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 70%;
  background: linear-gradient(90deg, #ffffff 70%, #ffffff00 100%);
} */
.hero__inner{
  /* position: relative; */
  /* z-index: 1; */
  display: flex;
  align-items: center;
  gap: 60px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  /* max-width: var(--wrap); */
  width: 100%;
  height: 100%;
  /* min-width:  900px; */
  margin-inline: auto;
  padding-inline: 24px;
}
.hero__text{ 
  /* flex: 1 1 480px;  */
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: var(--wrap);
}
.hero__title{
  margin: 0 0 20px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: max(3.6rem, 2.2vw);
  line-height: 1.45;
  color: var(--c-text);
}
.hero__lead{
  margin: 0 0 20px;
  font-weight: 700;
  font-size: max(1.7rem, 1.1vw);
  color: var(--c-primary);
}
.hero__desc{
  margin: 0 0 32px;
  font-size: max(1.5rem, .9vw);
  line-height: 1.9;
  color: var(--c-muted);
}
.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.hero__actions .btn {
  border-radius: 0;
  height: 3vw;
  font-size: max(1.5rem, .9vw);
}

.hero__media{
  /* flex: 1 1 420px; */
  position: absolute;
  top: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero__media picture{
  display: block;
  width: 100%;
  height: 100%;
}
.hero__media picture img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
}

@media (max-width: 1440px){
  .hero__media picture img{
    object-fit: cover;
  }
}
@media (max-width: 1200px){
  .hero::before {
    padding-top: 55%;
  }
  .hero__text{ 
    width: 100%;
  }
}
@media (max-width: 900px){
  .hero {
    height: auto;
  }
  .hero::before{ display: none; }   /* SPは背景レイヤーごと非表示にします（写真そのまま） */
  .hero__inner{
    flex-direction: column;   /* SPカンプ通り：テキストが上、写真が下 */
    gap: 32px;
    position: relative;
    padding-block: 65px;
    text-align: center;
  }
  .hero__title{ font-size: 2.8rem; }
  .hero__actions{ justify-content: center; }
  .hero__actions .btn {height: 50px; }
  .hero__media{ 
    position: static;
    width: auto;
  }
}
@media (max-width: 480px){
  .hero{ padding-block: 40px; }
  .hero__title{ font-size: 2.4rem; }
  .hero__actions{ flex-direction: column; align-items: stretch; }
}


/* ==========================================================
   SECTION: 新着記事  .newsSection
   ----------------------------------------------------------
   記事一覧本体は SWELL 本体の [blog_parts]（.p-blogParts / .p-postList 等）
   が描画します。ここでは自前のクラス（.newsSection*）で
   コンテナ幅とセクション見出しの配置だけを整えます。
   親テーマのクラスには極力スタイルを当てませんが、
   PC4カラム化だけは例外的に .newsSection 配下に限定して上書きします（下記）。
   ========================================================== */
.newsSection{
  padding-block: var(--space-sec);
}
.newsSection__inner{
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

/* 親テーマの [blog_parts] は pc-col1〜3 までしか用意がない（4カラムの設定自体が存在しない）ため、
   .newsSection 配下に限定して子テーマから上書きします。他ページの記事一覧には影響させません。
   タブレット幅は4カラムだと窮屈になるため2カラムに留め、カード幅に余裕がある分タイトルは全文表示します。
   PCの広い幅（1201px〜）でのみ4カラム化し、タイトルを2行に切り詰めます。 */
@media (min-width: 901px) and (max-width: 1200px){
  .newsSection .p-postList.-type-card .p-postList__item{
    width: 50%;
  }
}
@media (min-width: 1201px){
  .newsSection .p-postList.-type-card .p-postList__item{
    width: 25%;
  }
  .newsSection .p-postList__title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}


/* ==========================================================
   SECTION: ABOUT SELVA  .aboutSection
   ----------------------------------------------------------
   左＝見出し＋説明＋リンク、右＝統計カード2x2グリッドです。
   ========================================================== */
.aboutSection{
  padding-block: var(--space-sec);
  background: var(--c-bg-faint);
}
.aboutSection__inner{
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
.aboutSection__text{ flex: 1 1 350px; }
.aboutSection__text .sectionHead__title{
  margin: 0 0 20px;
  font-size: 2.4rem;
  line-height: 1.6;
}
.aboutSection__desc{
  margin: 0 0 28px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--c-muted);
}

.statGrid{
  flex: 1 1 420px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;   /* Gridの既定stretchでカードが行の高さいっぱいに間延びするのを防ぎます */
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.statCard{
  display: grid;      /* カード内部もGridのままです。1列に積み、gapで縦の間隔を1箇所に集約しています */
  justify-items: center;   /* Flexのalign-itemsに相当します。列内で中央寄せします */
  gap: 6px;           /* 要素間の余白はここ1箇所で決まります。margin-bottomは使いません */
  padding: 18px 20px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  text-align: center;
}
/* 仮アイコンです。最終素材が来たら中身（inline SVG）を差し替えてください */
.statCard__icon{
  width: 28px;
  height: 28px;
  color: var(--c-primary);
}
.statCard__label{
  font-size: 1.2rem;
  color: var(--c-muted);
}
.statCard__value{
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--c-primary-d);
}

/* PC：アイコン列＋テキスト列の2列Gridです。テキスト列を「最長のvalue（300社以上=129px）
   に合わせた固定幅」にすることで、カードごとにまとまりの全体幅が変わらなくなり、
   justify-content:center で中央寄せしてもアイコンのX位置がズレなくなります。
   （アイコン位置の固定と、まとまり全体の中央寄せは、テキスト幅が可変なままだと
   数学的に両立しません。テキスト列を固定幅に揃えるのが、両立させる方法です）
   SPは上の1列積み・中央寄せのまま変更しません。 */
@media (min-width: 901px){
  .statCard{
    grid-template-columns: auto 130px;   /* 130px = 最長「300社以上」129px + 余裕1px */
    justify-content: center;             /* アイコン+テキストのまとまりをカード中央へ */
    justify-items: start;                /* テキストは列内で左揃え */
    align-items: center;
    column-gap: 16px;
    row-gap: 2px;
    text-align: left;
  }
  .statCard__icon{
    grid-column: 1;
    grid-row: 1 / 3;   /* label・value の2行分にまたがり、align-items:centerで上下中央 */
  }
  .statCard__label{
    grid-column: 2;
    grid-row: 1;
  }
  .statCard__value{
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 900px){
  .aboutSection__inner{
    flex-direction: column;
    text-align: center;
  }
  .aboutSection__text{
    flex: none;   /* PC用 flex-basis:350px が縦積み時に「高さ」として効き、下に無駄な余白ができるのを防ぎます */
  }
  .aboutSection__text .btn{
    display: flex;         /* SPは列幅いっぱいに広げます（.btn自体の既定=内容に合わせる、は変えません） */
    width: 100%;
    justify-content: center;
  }
  .statGrid{
    flex: none;   /* PC用 flex-basis:420px が縦積み時に「高さ」として効き、行が間延びするのを防ぎます */
    width: 100%;
  }
}
@media (max-width: 480px){
  .statGrid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .statCard{ padding: 16px; gap: 4px; }
  .statCard__value{ font-size: 2.2rem; }
}


/* ==========================================================
   SECTION: 会社紹介動画  .movieSection
   ----------------------------------------------------------
   左＝見出し＋説明＋リンク、右＝動画埋め込み（16:9）です。
   .movieSection__media::before の padding-top で比率を確保し、
   iframe は絶対配置で重ねます（レスポンシブiframeの定石です）。
   ========================================================== */
.movieSection{
  padding-block: var(--space-sec);
}
.movieSection__inner{
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 48px 24px;         /* 枠の内側の余白 */
  background: var(--c-bg-faint);   /* aboutSection__innerと同じ幅の枠 */
  border: 1px solid var(--c-border);
  border-radius: var(--radius);    /* カンプ通り角丸（PC/SP共通） */
}
.movieSection__text{ flex: 1 1 350px; }
.movieSection__text .sectionHead__title{
  margin: 0 0 20px;
  font-size: 2.4rem;
  line-height: 1.6;
}
.movieSection__desc{
  margin: 0 0 28px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--c-muted);
}

.movieSection__media{
  position: relative;
  flex: 1 1 480px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-bg-soft);   /* iframe読込前の下地 */
}
.movieSection__media::before{
  content: "";
  display: block;
  padding-top: 56.25%;   /* 16:9 */
}
.movieSection__media iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px){
  .movieSection__inner{
    flex-direction: column;
    text-align: center;
    gap: 20px;   /* PCの60pxは間延びするため、SPは20pxに */
    margin-inline: 16px;   /* カンプ通り、パネル自体をビューポート端から離す（＝外側の余白） */
  }
  .movieSection__text{
    flex: none;   /* PC用 flex-basis:350px が縦積み時に「高さ」として効き、ボタン下に無駄な余白ができるのを防ぎます */
  }
  .movieSection__media{
    flex: none;   /* PC用 flex-basis:480px が縦積み時に「高さ」として効き、16:9比率が崩れるのを防ぎます */
  }
  /* ABOUTセクションと同様、SPはボタンを列幅いっぱいに */
  .movieSection__text .btn{
    display: flex;
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================
   SECTION: SELVAで働く魅力  .workSection
   ----------------------------------------------------------
   見出し＋「福利厚生を見る」は .sectionHead を流用します（h2と同じ高さに揃います）。
   01/02/03の番号はHTMLに書かず、CSSカウンターで自動生成します
   （項目の増減・並べ替えに強く、番号の振り直しが要りません）。
   ========================================================== */
.workSection{
  padding-block: var(--space-sec);
  background: var(--c-bg-faint);
}
.workSection__inner{
  max-width: var(--wrap);
  margin-inline: auto;
}

.workSection__list{
  counter-reset: work;   /* リストの先頭でカウンターを0にリセット */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.workSection__item{
  counter-increment: work;   /* 項目ごとにカウンターを+1 */
  position: relative;
  padding: 32px 24px 24px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.workSection__item::before{
  content: counter(work, decimal-leading-zero);   /* "01" "02" "03" を自動生成 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--c-primary-s);
  color: var(--c-primary-d);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.4rem;
}
.workSection__itemTitle{
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--c-text);
}
.workSection__itemDesc{
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--c-muted);
}

@media (max-width: 900px){
  .workSection__list{
    grid-template-columns: 1fr;
  }
  .workSection__inner{
    padding-inline: 24px;
  }
}


/* ==========================================================
   SECTION: 社員インタビュー  .interviewSection
   ----------------------------------------------------------
   .newsSection と構造・CSSはほぼ同一（見出し＋[blog_parts]）ですが、
   中身の役割が異なる（ニュースではなくインタビュー）ため、
   クラス名は分けて命名しています。今後どちらかだけ見た目を変える
   可能性を考えても、最初から結合しない方が安全です。
   ========================================================== */
.interviewSection{
  padding-block: var(--space-sec);
}
.interviewSection__inner{
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}


/* ==========================================================
   SECTION: 募集職種  .positionsSection
   ----------------------------------------------------------
   見出しのみ（「見る」リンク無し）＋求人カード2列グリッドです。
   カード自体がリンクです（<a class="positionCard__link">）。
   ========================================================== */
.positionsSection{
  padding-block: var(--space-sec);
  background: var(--c-bg-faint);
}
.positionsSection__inner{
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
.positionsSection__title{
  margin-bottom: 32px;   /* .sectionHead流用時と同じ余白（リンクが無いのでflexは不要） */
}

.positionsSection__list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.positionCard__link{
  position: relative;   /* ::afterの絶対配置の基準 */
  display: block;
  padding: 24px 64px 24px 24px;   /* 右側は矢印の分だけ広めに確保 */
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: inherit;
  transition: border-color .2s;
}
.positionCard__link:hover{
  border-color: var(--c-primary);
}
.positionCard__link::after{
  content: "\203A";  /* › 他のボタン類と同じ手法・同じ文字で統一しています */
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);   /* 上下中央 */
  font-size: 2.5rem;
  line-height: 1;
  color: var(--c-primary);
}
.positionCard__title{
  margin: 0 0 8px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--c-text);
}
.positionCard__desc{
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--c-muted);
}

@media (max-width: 700px){
  .positionsSection__list{ grid-template-columns: 1fr; }
}


/* SECTION: 下部CTA帯  .ctaBand
   下層ページ末尾CTAと共用のため、定義は guide.css を参照。 */