@charset "UTF-8";

/*
 * このアプリで書いた CSS。全ページで style.css の後に読む。
 *
 * ### なぜテーマの style.css を直さないのか
 * /assets 配下はクロールで取得したバイト列をそのまま保つ領域で、StaticAssetManifestTest が
 * SHA-256 の一致を見ている。直すと「取得したものの証明」が無くなるため、差分はこちら側に書く。
 * 名前空間を分けているのも同じ理由（/assets = 移植物、/app = 自前）。
 *
 * ### 何を書いてよいか
 * 1. 現行がインライン style で当てていたもの。CSP を style-src 'self' に締めてあるので
 *    HTML には書けない（緩めるのではなくここへ移す。SecurityConfig の KDoc を参照）。
 * 2. 移行に伴って class が付かなくなった箇所の当て直し。
 *    本文を Markdown で持つと allowlist が class 属性を落とすため、
 *    テーマ CSS が class を前提にしているセレクタは届かなくなる。
 *
 * セレクタは**テーマ側と同じ詳細度以上**にすること。style.css の後に読むだけでは、
 * 詳細度が低いと勝てない。
 */

/* ---------------------------------------------------------------------------
 * 全ページ
 * ------------------------------------------------------------------------ */

/*
 * ページ内リンクのスクロール。現行は common.js（jQuery）が a[href^="#"] を横取りして
 * animate していた。/recruit の #s1〜#s4 がこれに当たる。
 * jQuery を引き継がないので CSS に置き換える。
 *
 * 前庭障害などで動きが苦手な利用者のために、OS の「視差効果を減らす」設定は尊重する
 * （現行の JS 実装はこれを見ていなかった）。
 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---------------------------------------------------------------------------
 * 最適化画像への差し替え（PR 8a）
 *
 * テーマの style.css は CSS 背景 5 枚を url(img/…) で参照しており、その原本は
 * 5 枚で 4.05 MB ある（最大の bg_1.jpg は 3000x2000・1.6 MB で LCP に直撃する）。
 *
 * 原本を圧縮して差し替えられない。/assets はクロールで取得したバイト列そのものを
 * 保つ領域で、StaticAssetManifestTest が SHA-256 で守っているため。代わりに
 * tools/Optimize-Images.ps1 が /app/img/ へ最適化版を出し、ここで background-image
 * だけを上書きする。原本は url() から参照され続けるが、この上書きが後勝ちするので
 * ブラウザは取得しない（targets.json の disposition: optimized）。
 *
 * **background ショートハンドではなく background-image で上書きする。** ショートハンドで
 * 書くと同じ宣言にある no-repeat / center / background-color（.greeting .greet2 .img の
 * #fafafa）と、直後の行にある background-size まで初期値に戻る。
 *
 * セレクタはテーマ側と 1 文字も変えずに再掲している。詳細度を合わせるためで、
 * 差し替え元を grep で辿れるようにするためでもある。
 * ------------------------------------------------------------------------ */

/* style.css:960 — トップの .top_vision（cover） */
.top_vision {
  background-image: url("/app/img/bg_1-0f4c5f8a58e5c278094e994bd4d86731.jpg");
}

/* style.css:1960 — /company の代表挨拶（contain・背景色 #fafafa は残す） */
.greeting .greet2 .img {
  background-image: url("/app/img/company/ceo-c075d666392f141efffb748d67f1c6d5.jpg");
}

/* style.css:2096 — /company のミッション（cover） */
.mission {
  background-image: url("/app/img/company/mission-927a7d5a7e4a99e9d17fce128e7bddf6.jpg");
}

/*
 * style.css:2411 — /recruit の採用メッセージ（cover）。
 * .greeting.message は上の .greeting より詳細度が高いので、両方を上書きしないと
 * /recruit だけ原本の message_1.jpg のままになる。
 */
.greeting.message .greet2 .img {
  background-image: url("/app/img/recruit/message_1-21623b545b835d80e513a0fc9492c8eb.jpg");
}

/* style.css:2479 — /recruit のバリュー（cover・位置は center 80% のまま） */
.value .img {
  background-image: url("/app/img/recruit/value-c2f98b197e6bbcc696bfb32ff5f22266.jpg");
}

/* ---------------------------------------------------------------------------
 * トップ
 * ------------------------------------------------------------------------ */

