/* ==========================================================================
   スター精機 コーポレートサイト / トップページ
   このファイルの中身を全部コピーして
   「外観 > カスタマイズ > 追加CSS」に貼り付けてください
   （前に貼ったものは全部消してから）

   ★今回の変更点
     ニュース欄を、いただいたイメージの形にしました。
       ・日付 / カテゴリーの色ラベル / タイトル を横一列に
       ・上にタブ（すべて・企業情報・製品情報・展示会）
       ・新しい記事には NEW バッジ

     カテゴリーの色ラベルは、WordPressが各行に自動で付ける
     「category-company」などの目印を読んで表示しています。
     ブロックを足す必要はありません。
   ========================================================================== */


/* ==========================================================================
   ▼▼▼ 写真の暗さなどの調整（ここだけ触ればOK） ▼▼▼

   写真そのもの（スライド・カード・採用）の指定は star-images.css にまとめています
   （2026-10-02）。写真台帳.md も参照。
   ========================================================================== */
.st-top{
  /* 採用セクションの写真を暗くする濃さ。
     小さくすると明るく、大きくすると暗くなります（0.05きざみで調整）
     いまは「未来へ」の明るさを活かして、かなり薄めにしてあります */
  --recruit-scrim: 0.50;

  /* 背景を暗くする濃さ。白文字が読みにくいときは数字を上げる。
     0 = まったく暗くしない  /  1 = 真っ黒  （0.05 きざみで調整） */
  --scrim: 0.32;

  /* Lightningのヘッダーが画面上部に固定される設定なら、その高さを入れる。
     固定でない（スクロールで消える）なら 0px のままでOK。 */
  --fixed-header-h: 0px;
}
/* ▲▲▲ 調整はここまで ▲▲▲ */


/* ==========================================================================
   フッターの調整（サイト全体に効きます）
   ========================================================================== */

/* フッター上部の赤い線を消す
   （Lightning の .site-footer { border-top } による装飾） */
.site-footer{
  border-top: 0 !important;
}

/* テーマのクレジット表記「Powered by WordPress & Lightning Theme」を隠す */
.site-footer-copyright p:last-child,
.site-footer .copyright + p,
.site-footer-copyright__powered{
  display: none !important;
}

/* フッターメニューを画面の中央に揃える
   （コピーライトの行と中心を合わせます） */
.site-footer .footer-nav-list,
.site-footer .footer-nav .menu{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* スマホでは横一列だと文字が詰まって読めないので、縦積みにする。
   1項目ずつ区切り線を引いて、指で押しやすい高さを確保しています */
@media (max-width: 767px){
  .site-footer .footer-nav-list,
  .site-footer .footer-nav .menu{
    display: block !important;
    width: min(420px, calc(100% - 32px));
    border-top: 1px solid rgba(255,255,255,.18);
  }
  .site-footer .footer-nav-list > li,
  .site-footer .footer-nav .menu > li{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.18);
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .site-footer .footer-nav-list > li::before,
  .site-footer .footer-nav-list > li::after,
  .site-footer .footer-nav .menu > li::before,
  .site-footer .footer-nav .menu > li::after{
    content: none !important;
  }
  .site-footer .footer-nav-list > li > a,
  .site-footer .footer-nav .menu > li > a{
    display: block !important;
    padding: 15px 4px !important;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
  }
}


/* ==========================================================================
   ヘッダー（トップページだけ）

   ・画面の一番上に固定。スクロールしても追従します
   ・基本の姿は「白背景・黒文字」
   ・ファーストビューの上にいる間だけ「透明・白文字」に変わります

   色の変化はCSSのスクロール連動機能を使っています。
   この機能に対応していないブラウザでは、最初から白背景・黒文字の
   追従メニューとして表示されます（壊れません）
   ========================================================================== */
body:has(.st-top) #site-header{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: #fff;
  border: 0 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

/* 管理バーが出ているとき（ログイン中）はその下に */
body.admin-bar:has(.st-top) #site-header{ top: 32px; }

/* ロゴには色も透明度も一切かけない（赤いまま常に表示）

   Lightning はスクロールすると body に header_scrolled が付き、
   .header_scrolled .site-header-logo { display: none } でロゴを隠します。
   トップページではそれを打ち消して、ロゴを出しっぱなしにします */
body:has(.st-top).header_scrolled .site-header-logo,
body:has(.st-top) #site-header .site-header-logo{
  display: block !important;
}
body:has(.st-top) #site-header .site-header-logo,
body:has(.st-top) #site-header .site-header-logo *,
body:has(.st-top) #site-header .site-header-logo img{
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  animation: none !important;
  mix-blend-mode: normal !important;
}
body:has(.st-top) #site-header .site-header-logo img{
  display: block !important;
}

