@charset "UTF-8";
/* =============================================================
   公開ページ共通のレイアウト/一覧/詳細/本文まわり
   ※ tailwind.css の preflight と管理画面CSS(mase_fuc_get_css)より後に読み込むこと。
     読み込みは partial/_head_tailwind.html.twig。
   ============================================================= */
/* --- アクセシビリティ: 色合い(高コントラスト=色反転) モック準拠 --- */
html.high-contrast { filter: invert(1) hue-rotate(180deg); }
/* 画像・ロゴは二重反転で元の色味に戻す */
html.high-contrast img { filter: invert(1) hue-rotate(180deg); }
/* ただしヘッダーのロゴだけは二重反転を解除し、ページと一緒に反転させる。
   ロゴ内「WORK PALETTE」の暗い文字が反転後の暗い背景と同化して見えなくなるため、
   反転して明色にし、他のヘッダー項目(反転で明色)と同じ視認性に揃える。 */
html.high-contrast .t-siteHeader.wp-header img { filter: none; }

/* --- お問い合わせ(_inquiry): モック準拠でヒーロー等を画面幅フルブリードに ---
   MASEグリッドは本文を _f._container の中央限定幅カラムに収めるため、
   _inquiry 限定で _f の幅・パディング制約を解除し、
   .wp-fullbleed をビューポート幅いっぱいに引き伸ばす */
._z._inquiry ._f {
    padding: 0;
    max-width: none;
}
.wp-fullbleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}
/* --- 横スクロール抑止(モックには出ない・ローカル/実機のみ出る現象の修正) ---
   .wp-fullbleed 等の width:100vw は、実ブラウザで縦スクロールバーが出ている時に
   その幅(≒15px)ぶんビューポートを超え、微小な横スクロールを生む(モックはMASEグリッド
   不使用で 100vw フルブリード自体が無いため発生しない)。公開モックページの最外郭 ._z を
   overflow-x:clip でクリップして相殺する。clip は overflow-y を auto 化しないため
   縦スクロール・position:sticky に影響しない。 */
._z._inquiry,
._z.wp-fullwidth { overflow-x: clip; }


/* --- hover時の a{opacity:.8}(mase_fuc_get_css 由来)打消し ---
   モック公開ページのボタン/リンクは色や影で反応させ、薄く(半透明)しない。
   ヘッダー(.wp-header)・トップ本文(.wp-top)・全幅ページ(.wp-fullwidth)配下に限定。 */
.wp-top a:hover,
.wp-fullwidth a:hover,
.t-siteHeader.wp-header a:hover { opacity: 1 !important; }

/* --- モックページ共通: 本文を全幅1カラムに(TOPの _index と同等の汎用フック) ---
   個別ページの zClass に wp-fullwidth を足すと、MASEグリッド(_cdefghi/_defgh)の
   中央限定幅・パディング・grid制約を解除し、各セクションが自前 container で幅を管理できる。
   ヘッダー(_a)/フッター(_k)は共通partialのまま。求人一覧/詳細など複数ページで再利用する。 */