/*
 * メインビジュアル。現行は slick が .mv_slider の内側に .slick-list を挿入し、
 * style.css の .toppage .mv_slider .slick-list が高さを制限していた。
 *
 * カルーセルを引き継がない（スライドは 1 枚しか無く、slick の初期化 4 本のうち 3 本は
 * 対象要素すら存在しなかった）ので、その .slick-list が生まれない。同じ制限を
 * .mv_slider 自身に当て直す。これが無いと縦長のビューポートで画像が画面高を超える。
 *
 * SP は現行が max-height: auto !important（auto は max-height に使えない無効値で、
 * 実際には効いていなかった）。意図は「制限しない」なので none と書く。
 */
.toppage .mv_slider {
  overflow: hidden;
  max-height: calc(100vh - 160px);
}

@media only screen and (max-width: 768px) {
  .toppage .mv_slider {
    max-height: none;
  }
}

/* ---------------------------------------------------------------------------
 * /company
 * ------------------------------------------------------------------------ */

/*
 * 地図。現行は <iframe ... style="border:0"> とインラインで当てていた。
 * style.css の .companyinfo .company_table table tr td iframe は width と margin しか持たず、
 * border を書いていないので、これが無いと UA 既定の inset ボーダーが出る。
 */
.companyinfo .company_table table tr td iframe {
  border: 0;
}

/* ---------------------------------------------------------------------------
 * /recruit
 * ------------------------------------------------------------------------ */

/*
 * 募集要項の表の見出し列。現行はページ内に <style> で
 * .application-requirements-table th{width:40%!important} と書かれていた
 * （テーマ由来のインラインはサイト全体でこれと /company の地図の 2 か所だけ）。
 * CSP の style-src は 'self' なので HTML には書けない。!important は
 * style.css 側に競合する width 指定が無いので付けない。
 */
.application-requirements-table th {
  width: 40%;
}

/* ---------------------------------------------------------------------------
 * /privacypolicy
 * ------------------------------------------------------------------------ */

/*
 * 本文中の箇条書き。現行は <ul class="dot"> で、style.css が section.privacy ul.dot を見ている。
 * 本文は page_section に Markdown で持つ＝サニタイザが class を落とすので、
 * その class は二度と付かない。class ではなく位置で同じ体裁を当て直す。
 */
section.privacy .inner ul {
  list-style-type: disc;
  margin-left: 20px;
}

/* ---------------------------------------------------------------------------
 * 問い合わせフォーム（/contact ＋ トップの CONTACT セクション）
 *
 * テーマ CSS が .mailform_area / .submit_area の体裁を持っている（style.css:1426-1620）。
 * ここに書くのはテーマに無いものと、下記の改名で引き取った分。
 *
 * ### wpcf7-* の改名（PR 8b）
 * Contact Form 7 は使っていないのにクラス名だけ残っていた。PR #23 で残したのは
 * 「テーマ CSS がその名前で体裁を持っており、改名すると複製することになる」ためだったが、
 * **実測するとその体裁は 23 行しかなかった**（style.css:1623-1646）。引き取って改名する。
 *
 *   .wpcf7-response-output            → .form_response
 *   .wpcf7-response-output.wpcf7-mail-sent-ok → .form_response.is_sent
 *   .wpcf7-response-output.wpcf7-display-none → .form_response.is_hidden
 *   .wpcf7-not-valid-tip              → .field_error
 *   .wpcf7-submit                     → 削除（CSS 定義が 1 行も無く、
 *                                       .submit_area input[type="submit"] で当たっていた）
 *
 * テーマの style.css には元の定義が残るが、touch しない（SHA-256 検証があるため）。
 * どこからも参照されないセレクタとして残るだけ。
 *
 * is_sent / is_hidden は .form_response と組み合わせてのみ使う状態クラス。
 * 単独で使わない（詳細度がそれを前提にしている）。
 * ------------------------------------------------------------------------ */

/* style.css:1629-1637 から引き取り。border-box はテーマにグローバル指定が無いので明示が要る */
.form_response {
  background: #fff4ce;
  padding: 10px 20px;
  box-sizing: border-box;
  margin-top: 20px;
  text-align: center;
  border: 2px solid #f4cb44;
}

/* style.css:1639-1642 から引き取り */
.form_response.is_sent {
  border: 2px solid #3761ac;
  background: #f1f6ff;
}

/* style.css:1644-1646 から引き取り */
.form_response.is_hidden {
  display: none;
}

/* style.css:1623-1627 から引き取り */
.field_error {
  color: #f70515;
  font-size: 11px;
  font-weight: bold;
}