/* ==========================================================================
   ロゴを全ページで出しっぱなしにする

   Lightning はスクロールすると body に header_scrolled が付き、
   .header_scrolled .site-header-logo { display: none } でロゴを隠します。
   ヘッダーを小さくするための仕様ですが、スクロール中に
   どのサイトを見ているのか分からなくなるため、打ち消しています。

   ★ここはトップページに限らず、サイト全体に効きます。
     上のトップページ用の指定（透明ヘッダーの打ち消しを兼ねる）とは
     役割が違うので、両方残してあります。
   ========================================================================== */
body.header_scrolled .site-header-logo,
body.header_scrolled .site-header-logo img{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* スクロール時に Lightning が本文へ足す 64px の余白を打ち消す
   （ヘッダーを固定にしているので不要です） */
body:has(.st-top) .site-body{
  margin-top: 0 !important;
}

body:has(.st-top) #site-header .global-nav-list > li > a,
body:has(.st-top) #site-header .global-nav-list > li > a *{
  color: #0d0d0d;
}
body:has(.st-top) #site-header .global-nav-list > li > a:hover{ opacity: .72; }

/* ドロップダウンの中は赤地に白文字のまま */
body:has(.st-top) #site-header .global-nav-list ul a,
body:has(.st-top) #site-header .global-nav-list ul a *{
  color: #fff !important;
}

@supports (animation-timeline: scroll()){
  body:has(.st-top) #site-header{
    animation-name: st-header-bg;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-timeline: scroll(root block);
    animation-range: 0 200vh;
  }
  body:has(.st-top) #site-header .global-nav-list > li > a,
  body:has(.st-top) #site-header .global-nav-list > li > a *{
    animation-name: st-header-text;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-timeline: scroll(root block);
    animation-range: 0 200vh;
  }
}

/* 0〜75% はファーストビューとことづくりの世界。ここは透明のまま。
   75〜95% で白に切り替わります */
