/* ==========================================================================
   スター精機 コーポレートサイト / 会社概要ページ

   子テーマ lightning-child-star の css/ から読み込みます（2026-10-01 から。追加CSS欄には貼らない）。
   ページのタイトル・パンくず・見出しの共通形は、ほかの下層ページもこのファイルのものを使います。

   star-top.css と混ざらないよう、すべて .st-cmp の中（とタイトル・パンくず）だけに
   効くように限定してあります。
   ========================================================================== */


/* 写真（帯など）の指定は star-images.css にまとめています（2026-10-02）。写真台帳.md も参照 */


/* ---- 基本 ---------------------------------------------------------------- */
.st-cmp{
  --red: #e60012;
  --ink: #0d0d0d;
  --ink-soft: #4a4a4a;
  --line: #e2e2e2;
  --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-cmp *{ box-sizing: border-box; }
.st-cmp h1, .st-cmp h2, .st-cmp h3, .st-cmp p,
.st-cmp dl, .st-cmp dt, .st-cmp dd{
  margin: 0; padding: 0; border: 0; font-family: inherit;
}
.st-cmp a{ color: inherit; text-decoration: none; border: 0; }
.st-cmp a:hover, .st-cmp a:focus{ text-decoration: none; }
.st-cmp a::after, .st-cmp a::before{ content: none; }
.st-cmp img{ max-width: 100%; display: block; }
.st-cmp :focus-visible{ outline: 2px solid var(--red); outline-offset: 3px; }

/* WordPressが差し込む余計な要素でレイアウトが崩れないように */
.st-cmp .cmp-strength__grid > :not(.cmp-strength__item),
.st-cmp .cmp-links__grid > :not(.cmp-link),
.st-cmp .cmp-link > :not(span){ display: none !important; }

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

/* ページ上部の白い隙間を消す
   ※Lightningの見出し（.page-header）は隠しません。
     H1をLightningに任せて、それをそのまま帯としてデザインします。
     パンくずリストは帯の下に出します（下のほうで整えています）
   ※ここ（カスタムHTMLブロックの前後に入る空の段落・余白を消す指定）は固定ページだけ。
     ニュースの投稿は本文が普通の段落なので、効かせると文字が重なる（2026-10-13） */
body:has(.st-cmp) .entry-body > p{
  margin: 0 !important; padding: 0 !important; line-height: 0 !important;
}
body:has(.st-cmp) .entry-body > p:empty{ display: none !important; }
body:has(.st-cmp) .main-section,
body:has(.st-cmp) .entry,
body:has(.st-cmp) .entry-body{ padding-top: 0 !important; margin-top: 0 !important; }


/* ---- 見出しの共通形 -------------------------------------------------------
   英字（大）＋日本語（小）を中央に。ページのタイトルと同じ並び方です。
   2026-10-14：左寄せ・英字の左の赤い線をやめ、中央にそろえました（タイトルを中央にしたため）
   2026-10-14（v1.9.1）：英字の太さをタイトルと同じ細さ（400）に。太字（800）だとタイトルの細い英字と
     別の書体に見えたため（わただ）。英字は飾り、太字は日本語の見出し、という分け方。
     ※サイトで読み込んでいる Noto Sans JP は 400 と 700 だけ。500 を指定しても 400、800 は 700 で出ます
   -------------------------------------------------------------------------- */
.st-cmp .sec-en{
  display: block;
  text-align: center;
  font-size: clamp(25px, 2.8vw, 34px);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ink);
  margin-bottom: 10px;
}
.st-cmp .sec-jp{
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 34px;
}
/* 見出しのすぐ下の短い文（STAR PLAZA の「入口から奥へ…」、行動計画の前置きなど）も中央に。
   日本語が意味のまとまりで折り返し（auto-phrase）、行の長さがそろう（balance）ように。
   Edge・Chrome で効き、ほかのブラウザでは普通の折り返しになります */
.st-cmp .sec-jp + p{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  word-break: auto-phrase;
  text-wrap: balance;
}


/* ---- ページのタイトル（LightningのH1をそのまま使います） -----------------

   2026-10-14 作り直し（子テーマ v1.9.0）。
   それまでは「方眼の下地＋下半分に写真＋写真の上端で白黒が切り替わる巨大な英字＋
   写真のアニメーション＋赤い短い線」の帯だった。どのページを開いても毎回これが出て
   くどく見えたので（わただ）、白地に「大きな英字＋小さな日本語」を中央に置くだけにした。
   参考：恵比寿ガーデンプレイスのスケジュールのページ。差し色は使わない。
   比べた案と経緯は案件の CLAUDE.md、試した画面は 02_作業中/_帯/_タイトル比較を作る.py

   ★指定は、会社概要などの固定ページ（.st-cmp のあるページ）と、
     ニュースのページ（WordPress が body に付ける .blog／.archive／.single-post）の両方に効きます。
   ★大きい英字は、下の content: "COMPANY" を各ページの CSS で差し替えています（::before の1か所だけ）。
     日本語は固定ページのタイトル欄の文字がそのまま出ます（これが H1）。英字は飾りで、H1 には入りません
   ★英字の裏に、大分類の写真（star-images.css の --cmp-hero）を水墨のにじみのように薄く敷きます（v1.10.0）
   -------------------------------------------------------------------------- */
