/* 求人（採用ページの Recruit の一覧・求人の詳細・タグの一覧）。
   雰囲気はお問い合わせフォーム（midori-lab/forms/otoiawase/_共通/style.css）に合わせる：
   細めの字（太さ 300〜500。太字は使わない）・広い字間と行間・細い線・白と淡い地・緑 #8bb79a に白い字・英字の見出し。
   形は今のサイトと同じ四角（タグの札だけ丸い）。文字 #3b423e／補足 #6b746f／薄い字 #9b9b9b／線 #d9d9d9・#ededed／地 #f7f8f6。 */
.mj-list,.mj-wrap{--mj-ink:#3b423e;--mj-sub:#6b746f;--mj-muted:#9b9b9b;--mj-green:#8bb79a;--mj-green-d:#7dae8d;--mj-green-l:#e5efe9;--mj-line:#d9d9d9;--mj-line-soft:#ededed;--mj-soft:#f7f8f6;--mj-mark:#f5a01b;
	color:var(--mj-ink);font-weight:400;line-height:1.95;letter-spacing:.06em;text-align:left;font-size:14.5px;line-break:strict}
.mj-list *,.mj-wrap *{box-sizing:border-box}
.mj-list{max-width:760px;margin:0 auto}
.mj-wrap{max-width:760px;margin:0 auto;padding:0 20px 40px}
.mj-list a,.mj-wrap a{color:var(--mj-ink)}
.mj-list strong,.mj-wrap strong,.mj-list b,.mj-wrap b{font-weight:500}
/* 折り返しは意味の切れ目でだけ（切れ目は PHP 側で区切って .mj-p に入れてある）。長すぎるかたまりは中で折り返る */
.mj-p{display:inline-block;max-width:100%}
.mj-card__title,.mj-title,.mj-lead,.mj-gone__title,.mj-det summary,.mj-key dd,.mj-facts dd{text-wrap:balance}
.mj-det__body p,.mj-fine{text-wrap:pretty}

/* 見出し（英字＋小さい日本語。フォームの見出しと同じ作り） */
.recruit-recruitment .mj-list .mj-head,.mj-head{margin:0 0 34px;text-align:center;font-weight:400;color:var(--mj-ink)}
.mj-head__en{display:block;font-family:"Jost","Century Gothic","Avenir Next",sans-serif;font-size:clamp(30px,7vw,42px);font-weight:400;letter-spacing:.14em;line-height:1.2}
.mj-head__jp{display:block;margin-top:10px;font-size:11.5px;font-weight:400;letter-spacing:.42em;text-indent:.42em;color:var(--mj-sub)}
.mj-filter{font-size:12.5px;margin:0 0 12px;color:var(--mj-sub)}
.mj-filter a{text-decoration:underline}

