@charset "utf-8";
/* mio-meet-b.css｜職種紹介・社員インタビュー（一覧・01）の改変（meet.css・mio.css・mio-lower.css の上に重ねる）
   文字の仕様はベースのまま：既存の部品の font-size・font-weight・letter-spacing・line-height・font-family は上書きしない。
   新しい部品の文字はベースの段（45/40/32/29/25/24/23/20/19/18/17/15/14/13/12）と太さ 500・700 から選ぶ。 */

/* ========== 共通の小物 ========== */
.mb-label { margin: 0 0 12px 0; font-size: 13px; letter-spacing: 0.14em; color: var(--main); }
.mb-intro { font-size: 15px; line-height: 1.8; }
.mb-illust { display: block; height: auto; }
/* 角丸を残さない・拡大の hover をしない（澪の形） */
.mb-job img, .mb-interviews img, .mb-article img { border-radius: 0; }

/* ======================================================================
   職種紹介（/meet/job/）
   ====================================================================== */
.mb-job { padding: 0; }
.mb-job [id] { scroll-margin-top: 90px; }

/* 目次：燕尾の札を横に並べる（A-053） */
.mb-toc { padding: 0 0 70px 0; background: #fff; }
.mb-toc ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mb-toc li a { display: flex; align-items: baseline; gap: 10px; padding: 16px 40px 16px 20px; background: var(--ground); color: var(--ink); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); transition: background-color 0.3s ease, color 0.3s ease; }
.mb-toc li .no { font-size: 20px; color: var(--main); }
.mb-toc li .nm { font-size: 18px; }
.mb-toc li .ct { font-size: 12px; font-weight: 500; color: #676c6e; }
.mb-toc li.sub a { background: transparent; padding-left: 12px; padding-right: 12px; }
.mb-toc li.sub a::before { content: ""; align-self: center; width: 9px; height: 9px; background: var(--main); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mb-toc li.sub .nm { font-size: 15px; }
.os-pc .mb-toc li a:hover { background: var(--ink); color: #fff; }
.os-pc .mb-toc li a:hover .no, .os-pc .mb-toc li a:hover .ct { color: #fff; }
.os-pc .mb-toc li.sub a:hover { background: transparent; color: var(--main); }

/* 専攻の表：画像の表を HTML に。印は信号旗の四角（主）と三角（副） */
.mb-job .category { padding: 110px 0 120px 0; }
.mb-job .category .cmn-nav-tab { margin: 46px 0 20px 0; }
.mb-job .category .cmn-nav-tab ul li a { clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); overflow: visible; }
.mb-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 22px 0; font-size: 14px; }
.mb-legend span { display: inline-flex; align-items: center; gap: 8px; }
.mk { position: relative; display: inline-block; vertical-align: middle; }
.mk b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mk1 { width: 18px; height: 18px; background: var(--main); clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }
.mk2 { width: 15px; height: 14px; background: var(--sub); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mb-matrix { width: 100%; max-width: 1000px; margin: 0 auto; border-collapse: collapse; background: #fff; }
.mb-matrix th, .mb-matrix td { border: 1px solid #dcdfdf; text-align: center; vertical-align: middle; }
.mb-matrix thead th { padding: 16px 4px 14px 4px; vertical-align: bottom; font-size: 15px; line-height: 1.3; }
.mb-matrix thead th span { display: inline-block; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0.06em; }
.mb-matrix thead tr:not(.grp) th:not(.corner) { writing-mode: vertical-rl; text-orientation: upright; text-align: end; vertical-align: middle; white-space: nowrap; }
.mb-matrix thead th.g1 { box-shadow: inset 0 5px 0 var(--main); }
.mb-matrix thead th.g2 { box-shadow: inset 0 5px 0 var(--sub); }
.mb-matrix thead th.g3 { box-shadow: inset 0 5px 0 #4f8f92; }
.mb-matrix thead th.g4 { box-shadow: inset 0 5px 0 var(--main); }
.mb-matrix thead tr.grp th { padding: 8px 4px; vertical-align: middle; font-size: 14px; color: #fff; box-shadow: none; }
.mb-matrix thead tr.grp th.g1 { background: var(--main); }
.mb-matrix thead tr.grp th.g2 { background: var(--sub); }
.mb-matrix thead tr.grp th.g3 { background: #4f8f92; }
.mb-matrix thead tr.grp th.corner-top { background: var(--ground); border-bottom-color: var(--ground); }
.mb-matrix thead th.corner { width: 132px; padding: 14px 12px; vertical-align: middle; font-size: 12px; font-weight: 500; color: #676c6e; background: var(--ground); }
.mb-matrix tbody th { padding: 14px 16px; text-align: left; white-space: nowrap; font-size: 15px; background: var(--ground); }
.mb-matrix td { height: 54px; }
.mb-matrix-s { max-width: 700px; }

/* 一隻ができるまで：墨の帯に燕尾の工程札（動画の3枚をやめた見せ場） */
.mb-process { position: relative; overflow: hidden; padding: 110px 0 140px 0; background: var(--sub); color: #fff; }
.mb-process .container { z-index: 1; }
.mb-process .mb-label { color: #9cc9cb; }
.mb-process h2 { font-size: 40px; line-height: 1.3; }
.mb-process .mb-intro { margin: 18px 0 0 0; font-size: 17px; }
.mb-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 46px 0; margin: 56px 0 0 0; }
.mb-steps li { padding: 0 22px 0 0; }
.mb-steps .no { display: flex; align-items: center; height: 46px; padding: 0 0 0 22px; font-size: 20px; color: #fff; background: var(--main); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 16px 50%); margin-right: -22px; }
.mb-steps li:nth-child(4n+1) .no { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
.mb-steps li:nth-child(even) .no { background: #0c6266; }
.mb-steps .st { display: block; margin: 18px 0 12px 0; font-size: 19px; line-height: 1.4; }
.mb-steps .jobs a { position: relative; display: block; padding: 7px 0 7px 16px; font-size: 14px; line-height: 1.5; color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.16); transition: color 0.3s ease; }
.mb-steps .jobs a::before { content: ""; position: absolute; top: 50%; left: 0; width: 7px; height: 8px; margin: -4px 0 0 0; background: #9cc9cb; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.os-pc .mb-steps .jobs a:hover { color: #9cc9cb; }
.mb-process .note { margin: 50px 0 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.72); }
.mb-process .mb-wake { position: absolute; left: 0; bottom: 26px; width: 100%; height: 70px; opacity: 0.5; pointer-events: none; }

/* 系統のセクション：地の色を交互に（区切りは地の色の1種類・A-006） */
.mb-job .mb-cat { padding: 110px 0 120px 0; }
.mb-job .mb-cat-b, .mb-job .mb-cat-d { background: #fff; }
.mb-job .mb-cat .cmn-heading-frontline { margin: 0 0 18px 0; }
.mb-job .mb-cat .head h3 .en { margin-left: 4px; color: var(--main); }
.mb-job .mb-cat .head h4 em { margin: 0; }
.mb-job .mb-jobs { border-bottom: 1px solid #1d2326; }

/* 01 設計系：左に止まる欄、右に職種 */
.mb-cat-row { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; align-items: start; }
.mb-side { position: sticky; top: 120px; }
.mb-side .mb-illust { width: 230px; margin: 34px 0 0 -6px; transform: rotate(-4deg); }
.mb-job .section .mb-cat-row .head { flex-basis: 240px; flex-shrink: 0; }

/* 02 生産系：写真の帯に見出しを載せ、職種は2列 */
.mb-band { position: relative; height: 460px; margin: -110px 0 70px 0; overflow: hidden; color: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), calc(100% - 56px) 100%, 0 100%); background: #dcdfdf; }
.mb-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mb-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 35, 38, 0.5), rgba(29, 35, 38, 0.1) 70%); }
.mb-band .container { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 1; }
.mb-band .mb-label { color: #fff; }
.mb-band .cmn-heading-frontline h2 { color: #fff; }
.mb-job .section .mb-grid2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; border-bottom: 0 !important; }
.mb-job .section .mb-grid2 .block-inner { display: block; padding: 30px 0 40px 0; }
.mb-job .section .mb-grid2 .head { padding: 0 0 14px 0; }
.mb-job .section .mb-grid2 .detail { padding: 18px 0 0 0; border-left: 0; border-top: 1px solid rgba(0, 0, 0, 0.2); }
.mb-job .section .mb-grid2 .block::before { height: 3px; background-color: var(--main); width: 72px; }

/* 03 艤装・海洋系：止まる欄を右に、写真と切り紙を重ねる */
.mb-cat-c .mb-cat-row { grid-template-columns: minmax(0, 1fr) 320px; }
.mb-cat-c .mb-side { order: 2; }
.mb-side-photo { position: relative; margin: 30px 0 0 0; }
.mb-side-photo > img:first-child { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; clip-path: var(--cut); background: #dcdfdf; }
.mb-side-photo .mb-illust { position: absolute; left: -44px; bottom: -36px; width: 150px; margin: 0; transform: rotate(6deg); }

/* 04 営業・管理系：見出しを中央に、職種は横の行 */
.mb-cat-head { margin: 0 0 54px 0; text-align: center; }
.mb-cat-head .mb-illust { width: 150px; margin: 0 auto 24px auto; transform: rotate(-3deg); }
.mb-cat-head .mb-intro { margin: 18px 0 0 0; }
.mb-rows .head .en { font-size: 15px; }

/* 先輩の札：角を落とした白い札・拡大しない */
.mb-job .section .interview .link { border-radius: var(--r-card); clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); padding: 10px 18px 10px 10px; }
.mb-job .mb-cat-b .interview .link, .mb-job .mb-cat-d .interview .link { background: var(--ground); }
.mb-job .section .interview .link .portrait { flex: none; }
.mb-job .section .interview .link .portrait img { display: block; width: 80px; aspect-ratio: 4 / 5; object-fit: cover; }
.mb-job .interview .who { display: block; width: 132px; padding: 0 10px 0 16px; text-align: left; }
.mb-job .interview .who .name { display: block; font-size: 18px; line-height: 1.4; }
.mb-job .interview .who .year { display: block; font-size: 12px; font-weight: 500; color: #676c6e; }
.mb-job .interview .arrow { color: var(--main); }
.os-pc .mb-job .section .interview .link:hover .portrait img { transform: none; }
.os-pc .mb-job .section .interview .link { transition: background-color 0.3s ease; }
.os-pc .mb-job .section .interview .link:hover { background: var(--ink); color: #fff; }
.os-pc .mb-job .section .interview .link:hover .year { color: #fff; }

@media screen and (max-width: 1100px) {
	.mb-cat-row { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
	.mb-cat-c .mb-cat-row { grid-template-columns: minmax(0, 1fr) 260px; }
	.mb-side .mb-illust { width: 190px; }
	.mb-job .section .mb-cat-row .block-inner { display: block; }
	.mb-job .section .mb-cat-row .head { padding: 0 0 14px 0; }
	.mb-job .section .mb-cat-row .detail { padding: 18px 0 0 0; border-left: 0; border-top: 1px solid rgba(0, 0, 0, 0.2); }
}
@media screen and (max-width: 979px) {
	.mb-steps { grid-template-columns: repeat(2, 1fr); }
	.mb-steps li:nth-child(odd) .no { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
	.mb-steps li:nth-child(even) .no { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 16px 50%); }
	.mb-job .section .mb-grid2 { grid-template-columns: 1fr; }
	.mb-cat-row, .mb-cat-c .mb-cat-row { grid-template-columns: 1fr; gap: 30px; }
	.mb-cat-c .mb-side { order: 0; }
	.mb-side { position: static; }
	.mb-side-photo { max-width: 360px; }
}
@media screen and (max-width: 767px) {
	.mb-job [id] { scroll-margin-top: 70px; }
	.mb-toc { padding: 0 20px 40px 20px; }
	.mb-toc ul { gap: 8px; justify-content: flex-start; }
	.mb-toc li { flex: 0 0 calc(50% - 4px); }
	.mb-toc li a { padding: 12px 22px 12px 12px; gap: 6px; flex-wrap: wrap; height: 100%; }
	.mb-toc li .no { font-size: 15px; }
	.mb-toc li .nm { font-size: 15px; }
	.mb-toc li.sub a { padding: 8px 4px; }
	.mb-toc li.sub .nm { font-size: 14px; }
	.mb-job .category { padding: 60px 0 70px 0; }
	.mb-job .category .cmn-nav-tab { margin: 26px 0 14px 0; }
	.mb-legend { gap: 6px 18px; margin: 0 0 12px 0; font-size: 13px; }
	.mb-matrix { width: 760px; max-width: none; }
	.mb-matrix-s { width: 480px; }
	.mb-matrix thead th { font-size: 14px; }
	.mb-matrix tbody th { padding: 12px 10px; font-size: 14px; }
	.mb-matrix thead th.corner { width: 96px; }
	.mb-matrix td { height: 46px; }
	.mb-process { padding: 64px 0 90px 0; }
	.mb-process h2 { font-size: 26px; }
	.mb-process .mb-intro { font-size: 15px; }
	.mb-steps { grid-template-columns: 1fr; gap: 0; margin: 34px 0 0 0; }
	.mb-steps li { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
	.mb-steps .no, .mb-steps li:nth-child(odd) .no, .mb-steps li:nth-child(even) .no { grid-row: 1 / span 2; height: 38px; margin: 0; padding: 0 0 0 12px; font-size: 15px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); }
	.mb-steps .st { margin: 0 0 4px 0; font-size: 16px; }
	.mb-steps .jobs { display: flex; flex-wrap: wrap; gap: 0 16px; }
	.mb-steps .jobs a { border-top: 0; padding: 2px 0 2px 13px; font-size: 13px; }
	.mb-process .note { margin: 26px 0 0 0; }
	.mb-process .mb-wake { height: 40px; bottom: 16px; }
	.mb-job .mb-cat { padding: 60px 0 70px 0; }
	.mb-band { height: 300px; margin: -60px 0 30px 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), calc(100% - 6vw) 100%, 0 100%); }
	.mb-band .container { bottom: 30px; }
	.mb-side .mb-illust { width: 150px; margin: 20px 0 0 0; }
	.mb-side-photo { margin: 22px 0 10px 0; max-width: 78%; }
	.mb-side-photo .mb-illust { left: auto; right: -21vw; bottom: 10px; width: 19vw; }
	.mb-cat-head { margin: 0 0 30px 0; }
	.mb-cat-head .mb-illust { width: 110px; }
	.mb-job .interview .who { flex: 1; width: auto; }
}

/* ======================================================================
   社員インタビュー一覧（/meet/interviews/）
   ====================================================================== */
.mb-interviews { padding: 0; }
.mb-interviews .index { padding: 70px 0 110px 0; }

/* 系統で絞り込む：燕尾の札のボタン */
.mb-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 54px 0; }
.mb-filter button { display: inline-flex; align-items: baseline; gap: 8px; padding: 13px 34px 13px 18px; border: 0; background: #fff; color: var(--ink); font-family: var(--font-ja); font-size: 15px; font-weight: 700; line-height: 1.3; cursor: pointer; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); transition: background-color 0.3s ease, color 0.3s ease; }
.mb-filter button .en { color: var(--main); }
.mb-filter button.current { background: var(--ink); color: #fff; }
.mb-filter button.current .en { color: #9cc9cb; }
.os-pc .mb-filter button:hover { background: var(--ink); color: #fff; }

/* 1人目を大きく（見せ場） */
.mb-feature { position: relative; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: stretch; margin: 0 0 90px 0; background: #fff; color: var(--ink); clip-path: var(--cut); }
.mb-feature-photo { display: block; background: #dcdfdf; }
.mb-feature-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mb-feature-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 26px; padding: 64px 64px 64px 60px; }
.mb-tag { display: inline-block; padding: 7px 26px 7px 12px; font-size: 14px; line-height: 1.3; color: #fff; background: var(--main); clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%); }
.mb-feature-quote { display: block; font-size: 40px; line-height: 1.4; }
.mb-feature-name { display: block; }
.mb-feature-name b { display: block; font-size: 23px; line-height: 1.4; }
.mb-feature-name span { display: block; font-size: 14px; color: #676c6e; }
.mb-more { display: inline-flex; align-items: center; gap: 10px; padding: 14px 40px 14px 20px; font-size: 15px; color: #fff; background: var(--ink); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); transition: background-color 0.3s ease; }
.os-pc .mb-feature:hover .mb-more { background: var(--main); }

/* 一覧：4列で互い違い・角を落とした札 */
.mb-interviews .index .list { margin: 0; }
.mb-interviews .index .list ul { margin: 0 -12px; padding: 0 0 56px 0; }
.mb-interviews .index .list li { flex-basis: 25%; margin: 0 0 36px 0; padding: 0 12px; }
.mb-interviews .index .list:not(.is-filtered) li:nth-child(4n+2), .mb-interviews .index .list:not(.is-filtered) li:nth-child(4n+4) { transform: translateY(56px); }
.mb-interviews .index .list a { position: relative; height: 100%; border-radius: var(--r-card); clip-path: var(--cut-sm); }
.mb-interviews .index .list .portrait { border-radius: var(--r-img); background: #dcdfdf; }
.mb-interviews .index .list .portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mb-interviews .index .list .portrait::after { content: ""; position: absolute; top: 0; right: 0; width: 46px; height: 34px; background: var(--main); clip-path: polygon(0 0, 100% 0, 100% 100%, 72% 50%); transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mb-interviews .index .list .head { padding: 18px 20px 20px 20px; }
.mb-interviews .index .list .catch { display: block; margin: 8px 0 14px 0; font-size: 15px; line-height: 1.7; font-weight: 500; }
.mb-interviews .index .list .initial { padding: 12px 0 0 0; border-top: 1px solid #dcdfdf; }
.os-pc .mb-interviews .index .list a:hover .portrait img { transform: none; }
.os-pc .mb-interviews .index .list a:hover .portrait::after { transform: none; }
.mb-interviews .index .list li.is-hidden, .mb-feature.is-hidden { display: none; }

/* 次のページへの入口：2枚を同じ仕様で（B-004） */
.mb-next { padding: 100px 0 120px 0; background: #fff; }
.mb-next-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.mb-next-card { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 7; color: #fff; background: #dcdfdf; clip-path: var(--cut); }
.mb-next-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mb-next-card::after { content: ""; position: absolute; inset: 0; background: rgba(29, 35, 38, 0.42); transition: background-color 0.3s ease; }
.mb-next-body { position: absolute; left: 36px; right: 36px; bottom: 30px; z-index: 1; display: block; }
.mb-next-body .en { display: block; }
.mb-next-body b { display: block; margin: 4px 0 6px 0; font-size: 29px; line-height: 1.3; }
.mb-next-txt { display: block; font-size: 15px; line-height: 1.6; }
.mb-next-card .mb-next-body::after { content: ""; position: absolute; right: 0; bottom: 6px; width: 34px; height: 24px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%, 34% 50%); }
.os-pc .mb-next-card:hover::after { background: rgba(15, 117, 121, 0.55); }

@media screen and (max-width: 979px) {
	.mb-feature-quote { font-size: 32px; }
	.mb-feature-body { padding: 40px; }
	.mb-interviews .index .list li { flex-basis: 50%; }
	.mb-interviews .index .list:not(.is-filtered) li:nth-child(4n+2), .mb-interviews .index .list:not(.is-filtered) li:nth-child(4n+4) { transform: none; }
	.mb-interviews .index .list:not(.is-filtered) li:nth-child(even) { transform: translateY(40px); }
}
@media screen and (max-width: 767px) {
	.mb-interviews .index { padding: 34px 0 70px 0; }
	.mb-filter { justify-content: flex-start; gap: 6px; margin: 0 0 30px 0; }
	.mb-filter button { padding: 10px 26px 10px 12px; font-size: 14px; }
	.mb-feature { grid-template-columns: 1fr; margin: 0 0 50px 0; clip-path: var(--cut-sp); }
	.mb-feature-photo img { aspect-ratio: 4 / 4; }
	.mb-feature-body { gap: 16px; padding: 26px 22px 30px 22px; }
	.mb-feature-quote { font-size: 25px; }
	.mb-feature-name b { font-size: 20px; }
	.mb-feature-name span { font-size: 12px; }
	.mb-more { font-size: 14px; }
	.mb-interviews .index .list ul { display: flex; margin: 0 -6px; padding: 0 0 30px 0; }
	.mb-interviews .index .list li { flex-basis: 50%; margin: 0 0 14px 0; padding: 0 6px; }
	.mb-interviews .index .list:not(.is-filtered) li:nth-child(even) { transform: translateY(30px); }
	.mb-interviews .index .list .head { padding: 12px 12px 14px 12px; }
	.mb-interviews .index .list .catch { margin: 6px 0 10px 0; font-size: 12px; line-height: 1.6; }
	.mb-interviews .index .list .initial .normal { display: block; }
	.mb-interviews .index .list .initial { padding: 8px 0 0 0; }
	.mb-next { padding: 60px 0 70px 0; }
	.mb-next-row { grid-template-columns: 1fr; gap: 14px; }
	.mb-next-card { aspect-ratio: 16 / 9; clip-path: var(--cut-sp); }
	.mb-next-body { left: 22px; right: 22px; bottom: 20px; }
	.mb-next-body b { font-size: 23px; }
	.mb-next-txt { font-size: 13px; }
}

/* ======================================================================
   インタビュー01（/meet/interviews/01/）
   ====================================================================== */
/* 冒頭：画面幅の写真に、角を落とした青緑の札と墨の燕尾旗 */
.mb-article .main .portrait { background: #dcdfdf; }
.mb-article .main .portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; opacity: 0; transform: scale(1.06); transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1), opacity 1s linear; }
.mb-article .main.active .portrait img { opacity: 1; transform: none; }
.mb-article .main::after { content: ""; position: absolute; inset: 0 0 0 0; background: linear-gradient(90deg, rgba(29, 35, 38, 0.32), rgba(29, 35, 38, 0) 55%); pointer-events: none; }
.mb-article.c-interview01 .main .container { flex-direction: row; position: relative; z-index: 1; }
.mb-article .main .heading .base { background: var(--main); clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%, 0 44px); }
.mb-article .main .heading h3 { left: -26px; bottom: -40px; }
.mb-article .main .heading h3 span { padding: 0 64px 0 44px; color: #fff; background: var(--sub); clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 50%, 100% 100%, 0 100%); }

/* Why MIO?：画面幅の地の帯（B-047） */
.mb-article .why { padding: 80px 0; background: var(--ground); }
.mb-article .why .container::before, .mb-article .why .container::after { display: none; }
.mb-article .why h2 > span::after { content: ""; display: block; width: 64px; height: 10px; margin: 14px auto 0 auto; background: url('/demos/mio-recruit/assets/svg/ornament-line.svg') center / 100% 100% no-repeat; }

/* Q&A の写真は画面の端まで（B-047） */
.mb-article .section .image-in { background: #dcdfdf; }
.mb-article .section .image-in img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mb-article .section01 .image-in { clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%, 0 56px); }
.mb-article .section02 { position: relative; min-height: 530px; }
.mb-article .section02 .container { position: static; }
.mb-article .section02 .row { justify-content: flex-start; }
.mb-article .section02 .detail { flex: 0 0 530px; margin-left: auto; }
.mb-article .section02 .image { position: absolute; top: 0; left: 0; right: 50%; padding: 0 50px 0 0; }
.mb-article .section02 .image .image-in { max-width: 795px; margin-left: auto; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), calc(100% - 56px) 100%, 0 100%); }

/* 私の航跡：喫水標の目盛り */
.mb-article .story h2 { padding-left: 74px; }
.mb-article .story h2::before { top: 50%; left: 0; width: 58px; height: 58px; margin-top: -32px; background: url('/demos/mio-recruit/assets/svg/meet-b-story.svg') center / contain no-repeat; }
.mb-article .story .row { gap: 70px; align-items: flex-start; }
.mb-article .story .image { flex: 0 0 40%; }
.mb-draft { list-style: none; position: relative; background: var(--sub); color: #fff; clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px); }
.mb-draft li { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 20px 26px 20px 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.mb-draft li::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 4px; margin-top: -2px; background: #fff; }
.mb-draft .yr { font-size: 24px; line-height: 1.2; }
.mb-draft .tx { font-size: 15px; line-height: 1.6; font-weight: 500; }
.mb-draft li.hl { background: var(--main); }
.mb-draft::after { content: ""; display: block; height: 16px; background: repeating-linear-gradient(90deg, var(--main) 0 28px, #0c6266 28px 56px); }

/* 2つの Q&A：右を下げて互い違いに */
.mb-article .section03 .block:nth-child(2) { padding-top: 70px; }
.mb-article .section03 .block .head { padding: 18px 0 0 0; border-top: 3px solid var(--main); }
.mb-article .section03 .block-full { flex-basis: calc(100% - 100px); margin: 90px 50px 0 50px; padding: 52px 56px; background: var(--ground); clip-path: var(--cut); }

/* 2枚の写真：不揃いの幅と高さ */
.mb-article .images { align-items: flex-start; }
.mb-article .images > div { background: #dcdfdf; }
.mb-article .images > div:first-child { flex-basis: 58%; }
.mb-article .images > div:last-child { flex-basis: 42%; margin-top: 90px; clip-path: polygon(0 0, 100% 0, 100% 100%, 56px 100%, 0 calc(100% - 56px)); }
.mb-article .images > div img { width: 100%; height: 500px; object-fit: cover; }
.mb-article .images > div:last-child img { height: 410px; }

/* ある1日：角を落とした札・燕尾の矢印 */
.mb-article .schedule .head h2::before { background: url('/demos/mio-recruit/assets/svg/meet-b-clock.svg') center / contain no-repeat; }
.mb-article .schedule .list .frame { border-radius: var(--r-card); clip-path: var(--cut-sm); }
.mb-article .schedule .ctr a { width: 58px; height: 46px; border: 0; border-radius: var(--r-btn); color: #fff; background: var(--ink); }
.mb-article .schedule .ctr .prev a, .mb-article .schedule .ctr a.prev { clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
.mb-article .schedule .ctr a.next { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.os-pc .mb-article .schedule .ctr a:hover { background: var(--main); color: #fff; }
.os-pc .mb-article .schedule .ctr a.disabled:hover { background: var(--ink); color: #fff; }
.mb-article .pager .top a::before { background: url('/demos/mio-recruit/assets/svg/meet-b-list.svg') center / contain no-repeat; }

@media screen and (max-width: 1210px) {
	.mb-article .section02 .detail { flex: 0 0 50%; padding: 0 20px 0 25px; }
}
@media screen and (max-width: 979px) {
	.mb-article .main .container { position: absolute; }
	.mb-article .main .heading h3 { left: 0; bottom: -30px; }
	.mb-article .section02 { min-height: 0; }
	.mb-article .section02 .detail { margin-left: 0; padding: 0; }
	.mb-article .section02 .image { position: static; padding: 0; max-width: none; }
	.mb-article .section02 .image .image-in { max-width: none; aspect-ratio: 1 / 1; }
	.mb-article .section01 .image .image-in { aspect-ratio: 3 / 2; }
	.mb-article .story .row { display: flex; flex-direction: column-reverse; gap: 30px; }
	.mb-article .story .image { flex: none; width: 100%; max-width: none; margin: 0; }
	.mb-article .section03 .block:nth-child(2) { padding-top: 0; }
	.mb-article .section03 .block-full { margin: 50px 0 0 0; padding: 36px 30px; }
}
@media screen and (max-width: 767px) {
	.mb-article .main::after { display: none; }
	.mb-article .main .container { position: relative; }
	.mb-article .main .heading .base { clip-path: polygon(7vw 0, 100% 0, 100% 100%, 0 100%, 0 7vw); }
	.mb-article .main .heading h3 { left: 0; bottom: -4vw; }
	.mb-article .main .heading h3 span { padding: 0 11vw 0 7vw; clip-path: polygon(0 0, 100% 0, calc(100% - 5vw) 50%, 100% 100%, 0 100%); }
	.mb-article .main { margin-bottom: 50px; }
	.mb-article .why { padding: 50px 0; }
	.mb-article .section01 .image-in { clip-path: polygon(8vw 0, 100% 0, 100% 100%, 0 100%, 0 8vw); }
	.mb-article .section02 .detail { padding: 0 25px; }
	.mb-article .section02 .image .image-in { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8vw), calc(100% - 8vw) 100%, 0 100%); }
	.mb-article .story h2 { padding-left: 56px; }
	.mb-article .story h2::before { width: 44px; height: 44px; margin-top: -24px; }
	.mb-draft { clip-path: polygon(5vw 0, 100% 0, 100% 100%, 0 100%, 0 5vw); }
	.mb-draft li { grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 14px 16px 14px 22px; }
	.mb-draft .yr { font-size: 18px; }
	.mb-draft .tx { font-size: 14px; }
	.mb-article .section03 .block-full { padding: 28px 22px; clip-path: var(--cut-sp); }
	.mb-article .images { display: block; }
	.mb-article .images > div:last-child { width: 82%; margin: 14px 0 0 auto; clip-path: polygon(0 0, 100% 0, 100% 100%, 8vw 100%, 0 calc(100% - 8vw)); }
	.mb-article .images > div img, .mb-article .images > div:last-child img { height: auto; aspect-ratio: 3 / 2; }
	.mb-article .schedule .ctr a { width: 48px; height: 40px; }
}
.nb { display: inline-block; }
.mb-interviews .index .list.is-filtered ul { justify-content: center; }

/* 改行：句の切れ目で折る・行頭の小さい字を避ける・最後の行を短くしない（meet-a と同じ手） */
.mb-job, .mb-interviews, .mb-article { word-break: auto-phrase; line-break: strict; }
.mb-job p, .mb-job h2, .mb-job h3, .mb-job h4, .mb-job li, .mb-job .note,
.mb-interviews p, .mb-interviews h2, .mb-interviews .catch,
.mb-article p, .mb-article h2, .mb-article h3, .mb-article li, .mb-article dd { text-wrap: pretty; }

/* 記事のある 01 だけをリンクに。ほかの7人のカードは押せない札（A-021） */
.mb-interviews .index .list a:not([href]) { cursor: default; pointer-events: none; }