body:is(:has(.st-cmp), .blog, .archive, .single-post) .page-header{
  position: relative;
  height: auto;
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  /* タイトルの下に画面いっぱいの細い線を1本。ここまでがタイトル、という区切り（v1.9.1） */
  border-bottom: 1px solid #e6e8ea !important;
  background: #fff !important;
  overflow: hidden;
  isolation: isolate;
}
/* Lightning が帯に付ける飾り（::before）は使わない */
body:is(:has(.st-cmp), .blog, .archive, .single-post) .page-header::before{ content: none !important; }

/* 英字の裏の写真（水墨のにじみ・淡彩）。2026-10-16（v1.10.0）
   v1.9.1 の白地だけでは「やっぱり少し寂しい」（わただ）。帯をやめたときの「写真を戻さない」は
   帯いっぱいの写真のこと。ここは中央だけに薄く、縁を墨が紙に広がったような形で消す。
   比べた案は 02_作業中/_帯/_タイトルのにじみ比較を作る.py（A ふんわり／B 墨のにじみ（白黒）／C 淡彩 ← 採用）
   ・写真は star-images.css の --cmp-hero（大分類ごと。海外拠点だけ中国の拠点）
   ・写真の位置と大きさはページごとに --cmp-hero-pos／--cmp-hero-size で変えられる（文字が看板にかかるときなど。star-images.css）
   ・にじみの形はマスクの SVG（楕円を feTurbulence でゆがめてぼかしたもの）。濃さは opacity の1か所 */
body:is(:has(.st-cmp), .blog, .archive, .single-post) .page-header::after{
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--cmp-hero) var(--cmp-hero-pos, center 45%) / var(--cmp-hero-size, cover) no-repeat;
  filter: grayscale(.55) saturate(.8) contrast(1.1);
  opacity: .22;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.022' numOctaves='4' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='170' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E%3Cellipse cx='500' cy='205' rx='300' ry='125' filter='url%28%23f%29'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.022' numOctaves='4' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='170' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E%3Cellipse cx='500' cy='205' rx='300' ry='125' filter='url%28%23f%29'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* 中身（英字と日本語）を縦に並べて中央に。上下の余白はここで決めます
   2026-10-14（v1.9.1）：v1.9.0 は余白が大きく、大きい画面で日本語から本文まで 150px 空いて
   「人によっては寂しすぎる」（わただ）。上の余白を減らし、下の細い線までの余白に。
   比べた案は 02_作業中/_帯/_タイトルの余白比較を作る.py（A つめる／B グレーの面／C 細い線 ← 採用） */
body:is(:has(.st-cmp), .blog, .archive, .single-post) .page-header > *{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(1180px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
  padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 52px) !important;
  /* 文字は写真（::after）の上 */
  position: relative;
  z-index: 1;
}