/* 切り替え */
.mj-seg{display:flex;border:1px solid var(--mj-green);margin:0 0 22px}
.mj-seg button{flex:1;border:0;background:#fff;font:inherit;font-size:13.5px;font-weight:400;letter-spacing:.14em;color:var(--mj-sub);padding:12px 4px;cursor:pointer;border-radius:0;-webkit-appearance:none;appearance:none;transition:background .25s,color .25s}
.mj-seg button[aria-selected="true"]{background:var(--mj-green);color:#fff}
.mj-seg button span{font-size:11.5px;margin-left:6px;letter-spacing:.06em}

/* カード */
.mj-card{border:1px solid var(--mj-line);margin:0 0 18px;background:#fff}
.mj-card__top{background:var(--mj-green);color:#fff;padding:9px 16px;font-size:12px;font-weight:400;letter-spacing:.16em;display:flex;justify-content:space-between;gap:8px}
.mj-card__body{padding:20px 18px 18px}
.mj-card__title{font-size:clamp(15px,4.4vw,16.5px);font-weight:500;letter-spacing:.08em;margin:0 0 10px;line-height:1.7}
.mj-pay{font-size:12.5px;margin:0 0 14px;color:var(--mj-sub);letter-spacing:.1em}
.mj-num{font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.03em;color:var(--mj-ink)}
.mj-pay .mj-num{font-size:20px}
.mj-facts{margin:0 0 14px;padding:0;font-size:13px}
.mj-facts div{display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--mj-line-soft)}
.mj-facts dt{flex:0 0 3.4em;font-weight:400;font-size:11.5px;letter-spacing:.2em;color:var(--mj-muted);padding-top:.2em}
.mj-facts dd{margin:0}
.mj-facts dd small{display:block;font-size:12px;color:var(--mj-sub)}
.mj-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none}
.mj-tags li{font-size:11.5px;letter-spacing:.1em;padding:2px 12px;background:var(--mj-soft);border:1px solid var(--mj-line-soft);border-radius:999px;color:var(--mj-sub)}
.mj-tags li a{text-decoration:none;color:inherit}
.mj-empty{border:1px solid var(--mj-line-soft);background:var(--mj-soft);padding:26px 18px;text-align:center;font-size:13.5px;margin:0 0 18px}
.mj-empty .mj-btn{margin-top:14px}

/* 入職時期の札（急募はフォームの「必須」の札と同じ色） */
.mj-start{display:inline-block;font-size:11px;font-weight:400;letter-spacing:.18em;text-indent:.18em;padding:2px 10px;border:1px solid var(--mj-green);background:#fff;color:var(--mj-sub);line-height:1.8}
.mj-start--urgent{background:var(--mj-mark);border-color:var(--mj-mark);color:#fff}
.mj-card__body .mj-start{margin:0 0 10px}

/* ボタン：緑に白い字（今のサイトのボタンと同じ。角丸なし）。線だけのボタンは、触れると緑に塗られる（フォームのボタンと同じ動き） */
.mj-btn{display:block;text-align:center;text-decoration:none;font-weight:400;letter-spacing:.2em;text-indent:.2em;padding:15px 10px;font-size:14px;border-radius:0;transition:background .25s,color .25s}
.mj-list a.mj-btn--main,.mj-wrap a.mj-btn--main{background:var(--mj-green);color:#fff;border:1px solid var(--mj-green)}
.mj-list a.mj-btn--main:hover,.mj-wrap a.mj-btn--main:hover{background:var(--mj-green-d)}
.mj-list a.mj-btn--line,.mj-wrap a.mj-btn--line{border:1px solid var(--mj-green);background:#fff;color:var(--mj-sub)}
.mj-list a.mj-btn--line:hover,.mj-wrap a.mj-btn--line:hover{background:var(--mj-green);color:#fff}

/* 詳細 */
.mj-crumb{font-size:11px;letter-spacing:.1em;color:var(--mj-muted);padding:12px 0 0}
.mj-crumb a{text-decoration:underline;color:var(--mj-sub)}
.mj-badges{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 10px}
.mj-badge{font-size:11px;font-weight:400;letter-spacing:.14em;padding:2px 10px;border:1px solid var(--mj-line);color:var(--mj-sub);line-height:1.8}
.mj-badge--solid{background:var(--mj-green);border-color:var(--mj-green);color:#fff}
.mj-title{font-size:clamp(17px,5vw,21px);line-height:1.75;margin:0 0 8px;font-weight:500;letter-spacing:.1em}
.mj-lead{font-size:13.5px;font-weight:300;line-height:2.1;color:var(--mj-sub);margin:0 0 22px}
.mj-key{border-top:1px solid var(--mj-line);margin:0 0 18px;padding:0}
.mj-key>div{display:flex;gap:6px;border-bottom:1px solid var(--mj-line-soft);padding:13px 2px}
.mj-key>div:last-child{border-bottom-color:var(--mj-line)}
.mj-key dt{flex:0 0 6.4em;font-weight:400;font-size:11.5px;letter-spacing:.2em;color:var(--mj-muted);padding-top:.35em;white-space:nowrap}
.mj-key dd{margin:0;font-size:clamp(13.5px,3.9vw,14.5px);flex:1;min-width:0;overflow-wrap:anywhere}
.mj-key dd small{display:block;font-size:12px;color:var(--mj-sub);letter-spacing:.04em}
.mj-key dd small.mj-thin{font-size:11px;font-weight:300;color:var(--mj-muted);letter-spacing:.04em;line-height:1.8;margin-top:2px;text-wrap:balance}
.mj-key .mj-num,.mj-nowrap{white-space:nowrap}
.mj-key .mj-num{font-size:16px}
.mj-cta{margin:22px 0 8px}
.mj-cta small{display:block;text-align:center;font-size:11.5px;color:var(--mj-muted);margin-top:8px;letter-spacing:.1em}
.mj-cta--last{margin-top:30px}
.mj-hsec{font-size:11.5px;letter-spacing:.3em;color:var(--mj-sub);font-weight:400;margin:38px 0 12px;padding:0 0 12px;border-bottom:1px solid var(--mj-line)}
.mj-det{border-bottom:1px solid var(--mj-line-soft)}
.mj-det summary{list-style:none;cursor:pointer;padding:17px 30px 17px 2px;font-weight:400;font-size:14px;letter-spacing:.12em;position:relative}
.mj-det summary::-webkit-details-marker{display:none}
.mj-det summary::after{content:"";position:absolute;right:8px;top:50%;width:8px;height:8px;border-right:1px solid var(--mj-green);border-bottom:1px solid var(--mj-green);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.mj-det[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.mj-det[open] summary{color:var(--mj-green-d)}
/* 中身が万一はみ出しても、ページ全体を横に広げない（この箱の中で横にスクロールさせる） */
.mj-det__body{padding:0 2px 22px;font-size:13.5px;overflow-wrap:anywhere;overflow-x:auto;color:var(--mj-ink)}
.mj-det__body p{margin:0 0 12px}
/* サイト本体の CSS が箇条書きの点を消しているので、ここで付け直す */
.mj-det__body ul,.mj-det__body ol{margin:0 0 12px;padding-left:1.3em}
.mj-det__body ul>li{list-style:disc outside}
.mj-det__body ol>li{list-style:decimal outside}
.mj-det__body li::marker{color:var(--mj-green)}
.mj-det__body p.mj-row{margin:0 0 2px;padding-left:.2em;font-variant-numeric:tabular-nums}
.mj-det__body p.mj-row+p:not(.mj-row){margin-top:10px}
.mj-det__body a{text-decoration:underline}
.mj-fine{font-size:12px;font-weight:300;line-height:2;color:var(--mj-sub)}
.mj-links{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--mj-line-soft)}
.mj-links li{border-bottom:1px solid var(--mj-line-soft)}
.mj-links a{display:block;padding:13px 22px 13px 2px;font-size:13px;letter-spacing:.1em;text-decoration:none;position:relative}
.mj-links a::after{content:"";position:absolute;right:8px;top:50%;width:7px;height:7px;border-right:1px solid var(--mj-green);border-top:1px solid var(--mj-green);transform:translateY(-50%) rotate(45deg)}
.mj-list--inner{max-width:none}
.mj-back{text-align:center;font-size:12px;letter-spacing:.1em;margin:14px 0 0}
.mj-back a{color:var(--mj-sub)}

/* 給与の表：右そろえ・等幅数字。「〜」に専用の幅を取り、「円」の位置を縦にそろえる */
.mj-paytbl{width:100%;border-collapse:collapse;margin:4px 0 14px;font-size:13.5px}
.mj-paytbl caption{text-align:left;font-weight:500;font-size:12.5px;letter-spacing:.16em;padding:8px 0;color:var(--mj-sub)}
.mj-paytbl th{font-weight:400;text-align:left;padding:9px 4px;border-top:1px solid var(--mj-line-soft);background:none;color:var(--mj-sub)}
.mj-paytbl td{text-align:right;padding:9px 4px;border-top:1px solid var(--mj-line-soft);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.03em}
.mj-paytbl .mj-t{display:inline-block;width:1em;text-align:left}
.mj-paytbl tr.mj-sum th,.mj-paytbl tr.mj-sum td{border-top:1px solid var(--mj-green);border-bottom:1px solid var(--mj-green);font-weight:500;font-size:14.5px;background:var(--mj-soft);color:var(--mj-ink)}
/* 金額と文が混ざる表（想定年収など） */
.mj-paytbl--mixed{font-size:13px}
.mj-paytbl--mixed td{white-space:nowrap;vertical-align:top}
.mj-paytbl--mixed th{vertical-align:top}
.mj-paytbl--mixed th small{display:block;font-size:11px;color:var(--mj-muted);font-weight:400}
.mj-paytbl--text td{text-align:left;white-space:normal;letter-spacing:.06em}
.mj-paytbl--text th{white-space:nowrap;width:6.5em}

/* 停止後 */
.mj-gone{padding:44px 6px 10px;text-align:center}
.mj-gone__pill{display:inline-block;border:1px solid var(--mj-line);color:var(--mj-sub);font-size:11px;font-weight:400;padding:3px 16px;margin-bottom:18px;letter-spacing:.24em;text-indent:.24em}
.mj-gone__title{font-size:16px;margin:0 0 12px;font-weight:500;letter-spacing:.12em}
.mj-gone p{font-size:13px;font-weight:300;color:var(--mj-sub);margin:0 0 24px}
.mj-stack{display:grid;gap:10px;max-width:420px;margin:0 auto}

/* 下に固定の応募バー（スマホだけ）。右下の reCAPTCHA のマークはバーの上へずらす */
.mj-bar{display:none}
@media (max-width:768px){
	.mj-bar{display:flex;position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);border-top:1px solid var(--mj-line-soft);padding:9px 14px;gap:8px;z-index:50}
	.mj-bar .mj-btn{flex:1;padding:11px 6px;font-size:13px;letter-spacing:.14em;text-indent:.14em}
	.mj-page{padding-bottom:70px}
	body:has(.mj-bar) .grecaptcha-badge{bottom:76px !important}
}
@media (min-width:769px){
	.mj-list,.mj-wrap{font-size:15px}
	.mj-key dt{flex-basis:8em}
	.mj-card__body{padding:24px 26px 22px}
}

/* 採用ページの Question（よくきかれること）。開閉（accordion）は元のまま。
   答え（A と文）は問いより一段下げ、※の但し書き・写真・説明も答えの文の始まりにそろえる */
.recruitWrap08 .inin .flexWrap .rightBox .inRight ul.rq-qa>li .faq_answer{margin-left:3rem}
.recruitWrap08 .inin .flexWrap .rightBox .inRight ul.rq-qa>li .faq_answer small{display:block;margin-top:1rem;font-size:.72em;line-height:1.8;letter-spacing:.08em;color:#6b726e}
/* 休憩スペースの写真：小さく並べて、押すと大きく見られる。「タップすると…」の一言は、3枚の上・中央に薄いグレーで */
.recruitWrap08 .inin .flexWrap .rightBox .inRight ul.rq-qa>li .faq_answer p.rq-tight{padding-bottom:1.4rem}
.rq-photobox{margin:0 3rem 1.2rem 4.5rem;max-width:44rem}
.rq-photos__tap{text-align:center;font-size:.62em;line-height:1.8;letter-spacing:.08em;color:#a3a9a5;margin:0 0 .6rem}
.rq-photos{display:flex;gap:1rem}
.rq-photos a{display:block;flex:1 1 0;max-width:14rem;aspect-ratio:4/3;overflow:hidden;background:#f7f8f6;cursor:zoom-in}
.rq-photos img{width:100%;height:100%;object-fit:cover;display:block}
.rq-photos__note{padding:0 3rem 3rem 4.5rem;font-size:.62em;line-height:1.8;letter-spacing:.08em;color:#6b726e}
@media (max-width:768px){
	.rq-photobox{margin:0 1rem 1.2rem 4.5rem}
	.rq-photos{gap:.6rem}
	.rq-photos a{max-width:none}
	.rq-photos__note{padding:0 1rem 3rem 4.5rem}
	/* 上の3つのボタン：3つめが「リクルート」（5文字）になって、スマホ幅で2段に割れたので、左右の余白を詰めて1段に収める */
	.recruitLinkMenuWrap .inin ul{white-space:nowrap}
	.recruitLinkMenuWrap .inin ul li{margin:0 .6rem}
	.recruitLinkMenuWrap .inin ul li a{padding:2rem 2.2rem}
}
.rq-lb{position:fixed;inset:0;z-index:100000;background:rgba(20,24,22,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.rq-lb[hidden]{display:none}
.rq-lb img{max-width:100%;max-height:80vh;width:auto;height:auto;display:block}
.rq-lb p{color:#fff;font-size:13px;font-weight:300;letter-spacing:.08em;line-height:1.8;margin:14px 0 0;max-width:40em;text-align:center}
.rq-lb button{position:absolute;top:10px;right:12px;width:44px;height:44px;border:0;background:none;color:#fff;font-size:30px;line-height:1;cursor:pointer}