@keyframes st-header-bg{
  0%, 75%  { background-color: rgba(255,255,255,0); box-shadow: none; }
  95%, 100%{ background-color: rgba(255,255,255,1); box-shadow: 0 1px 0 rgba(0,0,0,.08); }
}
@keyframes st-header-text{
  0%, 75%  { color: #fff; }
  95%, 100%{ color: #0d0d0d; }
}

body:has(.st-top) .site-body{
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   ファーストビュー直前の白い余白を消す
   （検証で確認した Lightning の実際の構造に合わせています）
   ========================================================================== */
body:has(.st-top) .site-body,
body:has(.st-top) .site-body-container,
body:has(.st-top) .main-section,
body:has(.st-top) .entry,
body:has(.st-top) .entry-body{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 本文の一番上にある空の要素（テーマが入れる見出し枠など）を消す */
body:has(.st-top) .page-header,
body:has(.st-top) .breadcrumb{
  display: none !important;
}

/* WordPressがコメント文や改行を <p> で包んでしまうことによる隙間を潰す。
   .st-top の前後にできる空の段落が余白の正体です */
body:has(.st-top) .entry-body > p{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
body:has(.st-top) .entry-body > p:empty{
  display: none !important;
}


/* ==========================================================================
   背景を画面に貼り付けたままにするための解除指定
   （Lightning側の overflow:hidden が効いていると背景が途中で切れます）
   ========================================================================== */
html{ overflow-x: clip; }

body:has(.st-top),
:where(div, main, section, article):has(.st-top){
  overflow: visible !important;
}


/* ---- 色・書体の基本設定 -------------------------------------------------- */
.st-top{
  --red: #e60012;
  --ink: #0d0d0d;
  --ink-soft: #4a4a4a;
  --line: #e2e2e2;
  --paper: #ffffff;
  --ph-flat: linear-gradient(160deg, #dfe1e0 0%, #c8ccca 100%);
  --ph-dark: linear-gradient(150deg, #2b3238 0%, #14181c 55%, #0a0d10 100%);

  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  color: var(--ink);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* テーマ側の余白・線・文字色を、このブロックの中だけ打ち消す */
.st-top *{ box-sizing: border-box; }
.st-top h1, .st-top h2, .st-top h3, .st-top p{
  margin: 0; padding: 0; border: 0; font-family: inherit;
}
.st-top a{ color: inherit; text-decoration: none; border: 0; }
.st-top a:hover, .st-top a:focus{ text-decoration: none; }
.st-top a::after, .st-top a::before{ content: none; }
.st-top button{ font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.st-top img{ max-width: 100%; display: block; }
.st-top :focus-visible{ outline: 2px solid var(--red); outline-offset: 3px; }

/* WordPressが勝手に差し込む空の要素を無視する（レイアウト崩れ防止）
   ※ニュース欄はクエリーループを使うので、ここでは触りません */
.st-top .stage > :not(.stage__bg):not(.screen),
.st-top .cards__grid > :not(.card),
.st-top .products__grid > :not(.prod),
.st-top .news__row > :not(span),
.st-top .card > :not(span),
.st-top .prod > :not(span):not(img){ display: none !important; }

/* Lightningの本文枠を突き破って、画面いっぱいに広げる */
.st-top .bleed{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.st-top .wrap{
  width: min(1180px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}


/* ---- ステージ（ファーストビュー＋ことづくり／背景を連続させる） ----------- */
.st-top .stage{ position: relative; background: #000; }

/* 背景は画面より 520px ぶん背を高くしてある。
   最後に背景が送られるとき、下から黒い帯が出ないようにするため。 */
.st-top .stage__bg{
  position: sticky;
  top: var(--fixed-header-h);
  height: calc(100vh - var(--fixed-header-h) + 520px);
  margin-bottom: calc((100vh - var(--fixed-header-h) + 520px) * -1);
  overflow: hidden !important;
  z-index: 0;
}
.st-top .slide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0a0d10;
  opacity: 0;
  /* 6枚 × 8秒 = 48秒でひと回り */
  animation: st-slideshow 48s infinite;
}
.st-top .slide:nth-child(1){ background-image: var(--img-hero-1), var(--ph-dark); animation-delay:  0s; }
.st-top .slide:nth-child(2){ background-image: var(--img-hero-2), var(--ph-dark); animation-delay:  8s; }
.st-top .slide:nth-child(3){ background-image: var(--img-hero-3), var(--ph-dark); animation-delay: 16s; }
.st-top .slide:nth-child(4){ background-image: var(--img-hero-4), var(--ph-dark); animation-delay: 24s; }
.st-top .slide:nth-child(5){ background-image: var(--img-hero-5), var(--ph-dark); animation-delay: 32s; }
.st-top .slide:nth-child(6){ background-image: var(--img-hero-6), var(--ph-dark); animation-delay: 40s; }

/* 1枚あたり約8秒。前後1.6秒ずつを重ねてクロスフェードさせています */
@keyframes st-slideshow{
  0%     { opacity: 0; transform: scale(1.00); }
  3.33%  { opacity: 1; }
  16.67% { opacity: 1; }
  20%    { opacity: 0; transform: scale(1.08); }
  100%   { opacity: 0; transform: scale(1.08); }
}

.st-top .stage__scrim{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,calc(var(--scrim) * 1.15)) 0%,
      rgba(0,0,0,calc(var(--scrim) * 0.35)) 40%,
      rgba(0,0,0,calc(var(--scrim) * 0.80)) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,calc(var(--scrim) * 1.30)) 0%,
      rgba(0,0,0,calc(var(--scrim) * 0.20)) 55%,
      rgba(0,0,0,calc(var(--scrim) * 0.65)) 100%);
}

.st-top .screen{
  position: relative;
  z-index: 2;
  min-height: calc(100vh - var(--fixed-header-h));
  display: flex;
  align-items: center;
}
/* 白文字は要素ごとに指定する（テーマの文字色指定に負けないように） */
.st-top .screen,
.st-top .screen h1,
.st-top .screen h2,
.st-top .screen p,
.st-top .screen a,
.st-top .screen span,
.st-top .screen div{ color: #fff; }

.st-top .hero__inner,
.st-top .story__inner{
  width: min(1180px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.st-top .hero__inner{ padding: 80px 0; }
.st-top .story__inner{ padding: 100px 0 120px; }

.st-top .hero__eyebrow{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .16em;
  font-weight: 500;
  margin-bottom: 26px;
}
/* 左の赤い短い線はやめた（2026-10-16 わただ、v1.11.0）。下層ページの見出しで 10/14 にやめたのにそろえる。
   英字は太字のまま（トップは印象づけの場所なので強く）。比べた案は 02_作業中/_帯/_トップの見出し比較を作る.py */
.st-top .hero__eyebrow::before{ content: none; }
.st-top .hero__title{
  font-size: clamp(38px, 5.4vw, 72px);
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: .01em;
  margin-bottom: 26px;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.st-top .hero__lead{
  font-size: 16px;
  line-height: 2;
  font-weight: 500;
  max-width: 30em;
}
.st-top .hero__side{
  position: absolute;
  top: 60px; right: 44px;
  writing-mode: vertical-rl;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 2.1;
  text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
/* SCROLL はタグラインと同じ列に。赤い線はその真上に縦一列で積む
   位置の調整は right（大きくすると左へ）と bottom（小さくすると下へ）で */
.st-top .scroll-cue{
  position: absolute;
  right: 52px; bottom: -18px;
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: .3em;
  display: block;
  padding-top: 60px;
}
.st-top .scroll-cue::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 48px;
  background: var(--red);
}

.st-top .story__title{
  font-size: clamp(27px, 3.6vw, 46px);
  font-weight: 900;
  line-height: 1.45;
  margin-bottom: 28px;
  text-shadow: 0 2px 22px rgba(0,0,0,.4);
}
.st-top .story__body{
  font-size: 15.5px;
  line-height: 2.15;
  max-width: 34em;
  margin-bottom: 40px;
  font-weight: 500;
}
.st-top .story__keywords{
  position: absolute;
  right: 0; bottom: 130px;
  font-size: 12px;
  letter-spacing: .18em;
  line-height: 2.3;
  font-weight: 500;
}

.st-top .btn-line{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-width: 250px;
  padding: 17px 24px;
  border: 1px solid rgba(255,255,255,.85);
  font-size: 14px;
  font-weight: 700;
  transition: background .22s ease, color .22s ease;
}
.st-top .btn-line:hover{ background: #fff; }
.st-top .screen .btn-line:hover,
.st-top .recruit .btn-line:hover{ color: var(--ink); }
.st-top .screen .btn-line .ar,
.st-top .recruit .btn-line .ar{ color: var(--red); font-size: 16px; }


/* ---- 訴求カード4枚 -------------------------------------------------------- */
/* ここから白い世界。背景写真はここで終わる */
.st-top .cards{
  position: relative;
  z-index: 1;
  background-color: #fff;
  padding: 58px 0 74px;
}
.st-top .cards__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.st-top .card{
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  isolation: isolate;
}
.st-top .card, .st-top .card span{ color: #fff; }
.st-top .card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
.st-top .card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(175deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.55) 100%);
}
.st-top .card:nth-child(1)::before{ background-image: var(--img-card-1), var(--ph-dark); }
.st-top .card:nth-child(2)::before{ background-image: var(--img-card-2), var(--ph-dark); }
.st-top .card:nth-child(3)::before{ background-image: var(--img-card-3), var(--ph-dark); }
.st-top .card:nth-child(4)::before{ background-image: var(--img-card-4), linear-gradient(150deg,#2a3a26,#121a10); }

.st-top .card__head{
  display: block;
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 800;
  line-height: 1.25;
}
.st-top .card__head .n{ font-size: 1.45em; }
.st-top .card__desc{
  display: block;
  font-size: 12.5px;
  line-height: 1.65;
  margin-top: 9px;
  font-weight: 500;
}
.st-top .card__arrow{
  margin-top: auto;
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex: none;
  transition: background .22s ease, color .22s ease;
}
.st-top .card:hover .card__arrow{ background: #fff; color: var(--ink); }


/* ---- セクション見出し ---------------------------------------------------- */
.st-top .sec-head{
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin-bottom: 26px;
}
.st-top .sec-head__en{
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: clamp(25px, 2.8vw, 34px);
  font-weight: 800;
  color: var(--ink);
}
/* 左の赤い短い線はやめた（2026-10-16 わただ、v1.11.0）。下層ページの見出しで 10/14 にやめたのにそろえる。
   英字は太字のまま（トップは印象づけの場所なので強く）。比べた案は 02_作業中/_帯/_トップの見出し比較を作る.py */
.st-top .sec-head__en::before{ content: none; }
.st-top .sec-head__jp{ font-size: 13.5px; color: var(--ink-soft); font-weight: 500; }
.st-top .sec-head__more{
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.st-top .sec-head__more .ar{ color: var(--red); }
.st-top .sec-head__more:hover{ color: var(--red); }


/* ---- 製品 ---------------------------------------------------------------- */
.st-top .products{
  position: relative;
  z-index: 1;
  padding: 26px 0 70px;
  background-color: #fff;
}
.st-top .products__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px 22px;
}
.st-top .prod{ display: block; }
/* 製品写真。写真そのものは news-A-before.html の <img> にあります */
.st-top .prod__thumb{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background-color: #eceeed;
}

.st-top .prod__foot{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  padding: 15px 2px 0;
}
.st-top .prod__txt{ display: block; }
.st-top .prod__jp{ display: block; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.st-top .prod__en{ display: block; font-size: 11px; letter-spacing: .1em; color: #9a9a9a; font-weight: 500; }
.st-top .prod__ar{
  color: var(--red);
  font-size: 17px;
  line-height: 24px;
  transition: transform .25s ease;
}
.st-top .prod:hover .prod__ar{ transform: translateX(6px); }


/* ==========================================================================
   ニュース
   ========================================================================== */
.st-top .news{
  position: relative;
  z-index: 1;
  padding: 20px 0 84px;
  background-color: #fff;
}
.st-top .news__layout{
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 30px;
  align-items: start;
}

/* ---- タブの並び ---------------------------------------------------------- */
.st-top .news__tabs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 26px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 11px;
  margin-bottom: 6px;
}
/* タブはJSが動く環境でだけ表示する。
   JSが無効でも、ニュースは全件そのまま読める状態になります */
.st-top .news__tabs .tab{ display: none; }
.st-top .news__tabs[data-ready="1"] .tab{ display: inline-block; }

.st-top .tab{
  font-size: 13px;
  font-weight: 600;
  color: #9a9a9a;
  padding: 4px 0;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .2s ease;
}
.st-top .tab:hover{ color: var(--ink); }
.st-top .tab[aria-selected="true"]{ color: var(--red); }
.st-top .tab[aria-selected="true"]::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -12px;
  height: 2px;
  background: var(--red);
}
.st-top .news__more{
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.st-top .news__more .ar{ color: var(--red); }


/* ---- 投稿一覧（クエリーループブロック） ----------------------------------
   WordPressが出す入れ子（カラムなど）は display:contents で透明にして、
   日付・カテゴリー・タイトルを1行のグリッドに並べ直しています。
   -------------------------------------------------------------------------- */

/* 空の段落だけ消す（本体は残す） */
.st-top .news__list > p:empty{ display: none !important; }

.st-top .news__list .wp-block-query,
.st-top .news__list .wp-block-post-template{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 入れ子の箱を無かったことにして、中身を行のグリッドに参加させる */
.st-top .news__list .wp-block-columns,
.st-top .news__list .wp-block-column,
.st-top .news__list .wp-block-group{
  display: contents;
}

/* パターンに含まれる区切り線・ページ送り・アイキャッチは使いません */
.st-top .news__list .wp-block-separator,
.st-top .news__list .wp-block-query-pagination,
.st-top .news__list .wp-block-post-featured-image{
  display: none !important;
}

/* 1件ぶんの行 */
.st-top .news__list .wp-block-post-template > li{
  display: grid;
  grid-template-columns: 104px 92px 1fr;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 14px 4px;
  border-bottom: 1px solid #efefef;
  list-style: none;
  border-top: 0;
}
.st-top .news__list .wp-block-post-template > li::marker{ content: none; }
.st-top .news__list .wp-block-post-template > li[hidden]{ display: none !important; }

/* 日付
   grid-row: 1 を必ず付けます。これが無いと1件が3行に分かれて縦に積まれます */
.st-top .news__list .wp-block-post-date{
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #6f6f6f;
  white-space: nowrap;
  line-height: 1.6 !important;
  letter-spacing: 0;
}
.st-top .news__list .wp-block-post-date a,
.st-top .news__list .wp-block-post-date time{
  color: #6f6f6f;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* このパターンは日付ブロックが2つ入っています（「09.10」と「2026」）。
   2つめはJSで印を付けて隠しています */
.st-top .news__list .wp-block-post-date[data-extra="1"]{ display: none !important; }

/* カテゴリーの色ラベル
   WordPressが各行に付ける category-〇〇 を読んで文字と色を出しています。
   カテゴリーを増やすときは、この形をコピーして1組足してください */
.st-top .news__list .wp-block-post-template > li::before{
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  padding: 4px 0;
  line-height: 1.4;
  white-space: nowrap;
}
.st-top .news__list .wp-block-post-template > li.category-company::before{
  content: "企業情報"; background: #eef0f2; color: #4a5560;
}
.st-top .news__list .wp-block-post-template > li.category-product::before{
  content: "製品情報"; background: #e6f1e6; color: #2f6b34;
}
.st-top .news__list .wp-block-post-template > li.category-event::before{
  content: "展示会"; background: #fdeee0; color: #9a5410;
}

/* タイトル */
/* タイトル
   パターン側が文字サイズを要素に直接書き込んでいるので、
   !important でこちらの指定を優先させています */
.st-top .news__list .wp-block-post-title{
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  padding: 0;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  color: var(--ink);
  letter-spacing: 0;
  text-align: left;
}
.st-top .news__list .wp-block-post-title a{
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
.st-top .news__list .wp-block-post-title a{
  color: var(--ink);
  transition: color .18s ease;
}
.st-top .news__list .wp-block-post-template > li:hover .wp-block-post-title a{
  color: var(--red);
}

/* NEWバッジ（30日以内の記事に自動で付きます） */
.st-top .news__list .wp-block-post-template > li[data-new="1"] .wp-block-post-title::after{
  content: "NEW";
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 2px 8px;
  margin-left: 12px;
  vertical-align: 1px;
  line-height: 1.5;
}

/* 投稿が1本もないときの表示 */
.st-top .news__list .wp-block-query-no-results{
  font-size: 14px;
  color: #a5a5a5;
  padding: 18px 4px;
}

/* 手書きの行を使う場合の指定（いまは未使用・将来用に残しています） */
.st-top .news__row{
  display: grid;
  grid-template-columns: 104px 92px 1fr;
  align-items: center;
  gap: 20px;
  padding: 16px 4px;
  border-bottom: 1px solid #efefef;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.st-top .news__row:hover .news__ttl{ color: var(--red); }
.st-top .news__date{ color: #a5a5a5; font-size: 13px; }
.st-top .news__cat{
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 4px 0;
  line-height: 1.4;
}
.st-top .news__cat[data-cat="company"]{ background: #eef0f2; color: #4a5560; }
.st-top .news__cat[data-cat="product"]{ background: #e6f1e6; color: #2f6b34; }
.st-top .news__cat[data-cat="event"]{   background: #fdeee0; color: #9a5410; }
.st-top .news__ttl{ transition: color .18s ease; }
.st-top .badge-new{
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 2px 8px;
  margin-left: 12px;
  vertical-align: 1px;
}
.st-top .news__row[hidden]{ display: none !important; }


/* ---- 採用 ---------------------------------------------------------------- */
.st-top .recruit{
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding: 110px 0 120px;
}
.st-top .recruit,
.st-top .recruit h2,
.st-top .recruit p,
.st-top .recruit a,
.st-top .recruit span{ color: #fff; }
.st-top .recruit::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--img-recruit), var(--ph-dark);
  background-size: cover;
  background-position: center 22%;
}
/* 文字がある左側だけをほどよく落として、右側の表情は明るいまま残す */
.st-top .recruit::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(0,0,0,calc(var(--recruit-scrim) * 1.30)) 0%,
    rgba(0,0,0,calc(var(--recruit-scrim) * 0.70)) 42%,
    rgba(0,0,0,calc(var(--recruit-scrim) * 0.18)) 72%,
    rgba(0,0,0,calc(var(--recruit-scrim) * 0.30)) 100%);
}
.st-top .recruit__inner{ position: relative; }
.st-top .recruit__en{
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: clamp(23px, 2.6vw, 31px);
  font-weight: 800;
  margin-bottom: 14px;
}
/* 左の赤い短い線はやめた（2026-10-16 わただ、v1.11.0）。下層ページの見出しで 10/14 にやめたのにそろえる。
   英字は太字のまま（トップは印象づけの場所なので強く）。比べた案は 02_作業中/_帯/_トップの見出し比較を作る.py */
.st-top .recruit__en::before{ content: none; }
.st-top .recruit__title{
  font-size: clamp(29px, 3.8vw, 50px);
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 18px;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.st-top .recruit__en,
.st-top .recruit__keywords{ text-shadow: 0 2px 16px rgba(0,0,0,.45); }
.st-top .recruit__lead{
  font-size: 15px;
  line-height: 2;
  margin-bottom: 36px;
  max-width: 32em;
  font-weight: 500;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.st-top .recruit__keywords{
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  letter-spacing: .18em;
  line-height: 2.3;
  font-weight: 500;
}


/* ---- スマホ・タブレット -------------------------------------------------- */
@media (max-width: 1000px){
  .st-top .cards__grid{ grid-template-columns: repeat(2, 1fr); }
  .st-top .products__grid{ grid-template-columns: repeat(2, 1fr); }
  .st-top .news__layout{ grid-template-columns: 1fr; gap: 14px; }
  .st-top .hero__side,
  .st-top .story__keywords,
  .st-top .recruit__keywords,
  .st-top .scroll-cue{ display: none; }
}

/* スマホでは製品を横スワイプに。指で送ると1枚ずつ気持ちよく止まります（JSなし） */
@media (max-width: 700px){
  .st-top .products__grid{
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    padding-bottom: 14px;
    -webkit-overflow-scrolling: touch;
  }
  .st-top .prod{
    flex: 0 0 68%;
    scroll-snap-align: start;
  }
  .st-top .products__grid::-webkit-scrollbar{ height: 4px; }
  .st-top .products__grid::-webkit-scrollbar-thumb{ background: #d8d8d8; }
}

@media (max-width: 620px){
  .st-top .wrap{ width: calc(100% - 32px); }
  .st-top .cards__grid{ grid-template-columns: 1fr; }
  .st-top .sec-head{ flex-wrap: wrap; gap: 10px 16px; }
  .st-top .news__tabs{ gap: 4px 18px; }

  /* 採用セクションはスマホ用の縦向き写真に差し替え */
  .st-top .recruit::before{
    background-image: var(--img-recruit-sp), var(--ph-dark);
    background-position: center;
  }
  /* 縦向きなので幕も上から下へ。
     人の顔が沈まないよう、パソコン版よりかなり薄くしています。
     暗くしたいときは 0.30 の数字を大きくしてください（0.05きざみ） */
  .st-top .recruit::after{
    background: linear-gradient(180deg,
      rgba(0,0,0,calc(0.30 * 1.15)) 0%,
      rgba(0,0,0,calc(0.30 * 0.90)) 40%,
      rgba(0,0,0,calc(0.30 * 0.45)) 72%,
      rgba(0,0,0,calc(0.30 * 0.20)) 100%);
  }
  /* そのぶん文字に影を足して、薄い幕でも読めるようにする */
  .st-top .recruit__title{ text-shadow: 0 2px 20px rgba(0,0,0,.75); }
  .st-top .recruit__lead,
  .st-top .recruit__en{ text-shadow: 0 2px 14px rgba(0,0,0,.8); }

  /* ニュースは 日付＋ラベル を上段、タイトルを下段に */
  .st-top .news__list .wp-block-post-template > li{
    grid-template-columns: 82px 1fr;
    row-gap: 6px;
    column-gap: 14px;
  }
  .st-top .news__list .wp-block-post-date{ grid-column: 1; grid-row: 1; }
  .st-top .news__list .wp-block-post-template > li::before{
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    padding: 3px 12px;
  }
  .st-top .news__list .wp-block-post-title{ grid-column: 1 / -1; grid-row: 2; }

  .st-top .news__row{ grid-template-columns: 82px 1fr; row-gap: 6px; }
  .st-top .news__date{ grid-column: 1; }
  .st-top .news__cat{ grid-column: 2; justify-self: start; padding: 3px 12px; }
  .st-top .news__ttl{ grid-column: 1 / -1; }
}

/* 動きを減らす設定の人には、スライドを止めて1枚だけ出す */
@media (prefers-reduced-motion: reduce){
  .st-top .slide{ animation: none; opacity: 0; }
  .st-top .slide:nth-child(1){ opacity: 1; }
  .st-top *{ transition-duration: .01ms !important; }
}