/* 大きい英字。各ページの CSS で content を差し替えます */
body:is(:has(.st-cmp), .blog, .archive, .single-post) .page-header > *:first-child::before{
  content: "COMPANY";
  display: block;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  /* 長い英字（SUSTAINABILITY・PRIVACY POLICY）もスマホで1行に収まるよう、下限は 28px。
     上限は 60px（v1.9.0 の 76px から下げた。v1.9.1） */
  font-size: clamp(28px, 4.6vw, 60px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  color: #0d0d0d;
  white-space: nowrap;
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
/* 前の帯で使っていた2枚目の英字（白）は使わない */
body:is(:has(.st-cmp), .blog, .archive, .single-post) .page-header > *:first-child::after{ content: none !important; }

/* 日本語（H1）。英字の下に小さく */
body:is(:has(.st-cmp), .blog, .archive, .single-post) .page-header .page-header-title,
body:is(:has(.st-cmp), .blog, .archive, .single-post) .page-header h1{
  position: static;
  color: #3a3a3a !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(14px, 1.2vw, 16px) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: .14em;
  /* 字間の分だけ右に寄って見えるので、左にも同じだけ足して真ん中に */
  padding: 0 0 0 .14em !important;
  margin: 0 !important;
  border: 0 !important;
  text-align: center !important;
  text-shadow: none;
}
/* テーマがタイトルの前後に足す線や飾りは消す */
body:is(:has(.st-cmp), .blog, .archive, .single-post) .page-header .page-header-title::before,
body:is(:has(.st-cmp), .blog, .archive, .single-post) .page-header h1::before,
body:is(:has(.st-cmp), .blog, .archive, .single-post) .page-header .page-header-title::after,
body:is(:has(.st-cmp), .blog, .archive, .single-post) .page-header h1::after{ content: none !important; }

/* タイトルのすぐ下にできる白い余白を詰める */
body:is(:has(.st-cmp), .blog, .archive, .single-post) .site-body,
body:is(:has(.st-cmp), .blog, .archive, .single-post) .site-body-container{ padding-top: 0 !important; margin-top: 0 !important; }


/* ---- パンくずリスト（グローバルナビのすぐ下・左） ---------------------------

   Lightningが出すものをそのまま使い、見た目と置き場所だけ整えています。
   迷子防止のほか、検索結果にサイトの階層が出やすくなる効果もあります。

   2026-10-14：タイトルの下からグローバルナビのすぐ下へ（わただ。パーソルグループのサイトを参考）。
     タイトルから下は、そのページの中身だけにするため。
     Lightning はヘッダー・タイトル・パンくず・本文・フッターを body の直下に並べて出すので、
     body を縦の flex にして、order で「見た目の順番」だけを入れ替えています。
     HTML の順番（ヘッダー → タイトル → パンくず）は変わらないので、検索エンジンからの見え方は同じ。
     Tab キーで移動したときは HTML の順番どおり、タイトルの後にパンくずへ移ります
   -------------------------------------------------------------------------- */
body:is(:has(.st-cmp), .blog, .archive, .single-post){
  display: flex !important;
  flex-direction: column;
}
/* 読み上げ用の「本文へ移動」のリンクは、いつも一番前 */
body:is(:has(.st-cmp), .blog, .archive, .single-post) > .skip-link{ order: -3; }
body:is(:has(.st-cmp), .blog, .archive, .single-post) > .site-header{ order: -2; }
body:is(:has(.st-cmp), .blog, .archive, .single-post) > .breadcrumb{ order: -1; }

body:is(:has(.st-cmp), .blog, .archive, .single-post) .breadcrumb{
  display: block !important;
  background: #fff !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
}
body:is(:has(.st-cmp), .blog, .archive, .single-post) .breadcrumb > *{
  width: min(1180px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
  padding: 0 !important;
}
body:is(:has(.st-cmp), .blog, .archive, .single-post) .breadcrumb ol,
body:is(:has(.st-cmp), .blog, .archive, .single-post) .breadcrumb ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
body:is(:has(.st-cmp), .blog, .archive, .single-post) .breadcrumb li{
  list-style: none;
  font-size: 12.5px;
  line-height: 1.7;
  color: #8f8f8f;
}
body:is(:has(.st-cmp), .blog, .archive, .single-post) .breadcrumb a{
  color: #6f6f6f;
  transition: color .18s ease;
}
body:is(:has(.st-cmp), .blog, .archive, .single-post) .breadcrumb a:hover{ color: var(--red, #e60012); }
/* 最後の項目（いま見ているページ）は濃く */
body:is(:has(.st-cmp), .blog, .archive, .single-post) .breadcrumb li:last-child{ color: #0d0d0d; font-weight: 600; }

/* ---- トップメッセージ ----------------------------------------------------- */
.st-cmp .cmp-message{ padding: 54px 0 78px; background: #fff; }
.st-cmp .cmp-message__inner{
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 54px;
  align-items: start;
}
.st-cmp .cmp-message__photo{
  aspect-ratio: 4 / 5;
  background-image: var(--cmp-message), var(--ph-flat);
  background-size: cover;
  background-position: center 30%;
  background-color: #eceeed;
}
.st-cmp .cmp-message__title{
  font-size: clamp(23px, 2.6vw, 33px);
  font-weight: 900;
  line-height: 1.55;
  margin-bottom: 26px;
}
.st-cmp .cmp-message__body{
  font-size: 15.5px;
  line-height: 2.15;
  font-weight: 500;
  color: #2b2b2b;
}
.st-cmp .cmp-message__body + .cmp-message__body{ margin-top: 1.6em; }
.st-cmp .cmp-message__sign{
  margin-top: 34px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.st-cmp .cmp-message__sign strong{
  display: block;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .04em;
  margin-top: 4px;
}


/* ---- 強み ---------------------------------------------------------------- */
.st-cmp .cmp-strength{ padding: 74px 0 80px; background: #f6f7f7; }
.st-cmp .cmp-strength__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 24px;
}
.st-cmp .cmp-strength__item{ display: block; }
.st-cmp .cmp-strength__photo{
  display: block;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #e4e6e6;
  margin-bottom: 20px;
}
.st-cmp .cmp-strength__item:nth-child(1) .cmp-strength__photo{ background-image: var(--cmp-strength-1), var(--ph-flat); }
.st-cmp .cmp-strength__item:nth-child(2) .cmp-strength__photo{ background-image: var(--cmp-strength-2), var(--ph-flat); }
.st-cmp .cmp-strength__item:nth-child(3) .cmp-strength__photo{ background-image: var(--cmp-strength-3), var(--ph-flat); }

.st-cmp .cmp-strength__no{
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--red);
  margin-bottom: 8px;
}
.st-cmp .cmp-strength__ttl{
  display: block;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.55;
  margin-bottom: 10px;
}
.st-cmp .cmp-strength__txt{
  display: block;
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-soft);
  font-weight: 500;
}


/* ---- 会社データ ----------------------------------------------------------- */
.st-cmp .cmp-data{ padding: 78px 0 82px; background: #fff; }
/* 表は文字を左寄せのまま、幅 860px にして中央に（2026-10-14 わただ。
   見出しを中央にしたため。860px はお問い合わせ・プライバシーポリシーの本文と同じ幅） */
.st-cmp .cmp-data__list{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--line);
}
.st-cmp .cmp-data__row{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 19px 4px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.st-cmp .cmp-data__row dt{
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.8;
}
.st-cmp .cmp-data__row dd{
  font-size: 14.5px;
  line-height: 1.95;
  color: #2b2b2b;
  font-weight: 500;
}
.st-cmp .cmp-data__aside{
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  color: #8f8f8f;
}
.st-cmp .cmp-data__note{
  max-width: 860px;
  margin: 18px auto 0;
  font-size: 12.5px;
  color: #8f8f8f;
  line-height: 1.8;
}


/* ---- 下層ページへの導線 --------------------------------------------------- */
.st-cmp .cmp-links{ padding: 12px 0 90px; background: #fff; }
.st-cmp .cmp-links__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.st-cmp .cmp-link{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 22px;
  isolation: isolate;
}
.st-cmp .cmp-link, .st-cmp .cmp-link span{ color: #fff; }
.st-cmp .cmp-link::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
.st-cmp .cmp-link::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.20) 45%, rgba(0,0,0,.70) 100%);
}
.st-cmp .cmp-link:nth-child(1)::before{ background-image: var(--cmp-link-1), var(--ph-dark); }
.st-cmp .cmp-link:nth-child(2)::before{ background-image: var(--cmp-link-2), var(--ph-dark); }
.st-cmp .cmp-link:nth-child(3)::before{ background-image: var(--cmp-link-3), linear-gradient(150deg,#2a3a26,#121a10); }

.st-cmp .cmp-link__en{
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  font-weight: 700;
  opacity: .85;
  margin-bottom: 5px;
}
.st-cmp .cmp-link__jp{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
}
.st-cmp .cmp-link__ar{
  color: var(--red);
  font-size: 18px;
  transition: transform .25s ease;
}
.st-cmp .cmp-link:hover .cmp-link__ar{ transform: translateX(6px); }


/* ---- スマホ・タブレット --------------------------------------------------- */
@media (max-width: 1000px){
  .st-cmp .cmp-message__inner{ grid-template-columns: 1fr; gap: 32px; }
  .st-cmp .cmp-message__photo{ aspect-ratio: 3 / 2; background-position: center 25%; max-width: 460px; }
  .st-cmp .cmp-strength__grid{ grid-template-columns: repeat(2, 1fr); }
  .st-cmp .cmp-links__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px){
  .st-cmp .wrap{ width: calc(100% - 32px); }
  body:is(:has(.st-cmp), .blog, .archive, .single-post) .breadcrumb > *{ width: calc(100% - 32px); }
  body:is(:has(.st-cmp), .blog, .archive, .single-post) .breadcrumb{ padding-top: 12px !important; }
  body:is(:has(.st-cmp), .blog, .archive, .single-post) .page-header > *{ width: calc(100% - 32px); }
  .st-cmp .sec-jp{ margin-bottom: 26px; }
  .st-cmp .cmp-message{ padding: 56px 0 54px; }
  .st-cmp .cmp-strength{ padding: 52px 0 56px; }
  .st-cmp .cmp-strength__grid{ grid-template-columns: 1fr; gap: 34px; }
  .st-cmp .cmp-data{ padding: 54px 0 56px; }
  .st-cmp .cmp-data__row{ grid-template-columns: 1fr; gap: 4px; padding: 15px 2px; }
  .st-cmp .cmp-links__grid{ grid-template-columns: 1fr; }
  .st-cmp .cmp-links{ padding: 8px 0 64px; }
}

@media (prefers-reduced-motion: reduce){
  .st-cmp *{ transition-duration: .01ms !important; }
}