/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://growland.co.jp/
Description: Child theme for Twenty Twenty-Five
Author: GROWLAND
Template: twentytwentyfive
Version: 1.0.0
Text Domain: twentytwentyfive-child
*/
/* =========================================================
✅ Recruit / Job cards 共通設定
- /recruit/ … body.page-id-8（採用トップ）
- /recruit/job/ … body.post-type-archive-job（求人一覧）
方針：
- /recruit/ はショートコード(.job-cards / .job-item)をカード化
- /recruit/job/ は Query Loop の li をカード化（最も確実）
- 二重カードになりやすい内側枠(.job-item 等)はページごとに制御
- メタは dt/dd を「雇用形態 正社員」形式で安定表示
========================================================= */
/* ---- ページ別の幅（要望④：/recruit/job/ を小さめに） ---- */
body.page-id-8{
--job-wrap-max: 760px; /* 採用トップは少し広め */
}
body.post-type-archive-job{
--job-wrap-max: 680px; /* 求人一覧は少し狭め（右余白の違和感を抑える） */
}
/* ---- 共通変数 ---- */
body.page-id-8,
body.post-type-archive-job{
--job-card-border: rgba(0,0,0,.14);
--job-card-radius: 12px;
--job-card-bg: #fff;
--job-card-pad: 16px;
--job-title-size: 18px;
--job-badge-font: 12.5px;
--job-btn-border: #111;
--job-btn-radius: 999px;
--job-btn-pad: 7px 12px;
--job-btn-size: 14px;
}
/* =========================================================
✅ センター寄せ（/recruit/ と /recruit/job/）
========================================================= */
/* 採用トップ */
body.page-id-8 .wp-block-query,
body.page-id-8 .job-cards{
max-width: var(--job-wrap-max);
margin-left: auto !important;
margin-right: auto !important;
}
/* 求人一覧：TT5の構造差に強く「クエリ/メイン/内ラッパー」をまとめて中央寄せ */
body.post-type-archive-job .wp-block-query{
max-width: var(--job-wrap-max);
margin-left: auto !important;
margin-right: auto !important;
}
/* =========================================================
✅ /recruit/（採用トップ）: [job_cards] をカード化（要望③）
- ショートコードが .job-cards / .job-item を出す前提
========================================================= */
body.page-id-8 .job-cards{
display: grid;
gap: 12px;
}
/* 採用トップ：カード本体は .job-item */
body.page-id-8 .job-cards .job-item{
border: 1px solid var(--job-card-border);
border-radius: var(--job-card-radius);
background: var(--job-card-bg);
padding: var(--job-card-pad);
box-sizing: border-box;
}
/* =========================================================
✅ /recruit/job/（求人一覧）: Query Loop の li をカード化（要望④, センター）
========================================================= */
body.post-type-archive-job .wp-block-post-template{
list-style: none;
margin: 0 !important;
padding: 0 !important;
display: grid;
gap: 12px;
}
/* 求人一覧：カード本体は li */
body.post-type-archive-job .wp-block-post-template > li{
border: 1px solid var(--job-card-border);
border-radius: var(--job-card-radius);
background: var(--job-card-bg);
padding: var(--job-card-pad);
box-sizing: border-box;
}
/* =========================================================
✅ TT5の余白暴れを止める（カード内だけ）
========================================================= */
body.page-id-8 .job-cards .job-item > *,
body.post-type-archive-job .wp-block-post-template > li > *{
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
body.page-id-8 .job-cards .job-item *,
body.post-type-archive-job .wp-block-post-template > li *{
box-sizing: border-box;
}
/* =========================================================
✅ タイトル
- /recruit/ の [job_cards] タイトルは大きく（要望③）
========================================================= */
/* 共通：リンク装飾 */
body.page-id-8 .job-title a,
body.post-type-archive-job .job-title a,
body.page-id-8 .wp-block-post-title a,
body.post-type-archive-job .wp-block-post-title a{
color: inherit;
text-decoration: none;
}
body.page-id-8 .job-title a:hover,
body.post-type-archive-job .job-title a:hover,
body.page-id-8 .wp-block-post-title a:hover,
body.post-type-archive-job .wp-block-post-title a:hover{
text-decoration: underline;
}
/* 基本の見た目 */
body.page-id-8 .job-title,
body.post-type-archive-job .job-title,
body.page-id-8 .wp-block-post-title,
body.post-type-archive-job .wp-block-post-title{
margin: 0 0 6px !important;
font-size: var(--job-title-size);
line-height: 1.25;
}
/* 採用トップの [job_cards] タイトルを大きく（要望③） */
body.page-id-8 .job-cards .job-title,
body.page-id-8 .job-cards .wp-block-post-title{
font-size: 22px;
font-weight: 800;
line-height: 1.2;
}
/* =========================================================
✅ バッジ（未経験OK / 福利厚生）
========================================================= */
body.page-id-8 .job-badges,
body.post-type-archive-job .job-badges{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 0 14px !important;
}
body.page-id-8 .job-badge,
body.post-type-archive-job .job-badge{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.12);
background: rgba(0,0,0,.03);
font-size: var(--job-badge-font);
line-height: 1.2;
max-width: 100%;
white-space: normal;
word-break: break-word;
}
/* 絵文字が ![]()
に変換されて二重になる対策 */
body.page-id-8 .job-badge img.emoji,
body.post-type-archive-job .job-badge img.emoji{
display: none !important;
}
/* 色 */
body.page-id-8 .job-badge--ok,
body.post-type-archive-job .job-badge--ok{
border-color: rgba(25,135,84,.35);
background: rgba(25,135,84,.08);
}
body.page-id-8 .job-badge--welfare,
body.post-type-archive-job .job-badge--welfare{
border-color: rgba(13,110,253,.28);
background: rgba(13,110,253,.06);
}
/* アイコン */
body.page-id-8 .job-badge--ok::before,
body.post-type-archive-job .job-badge--ok::before{
content: "✨";
font-size: 13px;
line-height: 1;
}
body.page-id-8 .job-badge--welfare::before,
body.post-type-archive-job .job-badge--welfare::before{
content: "🛡️";
font-size: 13px;
line-height: 1;
}
/* =========================================================
✅ メタ（雇用形態 / 勤務地 / 給与 / 勤務時間 / 休日）
- dl直下dt/dd型、row wrapper型どちらでも崩れない
========================================================= */
body.page-id-8 .job-meta,
body.post-type-archive-job .job-meta{
display: grid;
grid-template-columns: 92px 1fr;
column-gap: 12px;
row-gap: 0;
margin: 12px 0 0 !important;
padding: 0 !important;
}
/* wrapperがある場合はgrid参加させる */
body.page-id-8 .job-meta__row,
body.post-type-archive-job .job-meta__row{
display: contents;
}
/* dt/dd を左右配置＆縦落ち防止 */
body.page-id-8 .job-meta dt,
body.page-id-8 .job-meta dd,
body.post-type-archive-job .job-meta dt,
body.post-type-archive-job .job-meta dd{
margin: 0 !important;
padding: 10px 0 !important;
min-width: 0;
border-top: 1px solid rgba(0,0,0,.10);
line-height: 1.45;
}
/* 1行目だけ罫線を消す */
body.page-id-8 .job-meta dt:first-of-type,
body.page-id-8 .job-meta dd:first-of-type,
body.post-type-archive-job .job-meta dt:first-of-type,
body.post-type-archive-job .job-meta dd:first-of-type{
border-top: 0;
padding-top: 0 !important;
}
/* 左：ラベル */
body.page-id-8 .job-meta dt,
body.post-type-archive-job .job-meta dt{
grid-column: 1;
font-weight: 700;
color: #222;
white-space: nowrap;
}
/* 右：値（社/員・数字の縦落ち防止） */
body.page-id-8 .job-meta dd,
body.post-type-archive-job .job-meta dd{
grid-column: 2;
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
}
/* 給与だけ強調（旧CSSの meta-value--salary を維持） */
body.page-id-8 .job-meta dd.meta-value--salary,
body.post-type-archive-job .job-meta dd.meta-value--salary{
font-weight: 800;
font-size: 15px;
}
/* スマホ */
@media (max-width: 640px){
body.page-id-8 .job-meta,
body.post-type-archive-job .job-meta{
grid-template-columns: 82px 1fr;
column-gap: 10px;
}
body.post-type-archive-job main.job-archive{
padding: 12px 8px;
}
body.page-id-8 .job-cards .job-item,
body.post-type-archive-job .wp-block-post-template > li{
padding: 14px;
border-radius: 12px;
}
}
/* =========================================================
✅ job_summary の扱い（要望②/⑤）
- /recruit/ : 表示する（消さない）
- /recruit/job/ : 非表示にする
========================================================= */
/* /recruit/ は“明示的に表示”に寄せる（どこかで消されても復帰しやすい） */
body.page-id-8 .job-summary{
display: block;
margin: 6px 0 10px;
font-size: 13.5px;
line-height: 1.5;
opacity: .85;
}
/* =========================================================
✅ ボタン（詳細を見る）
========================================================= */
body.page-id-8 .job-link,
body.post-type-archive-job .job-link{
margin: 12px 0 0 !important;
}
body.page-id-8 .job-link a,
body.post-type-archive-job .job-link a{
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--job-btn-pad);
border: 1px solid var(--job-btn-border);
border-radius: var(--job-btn-radius);
text-decoration: none;
font-size: var(--job-btn-size);
line-height: 1;
width: fit-content;
}
body.page-id-8 .job-link a:hover,
body.post-type-archive-job .job-link a:hover{
opacity: .85;
}
/* =========================================================
✅ /recruit/ 「数字で見るGROWLAND」カード（復活・保持）
========================================================= */
.recruit-stats-section .recruit-stats{
display: grid;
grid-template-columns: 1fr; /* SPは1枚ずつ */
gap: 10px;
margin: 12px 0 0;
padding: 0;
}
.recruit-stats-section .recruit-stat{
border: 1px solid rgba(0,0,0,.10);
border-radius: 14px;
background: #fff;
padding: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.recruit-stats-section .recruit-stat__num{
font-weight: 800;
font-size: 22px;
line-height: 1.1;
}
.recruit-stats-section .recruit-stat__unit{
font-weight: 700;
font-size: 13px;
margin-left: 6px;
opacity: .8;
}
.recruit-stats-section .recruit-stat__label{
margin-top: 6px;
font-weight: 800;
font-size: 14px;
line-height: 1.3;
}
.recruit-stats-section .recruit-stat__note{
margin-top: 6px;
font-size: 13.5px;
line-height: 1.45;
opacity: .78;
}
@media (min-width: 768px){
.recruit-stats-section .recruit-stats{
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
}
/* =========================================================
✅ /recruit/ Instagramボタン（復活・保持）
========================================================= */
body.page-id-8 .recruit-insta__btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid #111;
background: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1;
text-decoration: none !important;
}
body.page-id-8 .recruit-insta__btn:hover{
opacity: .85;
}
body.page-id-8 .recruit-insta__btn:where(:link,:visited){
text-decoration: none !important;
color: inherit;
}
/* ✅ /recruit/job/ でも job_summary を表示 */
body.post-type-archive-job .job-summary{
display: block !important;
margin: 6px 0 10px;
font-size: 13.5px;
line-height: 1.5;
opacity: .85;
}
/* =========================================================
✅ job 詳細（single job）
========================================================= */
body.single-job{
--job-wrap-max: 680px;
}
/* 中央寄せ */
body.single-job main{
max-width: var(--job-wrap-max);
margin-left: auto !important;
margin-right: auto !important;
padding: clamp(16px, 2.6vw, 28px) 12px;
}
/* テンプレで付けてる .job-item をカード化 */
body.single-job .job-item{
border: 1px solid rgba(0,0,0,.14);
border-radius: 12px;
background: #fff;
padding: 16px;
box-sizing: border-box;
}
/* バッジ */
body.single-job .job-badges{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 10px 0 14px !important;
}
body.single-job .job-badge{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.12);
background: rgba(0,0,0,.03);
font-size: 12.5px;
line-height: 1.2;
}
body.single-job .job-badge--ok::before{
content: "✨";
font-size: 13px;
line-height: 1;
}
/* 念のため：singleでは福利厚生バッジは常に非表示 */
body.single-job .job-badge--welfare{
display: none !important;
}
/* メタ（job_meta_all） */
body.single-job .job-meta{
display: grid;
grid-template-columns: 92px 1fr;
column-gap: 12px;
margin: 14px 0 0 !important;
padding: 0 !important;
}
body.single-job .job-meta__row{ display: contents; }
body.single-job .job-meta dt,
body.single-job .job-meta dd{
margin: 0 !important;
padding: 10px 0 !important;
border-top: 1px solid rgba(0,0,0,.10);
line-height: 1.45;
}
body.single-job .job-meta dt:first-of-type,
body.single-job .job-meta dd:first-of-type{
border-top: 0;
padding-top: 0 !important;
}
body.single-job .job-meta dt{
font-weight: 700;
white-space: nowrap;
}
body.single-job .job-meta dd{
overflow-wrap: anywhere;
}
body.single-job .job-meta dd.meta-value--salary{
font-weight: 800;
font-size: 15px;
}
/* =========================================================
✅ job 詳細（single job）表示崩れ修正：/recruit/カードに寄せる
- タイトル/バッジが中央寄せになっているのを左揃えへ
- カード幅を安定させる（mainが効かないケースの保険）
========================================================= */
body.single-job{
--job-wrap-max: 680px; /* ここは好みで */
}
/* main の幅が効かない構造対策（保険） */
body.single-job main{
max-width: var(--job-wrap-max);
margin-left: auto !important;
margin-right: auto !important;
padding: clamp(16px, 2.6vw, 28px) 12px;
}
/* カード自体も幅を固定して中央寄せ（さらに保険） */
body.single-job .job-item{
max-width: var(--job-wrap-max);
margin-left: auto !important;
margin-right: auto !important;
border: 1px solid rgba(0,0,0,.14);
border-radius: 12px;
background: #fff;
padding: 16px;
box-sizing: border-box;
text-align: left; /* ←ここが重要 */
}
/* Gutenberg側で「中央揃え」が付いていても強制的に左へ */
body.single-job .job-item :is(
.wp-block-post-title,
h1,h2,h3,
p
){
text-align: left !important;
}
/* バッジも左寄せ */
body.single-job .job-badges{
justify-content: flex-start;
align-items: flex-start;
}
/* メタ：折返しが暴れやすいので anywhere をやめる */
body.single-job .job-meta dd{
overflow-wrap: break-word;
word-break: normal;
}
@media (max-width: 640px){
body.single-job .job-meta{
grid-template-columns: 82px 1fr;
column-gap: 10px;
}
}
.job-inquiry-btn{
display:inline-block;
padding:12px 18px;
border-radius:999px;
font-weight:700;
text-decoration:none;
border:1px solid rgba(0,0,0,.18);
}
/* recruit-contact：入力欄を薄いグレー＋角丸に */
body.page-id-166 .wpcf7 input[type="text"],
body.page-id-166 .wpcf7 input[type="email"],
body.page-id-166 .wpcf7 input[type="tel"],
body.page-id-166 .wpcf7 input[type="number"],
body.page-id-166 .wpcf7 input[type="url"],
body.page-id-166 .wpcf7 textarea,
body.page-id-166 .wpcf7 select{
background: #f5f5f5;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 10px 12px;
outline: none;
box-shadow: none;
}
body.page-id-166 .wpcf7 input:focus,
body.page-id-166 .wpcf7 textarea:focus,
body.page-id-166 .wpcf7 select:focus{
border-color: #bdbdbd;
background: #ffffff;
}
/* =========================================================
✅ Recruit cards タイポ統一（/recruit/ /recruit/job/ /job詳細）
方針：
- 基本文字は統一（clampでSP最適化）
- タイトル：基準の1.8倍
- バッジ：基準の0.75倍
- メタのラベル(dt)だけ太字、値(dd)は通常
========================================================= */
body.page-id-8,
body.post-type-archive-job,
body.single-job{
/* 基準（本文・要約・メタ・ボタン） */
--gl-card-fs: clamp(15px, 0.6vw + 12px, 17px);
--gl-card-lh: 1.55;
/* 比率 */
--gl-title-mult: 1.8;
--gl-badge-mult: 0.75;
/* ウェイト */
--gl-w-title: 800;
--gl-w-label: 700;
--gl-w-normal: 400;
--gl-w-badge: 600;
--gl-w-btn: 700;
}
/* --- タイトル（.job-title / wp-block-post-title） --- */
body.page-id-8 :is(.job-title, .wp-block-post-title),
body.post-type-archive-job :is(.job-title, .wp-block-post-title),
body.single-job :is(.job-title, .wp-block-post-title){
font-size: clamp(
calc(15px * var(--gl-title-mult)),
calc((0.6vw + 12px) * var(--gl-title-mult)),
calc(17px * var(--gl-title-mult))
) !important; /* ←基準×1.8 を clamp で安全に */
line-height: 1.2 !important;
font-weight: var(--gl-w-title) !important;
margin: 0 0 8px !important;
}
/* --- バッジ（未経験OK / 福利厚生） --- */
body.page-id-8 .job-badge,
body.post-type-archive-job .job-badge,
body.single-job .job-badge{
font-size: clamp(
calc(15px * var(--gl-badge-mult)),
calc((0.6vw + 12px) * var(--gl-badge-mult)),
calc(17px * var(--gl-badge-mult))
) !important; /* ←基準×0.75 */
line-height: 1.2 !important;
font-weight: var(--gl-w-badge) !important;
}
/* バッジ内アイコンも追従 */
body.page-id-8 .job-badge::before,
body.post-type-archive-job .job-badge::before,
body.single-job .job-badge::before{
font-size: 1em !important;
}
/* --- 要約（job_summary） --- */
body.page-id-8 .job-summary,
body.post-type-archive-job .job-summary,
body.single-job .job-summary{
font-size: var(--gl-card-fs) !important;
line-height: var(--gl-card-lh) !important;
font-weight: var(--gl-w-normal) !important;
}
/* --- メタ（dt/dd） --- */
body.page-id-8 .job-meta dt,
body.post-type-archive-job .job-meta dt,
body.single-job .job-meta dt{
font-size: var(--gl-card-fs) !important;
line-height: var(--gl-card-lh) !important;
font-weight: var(--gl-w-label) !important;
}
body.page-id-8 .job-meta dd,
body.post-type-archive-job .job-meta dd,
body.single-job .job-meta dd{
font-size: var(--gl-card-fs) !important;
line-height: var(--gl-card-lh) !important;
font-weight: var(--gl-w-normal) !important;
}
/* 給与だけ強調を無効化（値は通常に統一） */
body.page-id-8 .job-meta dd.meta-value--salary,
body.post-type-archive-job .job-meta dd.meta-value--salary,
body.single-job .job-meta dd.meta-value--salary{
font-size: var(--gl-card-fs) !important;
font-weight: var(--gl-w-normal) !important;
}
/* --- ボタン（詳細を見る / まずは気軽に相談する） --- */
body.page-id-8 .job-link a,
body.post-type-archive-job .job-link a,
body.single-job .job-link a,
body.page-id-8 .job-inquiry-btn,
body.post-type-archive-job .job-inquiry-btn,
body.single-job .job-inquiry-btn{
font-size: var(--gl-card-fs) !important;
line-height: 1.1 !important;
font-weight: var(--gl-w-btn) !important;
}
/* =========================================
GROWLAND 採用：コーポレート寄せ（薄背景＋カード影/角丸）
対象：/recruit/（page-id-8）, /recruit/job/（archive）, /recruit/job/*（single）
========================================= */
/* --- 背景：白ベース＋ごく薄い色面（ドット無し） --- */
body.page-id-8,
body.post-type-archive-job,
body.single-job{
position: relative;
isolation: isolate;
background: #fff;
}
body.page-id-8::before,
body.post-type-archive-job::before,
body.single-job::before{
content:"";
position: fixed;
inset: 0;
z-index: -1;
pointer-events:none;
background:
radial-gradient(circle at 12% 10%, rgba(0,122,99,.12), transparent 42%),
radial-gradient(circle at 88% 14%, rgba(245,200,76,.16), transparent 40%),
radial-gradient(circle at 22% 88%, rgba(245,200,76,.10), transparent 46%),
radial-gradient(circle at 92% 82%, rgba(0,122,99,.08), transparent 48%),
#ffffff;
}
/* --- カード：角丸＋影（コーポレート寄せ、やりすぎない） --- */
/* 一番安全な当て方：採用系の「本文の白い枠」をまとめて指定 */
body.page-id-8 .wp-block-group,
body.post-type-archive-job .wp-block-group,
body.single-job .wp-block-group{
border-radius: 16px;
}
/* 実際に“カードっぽい”見た目になっている要素へ影を付与 */
body.page-id-8 .wp-block-group:is([class*="job"], [class*="card"], [class*="box"]),
body.post-type-archive-job .wp-block-group:is([class*="job"], [class*="card"], [class*="box"]),
body.single-job .wp-block-group:is([class*="job"], [class*="card"], [class*="box"]){
box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
/* もし上の指定で影が当たらない場合に備えた“保険”：記事本文のまとまり */
body.page-id-8 main :is(.wp-block-post, .entry-content) > .wp-block-group{
box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
/* カード内の区切り線（表）を少し上品に */
body.single-job .entry-content hr,
body.post-type-archive-job .entry-content hr{
opacity: .35;
}
/* 採用：背景をコーポレート寄りに上書き（ドット無し） */
body.page-id-8::before,
body.post-type-archive-job::before,
body.single-job::before{
/* ドット等を完全に無効化して、薄い色面だけにする */
background-image: none !important;
background:
radial-gradient(circle at 14% 10%, rgba(0,122,99,.08), transparent 46%),
radial-gradient(circle at 86% 14%, rgba(245,200,76,.10), transparent 44%),
radial-gradient(circle at 24% 88%, rgba(245,200,76,.06), transparent 48%),
radial-gradient(circle at 92% 82%, rgba(0,122,99,.05), transparent 52%),
#ffffff !important;
filter: none;
}
/* =========================================
採用：カードの影/角丸（控えめ）
========================================= */
/* 求人一覧であなたが使っている .job-item（以前のCSSに出てた）に効かせる */
body.post-type-archive-job .job-item{
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,.06);
background: #fff;
}
/* 求人詳細：本文の最初の「大きい白カード」に効かせる（やりすぎ防止） */
body.single-job .entry-content > .wp-block-group:first-of-type{
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,.06);
background: #fff;
}
/* ==========================
gl-card：カードだけ角丸＋影
========================== */
.gl-card{
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
/* ちょい軽め版（必要なら） */
.gl-card--soft{
border-radius: 16px;
background: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
body.page-id-8 .entry-content .wp-block-group{
box-shadow: none !important;
}
/* ==========================
採用：影は gl-card を付けた要素だけ
========================== */
.gl-card{
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.gl-card--soft{
border-radius: 16px;
background: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
/* ==========================
求人カード：外側の枠線（フレーム）を消す
========================== */
/* よくあるカード外枠（あなたの環境だと job-item が高確率） */
body.post-type-archive-job .job-item,
body.page-id-8 .job-item{
border: none !important;
outline: none !important;
}
/* もし aタグや内側ラッパーに枠が付いている場合の保険 */
body.post-type-archive-job .job-item > a,
body.page-id-8 .job-item > a,
body.post-type-archive-job .job-item .job-card,
body.page-id-8 .job-item .job-card{
border: none !important;
outline: none !important;
}
/* 影は “カードだけ” に付けたいので、ついでにここで統一（必要なら） */
body.post-type-archive-job .job-item,
body.page-id-8 .job-item{
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
/* =========================================
求人一覧：外側フレーム（li.wp-block-post の枠）を消す
========================================= */
/* 外側（1件分の ）に付いている枠・疑似枠を全撤去 */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post{
border: none !important;
outline: none !important;
box-shadow: none !important; /* 枠が inset shadow の場合も潰す */
background: transparent !important;
}
/* その中のカード本体（あなたのスクショだとここが div.job-item）を“カードとして”整える */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post > .wp-block-group.job-item{
border: none !important;
outline: none !important;
background: #fff !important;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,.06) !important; /* 影はここにだけ */
}
/* =========================================
求人カード共通：枠なし＋影＋角丸（/recruit/ と /recruit/job/）
========================================= */
:root{
--gl-card-radius: 16px;
--gl-card-shadow: 0 10px 30px rgba(0,0,0,.06);
}
/* 外側（1件分の li ）の枠や影を消す */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post,
body.page-id-8 .wp-block-post-template > li.wp-block-post{
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* カード本体（あなたの環境：.wp-block-group.job-item が入っている） */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post > .wp-block-group.job-item,
body.page-id-8 .wp-block-post-template > li.wp-block-post > .wp-block-group.job-item{
border: none !important;
outline: none !important;
background: #fff !important;
border-radius: var(--gl-card-radius) !important;
box-shadow: var(--gl-card-shadow) !important;
overflow: hidden; /* ←角丸が見えない原因(内側のはみ出し)を潰す */
}
/* =========================================
/recruit/job/ の左右余白＆中央寄せを /recruit/ に寄せる
========================================= */
body.post-type-archive-job main,
body.post-type-archive-job .wp-site-blocks{
/* 余白が効かないケースの保険：横はみ出し対策 */
overflow-x: clip;
}
/* 求人一覧の「中身」を中央寄せ＋左右padding */
body.post-type-archive-job main .wp-block-query,
body.post-type-archive-job main .wp-block-post-template{
max-width: 720px; /* /recruit/ 側に合わせたいならここ調整 */
margin-left: auto !important;
margin-right: auto !important;
padding-left: 12px;
padding-right: 12px;
}
/* カード同士の間隔（詰まりすぎ防止） */
body.post-type-archive-job .wp-block-post-template{
display: grid; /* 既にgridでもOK（上書きされるだけ） */
gap: 14px; /* /recruit/ に合わせて調整 */
padding-bottom: 24px;
}
/* =========================================
最終上書きゾーン：/recruit/job/ を /recruit/ に寄せる
※この下だけ編集する運用にする
========================================= */
/* 1) 求人一覧ページ：コンテンツ領域に「左右余白 + 中央寄せ」を強制 */
body.post-type-archive-job main{
max-width: none !important; /* 既存の max-width 競合を一旦無効化 */
padding: 0 !important; /* 既存 padding 競合を一旦無効化 */
}
/* 2) Query Loop 一式を“箱”として中央寄せ（ここが効けば余白が揃う） */
body.post-type-archive-job main :is(.wp-block-query, .wp-block-post-template){
max-width: var(--job-wrap-max, 760px) !important; /* /recruit に寄せるなら 760px 推奨 */
margin-left: auto !important;
margin-right: auto !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* 3) リスト自体の余白と間隔 */
body.post-type-archive-job .wp-block-post-template{
margin: 0 !important;
padding: 0 0 24px !important;
gap: 14px !important;
}
/* 4) 「カードの角丸が見えない」対策（中身がはみ出して角丸を潰すケース） */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post > .wp-block-group.job-item{
border-radius: 16px !important;
overflow: hidden !important;
}
/* =========================================================
✅ 最終上書きゾーン（採用：カード統一 & 余白調整）
※このブロックは必ず style.css の一番下に置く
========================================================= */
/* 0) /recruit/job/（求人一覧）ページ全体の余白 */
body.post-type-archive-job main{
padding: clamp(20px, 3vw, 36px) 12px !important;
}
/* 一覧の中身を中央寄せ */
body.post-type-archive-job main .wp-block-query,
body.post-type-archive-job main .wp-block-post-template{
max-width: 720px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* カード同士の間隔 */
body.post-type-archive-job .wp-block-post-template{
display: grid !important;
gap: 14px !important;
}
/* 1) 外側フレーム（li）を完全に無効化（枠/影/背景/余白を消す） */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post{
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
overflow: visible !important; /* 影が切れる事故防止 */
}
/* 2) 実カード本体（あなたの環境：div.wp-block-group.job-item.gl-card）に統一 */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post > .wp-block-group.job-item,
body.post-type-archive-job .wp-block-post-template > li.wp-block-post > .wp-block-group.gl-card{
background: #fff !important;
border: 0 !important;
border-radius: 16px !important;
box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
overflow: hidden !important;
padding: 16px !important; /* ←「余白がない」の解決点はここ */
}
/* 3) /recruit/ 側（募集職種一覧のカード）も同じ見た目に統一 */
body.page-id-8 .job-cards .job-item{
border: 0 !important;
border-radius: 16px !important;
box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
overflow: hidden !important;
padding: 16px !important;
}
/* /recruit/job/ 外側の左右余白を確実に作る */
body.post-type-archive-job main{
max-width: none !important; /* mainは広げてOK。幅は中身で制御 */
margin-left: 0 !important;
margin-right: 0 !important;
padding: clamp(16px, 2.6vw, 28px) 12px !important;
}
/* TT5の“ルート余白変数”を採用ページだけ調整 */
body.post-type-archive-job{
--wp--style--root--padding-left: 12px;
--wp--style--root--padding-right: 12px;
}
/* ===== FIX: /recruit/job/ カード本体に余白を戻す（最終上書き） ===== */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post > .wp-block-group.job-item{
padding: 16px !important; /* ← ここが“余白がない”の解決点 */
border-radius: 16px !important;
overflow: hidden !important;
background: #fff !important;
box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
}
/* 外側の側には見た目を持たせない（フレーム化防止） */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* =========================================================
✅最終FIX：/recruit/job/（求人一覧）だけ余白＆枠問題を解決
※必ず style.css の一番最後
========================================================= */
/* ページ全体に余白（これが “/recruit/ と違う” の主原因になりがち） */
body.post-type-archive-job main{
padding: clamp(20px, 3vw, 36px) 12px !important;
}
/* 一覧の中身を中央寄せ＋左右の安全余白 */
body.post-type-archive-job main :is(.wp-block-query, .wp-block-post-template){
max-width: 760px !important; /* /recruit/ に寄せたいならここ */
margin-left: auto !important;
margin-right: auto !important;
}
/* 外側（li）の “変な枠” を完全に殺す */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post{
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
overflow: visible !important; /* 影が切れないように */
}
/* 内側（本体カード）に角丸＋影＋内側余白を集約 */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post > .wp-block-group.job-item{
background: #fff !important;
border: 0 !important;
border-radius: 16px !important;
box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
padding: 16px !important; /* ← “余白がない” の解決点はここ */
overflow: hidden !important; /* 角丸が潰れるのを防ぐ */
}
/* カード間の間隔 */
body.post-type-archive-job .wp-block-post-template{
display: grid !important;
gap: 14px !important;
}
/* ✅ /recruit/job/（求人一覧）だけ：カードの枠/余白FIX（DOM準拠版） */
body.post-type-archive-job main{
padding: clamp(20px, 3vw, 36px) 12px !important;
}
/* 一覧の中身中央寄せ */
body.post-type-archive-job .wp-block-query,
body.post-type-archive-job .wp-block-post-template{
max-width: 760px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 外側 li の枠を殺す（残っている場合） */
body.post-type-archive-job .wp-block-post-template > li{
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
/* ✅ 実カード本体（あなたのDOMにいるやつ） */
body.post-type-archive-job .wp-block-post-template > li .gl-jobcard_job-item{
background: #fff !important;
border: 0 !important;
border-radius: 16px !important;
box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
padding: 16px !important;
overflow: hidden !important;
}
/* カード間隔 */
body.post-type-archive-job .wp-block-post-template{
display: grid !important;
gap: 14px !important;
}
/* =========================================================
✅ /recruit/job/（求人一覧） 最終FIX（DOM準拠：.gl-jobcard）
これを style.css の一番最後に置く
========================================================= */
/* ページ全体の余白（まずはここで /recruit/ に寄せる） */
body.post-type-archive-job main{
padding: clamp(20px, 3vw, 36px) 12px !important;
}
/* 一覧の“コンテンツ幅”を中央寄せ（Query Loop / リスト両方） */
body.post-type-archive-job :is(.wp-block-query, .wp-block-post-template){
max-width: 760px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ul（一覧）を縦並び + 間隔 */
body.post-type-archive-job .wp-block-post-template{
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: grid !important;
gap: 14px !important;
}
/* ✅ “変な枠”の正体になりがちな li を完全に透明化 */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post{
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
/* ✅ 実カード本体：あなたのDOMはこれ */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post > .gl-jobcard{
background: #fff !important;
border: 0 !important;
border-radius: 16px !important;
box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
padding: 16px !important;
overflow: hidden !important;
}
/* もし .gl-jobcard が li直下じゃない場合の保険（1段深い位置でも当てる） */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post .gl-jobcard{
background: #fff !important;
border: 0 !important;
border-radius: 16px !important;
box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
padding: 16px !important;
overflow: hidden !important;
}
/* =========================================================
/recruit/job/ 二重枠対策：外側 wrapper を無効化して内側だけカードにする
========================================================= */
/* 1) li（外側）には何も持たせない */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
/* 2) 1段目の wrapper（gl-card / has-global-padding）を無効化 */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post > .wp-block-group.gl-card{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important; /* ← has-global-padding を殺す */
border-radius: 0 !important;
overflow: visible !important;
}
/* 3) 2段目（本体）だけをカード化 */
body.post-type-archive-job .wp-block-post-template > li.wp-block-post > .wp-block-group.gl-card > .gl-jobcard{
background: #fff !important;
border: 0 !important;
border-radius: 16px !important;
box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
padding: 16px !important;
overflow: hidden !important;
}