._z.wp-fullwidth ._cdefghi,
._z.wp-fullwidth ._defgh {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

/* --- 求人一覧の検索フォーム(モック list0603 準拠) ---
   MASEの dl()/choice テーマが出力するマークアップを、モックのサイドバー体裁に整える。
   フォーム機能(child-choice/バリデーション)は据え置き、見た目だけを上書きする。 */
.wp-search-form dl { margin: 0 0 1.25rem; }
.wp-search-form dl > dt { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 700; color: #374151; }
.wp-search-form dl > dt label { font-weight: 700; }
.wp-search-form input[type="text"],
.wp-search-form input[type="search"],
.wp-search-form input:not([type]),
.wp-search-form select,
.wp-search-form textarea {
    width: 100%; border: 1px solid #d1d5db; border-radius: .5rem; padding: .5rem .75rem;
    font-size: .875rem; background: #fff; color: #111827;
}
.wp-search-form input:focus,
.wp-search-form select:focus,
.wp-search-form textarea:focus {
    outline: none; border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13, 148, 136, .35);
}
/* mase.css(1604-1640) は .u-choice を「トグルボタン型」で描画し、ネイティブcheckboxを
   display:none で隠して label をボタン風に装飾する。モック(list0603)は
   「ネイティブcheckbox + ラベル」なので、その装飾を打ち消して checkbox を復活させる。 */
.wp-search-form .u-choice ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex-wrap: nowrap; gap: .5rem; }
.wp-search-form .u-choice li { display: flex; flex: none; align-items: center; gap: .5rem; padding: 0; }
/* mase のボタン型ラベル装飾(枠線/背景/中央寄せ/全幅)を解除して素のラベルに */
.wp-search-form .u-choice li label,
.wp-search-form .u-choice li:has([type="checkbox"]) label {
    width: auto; padding: 0; border: 0; border-radius: 0; background: none;
    text-align: left; font-size: .875rem; font-weight: 400; color: #374151; cursor: pointer;
}
.wp-search-form .u-choice li:has([type="checkbox"]) label:is(:checked + *) { background: none; color: #374151; }
.wp-search-form .u-choice li:hover label { color: #0d9488; }
/* ネイティブ checkbox / radio を表示に戻す(mase の display:none を打ち消す) */
.wp-search-form .u-choice li input[type="checkbox"],
.wp-search-form .u-choice li input[type="radio"] {
    display: inline-block; appearance: auto; -webkit-appearance: auto;
    width: 1rem; height: 1rem; margin: 0; accent-color: #0d9488; flex: none;
}
/* 休日・休暇(.wp-choice-grid でラップ)はモック準拠で2列グリッド */
.wp-search-form .wp-choice-grid .u-choice ul { display: grid; grid-template-columns: repeat(2, 1fr); }
/* 保存済み検索条件などの補助リンク・ボタンの余白 */
.wp-search-form .u-formFooter { margin-top: 1rem; display: flex; flex-direction: column; gap: .75rem; }

/* --- 検索サイドバーの日付レンジ(イベントの開催期間など) ---
   `.wp-search-form select{width:100%}` が年/月/日プルダウンにも効き、狭いサイドバーで
   3段+カレンダーボタンの4段に縦積みになっていた。会員登録の生年月日と同じ考え方で
   幅を詰め、1行(from) / 1行(to) に収める。開始と終了は縦に並べ、間に「〜」を出す。 */
.wp-search-form .wp-date-range { display: flex; flex-direction: column; gap: .25rem; }
.wp-search-form .wp-date-range-sep { display: block; text-align: center; font-size: .75rem; color: #6b7280; line-height: 1; }
.wp-search-form .wp-date-range .f-date {
    display: flex; flex-wrap: nowrap; align-items: center; gap: .25rem;
}
/* 年/月/日 の3つを等分に近い比率で並べる。min-width:0 が無いと select が縮まず溢れる */
.wp-search-form .wp-date-range .f-date select {
    width: auto; flex: 1 1 0; min-width: 0;
    padding: .375rem .25rem; font-size: .8125rem; text-align: center;
}
.wp-search-form .wp-date-range .f-date select[id$="_year"] { flex: 1.5 1 0; }
/* 年/月/日 の間の "/" (mase のテキストノード)は詰めて表示 */
.wp-search-form .wp-date-range .f-date { color: #9ca3af; font-size: .75rem; }
/* カレンダー(jQuery UI datepicker)のボタン。アイコンは mase のフォントで出る */
.wp-search-form .wp-date-range .f-date > button.calendar {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0; border: 1px solid #d1d5db; border-radius: .375rem;
    background: #fff; color: #0f766e; cursor: pointer;
}
.wp-search-form .wp-date-range .f-date > button.calendar:hover { border-color: #5eead4; background: #f0fdfa; }
/* 未選択時のプレースホルダ(年/月/日)はグレーで、選択済みは通常色 */
.wp-search-form .wp-date-range .f-date select:invalid,
.wp-search-form .wp-date-range .f-date select option[value=""] { color: #9ca3af; }

/* --- 求人一覧: 件数・ページャをモック体裁に --- */
.wp-list .t-resultCount { font-size: .875rem; color: #6b7280; }
.wp-list .t-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .25rem; }
/* MASE のページャは現在ページを <b>、他ページ/前後を <a> で出力する。a/span/b すべてを
   モックのボタン型(枠線付き)に統一し、現在ページ(<b>/.current)を Teal 塗りにする。 */
.wp-list .t-pager a,
.wp-list .t-pager span,
.wp-list .t-pager b {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem;
    padding: .25rem .75rem; border: 1px solid #d1d5db; border-radius: .375rem;
    font-size: .875rem; font-weight: 400; color: #374151; background: #fff; text-decoration: none;
}
.wp-list .t-pager a:hover { background: #f9fafb; }
.wp-list .t-pager b,
.wp-list .t-pager .current,
.wp-list .t-pager a.current,
.wp-list .t-pager span.current,
.wp-list .t-pager a.active,
.wp-list .t-pager span.active {
    border-color: #0d9488; background: #0d9488; color: #fff; font-weight: 700;
}
/* 「最初へ/前へ/次へ/最後へ」は文言を出さず矢印だけにする（モック list0603 は < > のみ）。
   mase.css が font-size:0 + ::before(FontAwesome) で同じことをしているが、上の
   `.wp-list .t-pager a { font-size: .875rem }` が勝って文言が復活し、
   max-width:2.5rem の枠内で「次 へ」「最 後 へ」と折り返していた。
   セレクタは mase.css 側と対になっている（data-rel は _tpl_pager.html.twig が付与）。 */
.wp-list .t-pager:has([data-rel="prev"]) a:first-of-type,
.wp-list .t-pager:has([data-rel="prev"]) a:nth-of-type(2),
.wp-list .t-pager:has([data-rel="next"]) a:last-of-type,
.wp-list .t-pager:has([data-rel="next"]) a:nth-last-of-type(2) {
    font-size: 0;
}
.wp-list .t-pager a::before { font-size: .875rem; color: #6b7280; }
.wp-list .t-pager a:hover::before { color: #0d9488; }

/* --- 求人詳細(detail0611): 募集要項/企業情報テーブル --- */
.wp-jobtable { width: 100%; border-collapse: collapse; font-size: .875rem; }
.wp-jobtable th {
    background: #f8fafc; color: #475569; font-weight: 700; text-align: left;
    vertical-align: top; padding: 1rem; border-bottom: 1px solid #e2e8f0; width: 25%;
}
.wp-jobtable td {
    padding: 1rem; border-bottom: 1px solid #e2e8f0; color: #334155;
    vertical-align: top; line-height: 1.7;
}
@media (max-width: 767px) {
    .wp-jobtable th { width: 100%; display: block; border-bottom: none; padding-bottom: .25rem; }
    .wp-jobtable td { display: block; width: 100%; padding-top: 0; }
}

/* --- 求人詳細: 応募/お気に入り等の実導線(u-btn)をモックのピル型に上書き --- */
.wp-detail-cta .u-btn,
.wp-detail-cta a.u-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border-radius: 9999px; padding: .75rem 2rem; font-weight: 700; font-size: .95rem;
    text-decoration: none; transition: all .2s; cursor: pointer;
}
.wp-detail-cta .u-btn.mainPrimary { background: #0d9488; color: #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1); }
.wp-detail-cta .u-btn.mainPrimary:hover { background: #0f766e; }
.wp-detail-cta .u-btn.mainSecondary { background: #fff; border: 2px solid #0d9488; color: #0d9488; }
.wp-detail-cta .u-btn.mainSecondary:hover { background: #0d9488; color: #fff; }

/* --- ブログ記事本文(blogdetail 準拠 prose) ---
   CKEditor 出力(h2/h3/p/ul/strong/img)をモックの記事本文体裁で描画する。 */
.wp-prose { color: #4b5563; line-height: 1.8; }
.wp-prose h2 { font-size: 1.5rem; font-weight: 700; color: #1f2937; margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid #0d9488; }
.wp-prose h3 { font-size: 1.25rem; font-weight: 700; color: #374151; margin-top: 2rem; margin-bottom: .75rem; padding-left: .75rem; border-left: 4px solid #0d9488; }
.wp-prose p { margin-bottom: 1.25rem; line-height: 1.8; color: #4b5563; }
.wp-prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; color: #4b5563; }
.wp-prose ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; color: #4b5563; }
.wp-prose li { margin-bottom: .5rem; }
.wp-prose a { color: #0d9488; text-decoration: underline; }
.wp-prose strong { color: #111827; font-weight: 700; }

/* --- 強調(strong)のマーカー装飾 ---
   モックのブログ記事本文にある「下2/5だけ薄緑のマーカー」。
   これを .wp-prose 全体に当てていたため、CMSで入力する本文(お知らせ・特集・
   確認画面)でも太字にしただけで勝手に緑が付き、さらに編集者が文字に背景色を
   付けると「1行の上下に違う色が出る」状態になっていた
   (上=編集者が付けた色 / 下=このグラデーション)。
   装飾はモックが指定しているブログ記事(.wp-prose-article)だけに限定する。 */
.wp-prose-article strong { background: linear-gradient(transparent 60%, #a7f3d0 60%); }

/* ブログ記事内でも、編集者が背景色(マーカー/インラインstyle)を付けた箇所では
   装飾を出さない。色が二重になるため。 */
.wp-prose-article strong[style*="background"],
.wp-prose-article [style*="background"] strong,
.wp-prose-article :where(.marker-yellow, .marker-green, .marker-pink, .marker-blue) strong,
.wp-prose-article strong:has(:where(.marker-yellow, .marker-green, .marker-pink, .marker-blue)) { background-image: none; }
.wp-prose img { max-width: 100%; height: auto; border-radius: .5rem; margin-top: 2rem; margin-bottom: 2rem; }

/* --- CKEditor の「マーカー」(文字の背景色 / ペン色) ---
   CKEditor5 の Highlight プラグインは色を style 属性ではなくクラスで出力する
   (`<span class="marker-yellow">`)。この配色は CKEditor 同梱の content CSS 側にあり、
   公開画面ではそれを読み込んでいないため、本文に背景色を付けても何も出ていなかった
   (「お知らせ詳細で文字に背景色を設定すると表示されない」の原因)。
   ビルドに含まれる 6 種(marker 4 / pen 2)を CKEditor 既定値で定義する。
   ※ CMS本文はお知らせ以外(ブログ/特集/確認画面)にも出るので .wp-prose 配下に
     限定せず素のクラスとして定義する。 */
/* --- CKEditor の「文字サイズ」---
   FontSize プラグインは設定を渡していないため既定の**クラス方式**で、
   `<span class="text-big">` のようなクラスを出力する。値は CKEditor 同梱の
   content CSS(`.ck-content .text-big{font-size:1.4em}`)側にあり、公開画面では
   それを読み込んでいないため、編集画面では変わるのに保存後の表示は変わらない
   という状態だった。CKEditor 既定値と同じ倍率で定義する。 */
.text-tiny  { font-size: .7em; }
.text-small { font-size: .85em; }
.text-big   { font-size: 1.4em; }
.text-huge  { font-size: 1.8em; }

/* --- CKEditor の画像(配置・リサイズ) ---
   これもクラス方式(`<figure class="image image-style-align-left">` 等)で、
   同じ理由で公開側に効いていなかった。編集画面で寄せた配置やドラッグで変えた
   幅が本番で無視されるため、文字サイズと同じタイミングで入れておく。 */
.wp-prose figure.image { clear: both; display: table; margin: .9em auto; min-width: 50px; text-align: center; }
.wp-prose figure.image img { display: block; margin: 0 auto; max-width: 100%; }
.wp-prose figure.image > figcaption { display: block; caption-side: bottom; font-size: .85em; color: #6b7280; padding: .4em .6em; }
.wp-prose figure.image.image_resized { box-sizing: border-box; display: block; max-width: 100%; }
.wp-prose figure.image.image_resized img { width: 100%; }
.wp-prose .image-style-align-center { margin-left: auto; margin-right: auto; }
.wp-prose .image-style-align-left  { float: left;  clear: none; margin-right: 1.5em; }
.wp-prose .image-style-align-right { float: right; clear: none; margin-left: 1.5em; }
.wp-prose .image-style-block-align-left  { margin-left: 0; margin-right: auto; }
.wp-prose .image-style-block-align-right { margin-left: auto; margin-right: 0; }
.wp-prose .image-inline { align-items: flex-start; display: inline-flex; max-width: 100%; }
.wp-prose .image-inline img { flex-grow: 1; flex-shrink: 1; max-width: 100%; }
/* 画像を回り込ませた直後の見出しが食い込まないように */
.wp-prose h2, .wp-prose h3 { clear: both; }

.marker-yellow { background-color: #fdfd77; }
.marker-green  { background-color: #62f962; }
.marker-pink   { background-color: #fc7999; }
.marker-blue   { background-color: #72cdfd; }
.pen-red       { color: #e71313; background-color: transparent; }
.pen-green     { color: #128a00; background-color: transparent; }


/* --- エラーページ(404/403/500) ---
   ヘッダー(._a)・本文(main)・フッターを縦に1列で並べる。

   ★`grid-template: none` が要る理由
     このラッパーには公開ページ共通の `_z` を付けている(CSSが `._z:not(._backend)`
     で絞っているため)。`._z` は `grid-template` で `_a`/`_b`/`_c`… の名前付きエリアを
     持つ**多列**グリッドなので、そのままだとエリア名を持たない main とフッターが
     空き列へ自動配置され、**フッターが「Oops! 403」の横に並んで**しまう。
     エリアと列定義ごと解除して1列に固定する。
   高さは 100dvh 相当を保ち、本文が短くてもフッターが画面下に来るようにする。 */
._z.ERROR {
  display: grid;
  grid-template: none;
  grid-template-columns: 1fr;
  grid-template-rows: min-content 1fr min-content;
  min-height: 100dvh;
  height: auto;
}

/* `._a` などが持つ `grid-area` 指定も無効化する(上でエリアを消しているため) */
._z.ERROR > * {
  grid-area: auto;
  min-width: 0;
}

/* 本文(Oops! / コード / 見出し / サイトトップへ)をヘッダーとフッターの間で
   上下・左右とも中央に置く。403/404/500 は同じテンプレートなのでここで全部効く。
   mase.css 側にも `.ERROR main { align-self: center }` はあるが @layer 内で、
   行構成を上で組み替えているため、ここで明示して確実に中央へ寄せる。 */
._z.ERROR > main {
  align-self: center;
  width: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .25em;
  padding: 3rem 1rem;
  text-align: center;
}

/* --- 質問と回答: 回答済みのときの「回答を編集する」 ---
   回答本文の下に置く副次アクション。mase 側の `._tpl_qa dl { display:flex }` で
   dt/dd が横並びになるため、そのままだと本文と同じ行に続いてしまう。
   ブロックにして上に余白を取り、小さめに出す。 */
.wp-qa-action {
  margin-top: .75em;
}
.wp-qa-action .u-btn {
  display: inline-flex;
  min-height: 0;
  padding: .3em 1em;
  font-size: .8125rem;
}

/* --- 複数行省略(line-clamp) フォールバック(Tailwind未生成時の保険 / bloglist 準拠) --- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --- スクロール表示(fade-in): モック共通パターン ---
   .has-js(=_js_frontend が付与) が有る時だけ初期非表示にし、
   JS無効環境ではコンテンツが常時見えるようにする(アクセシビリティ)。 */
.has-js .wp-fade { opacity: 0; transform: translateY(28px); transition: opacity .8s ease-out, transform .8s ease-out; }
.has-js .wp-fade.is-visible { opacity: 1; transform: translateY(0); }
.wp-fade.d1 { transition-delay: .1s; }
.wp-fade.d2 { transition-delay: .2s; }
.wp-fade.d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
    .has-js .wp-fade { opacity: 1; transform: none; transition: none; }
}
/* ヒーロー等の見出しを写真上で視認しやすくする(モック準拠) */
.wp-hero-shadow { text-shadow: 0 0 6px rgba(0, 0, 0, .8); }

/* --- 申込完了ページ(申し込みが完了しました) ---
   mase側の `._stc._case._complete main { display:grid; place-items:center; height:100% }`
   は「小さな見出し＋ボタンを縦中央に置く」前提の指定で、完了カード(tailwind)を
   入れると幅が縮み位置も浮く。カード側でレイアウトを持つので打ち消す。 */
._z._stc._case._complete main {
    display: block;
    height: auto;
    place-items: normal;
    align-content: normal;
}