/*
 * ハニーポットの行。人間に見せない欄なので隠すが、CSP の style-src が 'self' なので
 * HTML 側にインライン style を書けない（それが理由でここにある）。
 */
.mailform_area .hp_row {
  display: none;
}

/*
 * Turnstile のウィジェット。.submit_area は text-align:center だが、ウィジェットは
 * 固定幅のブロック要素なので inline-block にしないと中央に来ない。
 */
.submit_area .cf-turnstile {
  display: inline-block;
  margin-bottom: 16px;
}

/*
 * 送信中の見た目。テーマは disabled 状態を持たず、:hover の scale(1.05) が
 * 押せないボタンにもそのまま効いてしまう。
 */
.submit_area input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: default;
}

.submit_area input[type="submit"]:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* 欄別エラー。引き取った .field_error は色と字だけなので、配置はここで足す */
.mailform_area .field_error {
  display: block;
  margin-top: 4px;
}

/* 入力欄のエラー表示。テーマの border は 2px なので幅を変えずに色だけ替える */
.mailform_area input[aria-invalid="true"],
.mailform_area textarea[aria-invalid="true"] {
  border-color: #f70515;
}

/* --- Cookie 同意バナー（PR 4-6）-------------------------------------------
   画面下部に固定する。テーマ（style.css）に対応するクラスが無いので新規に書く。
   z-index はグローバルナビ（.gnav）より上。SP では縦積みにする。 */
.consent_banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  padding: 16px 24px;
  background: rgba(18, 40, 75, 0.97);
  color: #fff;
  font-size: 13px;
  line-height: 1.7;
}

.consent_banner[hidden] {
  display: none;
}

.consent_banner_text {
  max-width: 720px;
  margin: 0;
}

.consent_banner_links {
  margin: 0;
}

.consent_banner_links a {
  color: #fff;
  text-decoration: underline;
}

.consent_banner_actions {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
}

.consent_button {
  padding: 8px 20px;
  border: 1px solid #fff;
  border-radius: 2px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

.consent_button--accept {
  background: #fff;
  color: #12284b;
  font-weight: bold;
}

.consent_button--reject {
  background: transparent;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .consent_banner {
    justify-content: flex-start;
    padding: 12px 16px;
    font-size: 12px;
  }

  .consent_banner_actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* 地図の iframe をやめたので .company_map_link が入り口になる（PR 4-6）。
   住所テキストの直後に置くため、上の余白だけ確保する。 */
.company_map_link {
  display: inline-block;
  margin-top: 8px;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * ニュース詳細の本文（#113 の後・2026-10-07）
 *
 * テーマの style.css は article .content の h1 / h2 / p しか持たず、リンクとリストは
 * リセット（a は装飾なし、ul は list-style: none）のままになる。現行は記事ごとに本文の先頭へ
 * <style>（.pg-arclist）を埋め込んで補っていたが、Markdown へ移すとサニタイザが本文ごと捨てる
 * （migration/content/README.md）。その結果、**リンクが周りの文字と見分けられなくなっていた。**
 *
 * 値は現行の .pg-arclist から写す（migration/snapshot/posts/6509.html）。class は Markdown に
 * 持てないので、要素で当てる。セレクタはテーマ側（article .content h2 など）より詳細度を上げてある。
 * ------------------------------------------------------------------------ */
article.news .content a {
  color: #12284b;
  text-decoration: none;
  border-bottom: 1px solid rgba(18, 40, 75, 0.28);
}

article.news .content a:hover {
  border-bottom-color: #f2b705;
}

/* 区分のバッジは本文ではない。テーマの白抜きのまま残す */
article.news .content .info .cat a {
  color: #fff;
  border-bottom: none;
}

article.news .content h2 {
  border-left: 5px solid #f2b705;
  padding-left: 0.6em;
  line-height: 1.5;
  margin-bottom: 12px;
}

article.news .content ul {
  margin: 16px 0 0;
  padding: 0;
}

article.news .content li {
  border-bottom: 1px solid #e6e8ec;
  padding: 9px 2px;
  font-weight: bold;
  line-height: 1.55;
}

article.news .content li:first-child {
  border-top: 1px solid #e6e8ec;
}

/* p ~ h2 の 50px はテーマ側。ul を挟むと隣接兄弟が切れるので、ul の後の h2 / p にも当てる */
article.news .content ul ~ h2 {
  margin-top: 50px;
}

article.news .content ul + p {
  margin-top: 30px;
}