@charset "utf-8";
/* mio-meet-a.css｜meet-a 担当（澪の現場愛・推し工程・現場の名言・電気・制御系職種）
   文字の仕様（書体・大きさ・太さ・字間・行間）はベースのまま。新しい部品の文字はベースにある段から選ぶ。
   形：角丸0・左上を落とした角（var(--cut)）・燕尾旗。hover の拡大はしない。 */

/* =====================================================================
	澪の現場愛（/meet/yardlove/）
===================================================================== */
.c-genbalove { background-color: var(--ground); }
.c-genbalove .main .detail h3 .punc-out { margin-right: 0; }
.c-genbalove .menu { margin: 90px 0 0 0; }
.c-genbalove .menu .container { max-width: 1120px; }
.c-genbalove .menu .list { align-items: flex-start; gap: 36px; }
.c-genbalove .menu .block { padding: 0; }
.c-genbalove .menu .block-fave { flex: 0 0 56%; }
.c-genbalove .menu .block-famous { flex: 1 1 auto; margin-top: 120px; }
.c-genbalove .menu .block .frame { position: relative; display: block; overflow: hidden; min-height: 470px; padding: 34px 36px 110px 36px; border-radius: 0; clip-path: var(--cut); background-color: var(--paper); color: var(--ink); }
.c-genbalove .menu .block-famous .frame { min-height: 430px; }
.c-genbalove .menu .block .tag { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 64px; height: 46px; padding: 0 0 0 10px; background: var(--sub); color: #fff; font-size: 13px; clip-path: var(--cut-next); }
.c-genbalove .menu .block-fave .tag { background: var(--main); }
.c-genbalove .menu .block .kicker { display: block; color: var(--main); font-size: 17px; line-height: 1.88; }
.c-genbalove .menu .block .title { margin: 6px 0 0 0; font-size: 36px; line-height: 1.2; }
.c-genbalove .menu .block .note { position: relative; z-index: 1; margin: 18px 0 0 0; max-width: 23em; font-size: 15px; line-height: 1.8; }
.c-genbalove .menu .block .art { position: absolute; right: -10px; bottom: 54px; width: 58%; height: auto; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.c-genbalove .menu .block-famous .art { width: 62%; right: -16px; bottom: 60px; }
.c-genbalove .menu .block .btn { left: 36px; bottom: 34px; margin: 0; width: 150px; border: 0; border-radius: 0; background: var(--ink); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); padding-right: 10px; }
.os-pc .c-genbalove .menu .block .frame:hover .btn { background-color: var(--main); color: #fff; }
.os-pc .c-genbalove .menu .block .frame:hover .art { transform: translate(-8px, -6px) rotate(-2deg); }
@media screen and (max-width: 767px) {
	.c-genbalove .menu { margin: 40px 0 0 0; }
	.c-genbalove .menu .list { display: block; }
	.c-genbalove .menu .block-famous { margin-top: 0; }
	.c-genbalove .menu .block .frame { min-height: 0; padding: 7vw 6vw 50vw 6vw; clip-path: var(--cut-sp); }
	.c-genbalove .menu .block .tag { width: 13vw; height: 10vw; font-size: 13px; }
	.c-genbalove .menu .block .kicker { font-size: 15px; line-height: 1.8; }
	.c-genbalove .menu .block .title { font-size: 25px; }
	.c-genbalove .menu .block .note { max-width: none; font-size: 15px; }
	.c-genbalove .menu .block .art, .c-genbalove .menu .block-famous .art { width: 50%; right: -2vw; bottom: 6vw; }
	.c-genbalove .menu .block .btn { left: 6vw; bottom: 6vw; }
}

/* =====================================================================
	目次（推し工程・現場の名言・電気の持ち場で同じ形）：燕尾の札を工程の順に並べる
===================================================================== */
.c-fave .stage-nav, .c-famous .stage-nav, .c-electric .field-nav { margin: 46px auto 0 auto; max-width: 1080px; }
.c-fave .stage-nav ol, .c-famous .stage-nav ol, .c-electric .field-nav ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; padding: 0; }
.c-fave .stage-nav a, .c-famous .stage-nav a, .c-electric .field-nav a { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 34px 0 18px; background: #fff; color: var(--ink); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 12px 50%); transition: background-color 0.3s, color 0.3s; }
.c-fave .stage-nav li:first-child a, .c-famous .stage-nav li:first-child a, .c-electric .field-nav li:first-child a { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.c-fave .stage-nav .en, .c-famous .stage-nav .en, .c-electric .field-nav .en { color: var(--main); font-size: 13px; }
.c-fave .stage-nav b, .c-famous .stage-nav b { font-size: 15px; }
.c-electric .field-nav a { font-size: 15px; font-weight: 700; }
.os-pc .c-fave .stage-nav a:hover, .os-pc .c-famous .stage-nav a:hover, .os-pc .c-electric .field-nav a:hover { background: var(--sub); color: #fff; }
.os-pc .c-fave .stage-nav a:hover .en, .os-pc .c-famous .stage-nav a:hover .en, .os-pc .c-electric .field-nav a:hover .en { color: #fff; }
@media screen and (max-width: 767px) {
	.c-fave .stage-nav, .c-famous .stage-nav, .c-electric .field-nav { margin: 26px 0 0 0; }
	.c-fave .stage-nav ol, .c-famous .stage-nav ol, .c-electric .field-nav ol { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
	.c-fave .stage-nav a, .c-famous .stage-nav a, .c-electric .field-nav a, .c-fave .stage-nav li:first-child a, .c-famous .stage-nav li:first-child a, .c-electric .field-nav li:first-child a { height: auto; min-height: 46px; padding: 8px 22px 8px 12px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
	.c-fave .stage-nav b, .c-famous .stage-nav b, .c-electric .field-nav a { font-size: 14px; line-height: 1.4; }
}

/* 区切り：航跡の波帯（どのページもこの1種類だけ・境目にだけ） */
.c-fave .stage + .stage, .c-famous .from + .from { position: relative; }
.c-fave .stage + .stage::before, .c-famous .from + .from::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; margin-left: -50vw; height: 16px; background: url('/demos/mio-recruit/assets/svg/meet-a-wake.svg') center/100% 100% no-repeat; opacity: 0.22; }
.c-fave .sample-note, .c-famous .sample-note, .c-electric .sample-note { margin: 40px 0 0 0; text-align: right; font-size: 12px; color: #676c6e; }

/* =====================================================================
	私の推し工程（/meet/yardlove/fave/）
===================================================================== */
.c-fave { background-color: var(--ground); overflow-x: clip; }
.c-fave .main .heading .in h2 { font-size: 18px; line-height: 1; color: var(--main); }
.c-fave .main .heading .in h3 { margin: 20px 0 0 0; font-size: 55px; line-height: 1.41; }
.c-fave .main .heading .in h3 > span { display: block; overflow: hidden; }
.c-fave .main .heading .in h3 > span > span { display: block; }
.c-fave .main .heading::before { top: 10px; margin-right: 330px; width: 230px; height: 170px; background-image: url('/demos/mio-recruit/assets/svg/meet-a-fave.svg'); }
.c-fave .main .heading::after { display: none; }
.c-fave .section { margin: 70px 0 0 0; }
.c-fave .section .container { max-width: 1200px; }
.c-fave .stage { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 40px; padding: 80px 0; }
.c-fave .stage:first-child { padding-top: 10px; }
.c-fave .stage:nth-child(even) { grid-template-columns: minmax(0, 1fr) 250px; }
.c-fave .stage:nth-child(even) .stage-head { order: 2; text-align: right; }
.c-fave .stage:nth-child(even) .stage-icon { margin-left: auto; }
.c-fave .stage-head { align-self: start; position: sticky; top: 110px; }
.c-fave .stage-icon { display: block; width: 110px; height: auto; margin: 0 0 18px 0; }
.c-fave .stage-en { color: var(--main); font-size: 13px; letter-spacing: 0.06em; }
.c-fave .stage-ja { margin: 8px 0 0 0; font-size: 32px; line-height: 1.3; }
.c-fave .stage-copy { margin: 12px 0 0 0; font-size: 15px; line-height: 1.8; }
.c-fave .section .list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: 18px; }
.c-fave .section .block { flex-basis: auto; margin: 0; padding: 0; }
.c-fave .section .block-wide { grid-column: 1 / -1; }
.c-fave .stage02 .block-wide { order: 3; }
.c-fave .section .block .frame { display: flex; height: 100%; padding: 0; border-radius: 0; clip-path: var(--cut); background-color: var(--paper); color: var(--ink); }
.c-fave .section .block .photo { flex: 0 0 52%; overflow: hidden; background: #dcdfdf; }
.c-fave .section .block .photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.c-fave .stage03 .block-wide .frame { flex-direction: row-reverse; }
.c-fave .section .block .txt { position: relative; display: block; flex: 1 1 auto; padding: 26px 28px 28px 28px; }
.c-fave .section .block .kind { display: inline-block; margin: 0 0 12px 0; padding: 4px 16px 4px 10px; background: var(--ground); font-size: 13px; line-height: 1.5; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); }
.c-fave .section .block h2 { min-height: 0; padding: 0 0 70px 0; }
.c-fave .section .block-wide h2 { padding-bottom: 80px; }
.c-fave .section .block .btn { left: 28px; bottom: 28px; margin: 0; width: 150px; border: 0; border-radius: 0; background: var(--ink); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); padding-right: 10px; }
.os-pc .c-fave .section .block .frame:hover .btn { background-color: var(--main); color: #fff; }
.os-pc .c-fave .section .block .btn:hover { background-color: var(--main); }
/* モーダル：見出しの画像だった所を燕尾の札に */
.modal-fave-window .frame { border-radius: 0; clip-path: var(--cut); }
.modal-fave-window .block .head h2 { display: inline-block; width: auto; padding: 5px 18px 5px 10px; background: var(--main); color: #fff; font-size: 15px; line-height: 1.5; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%); }
.modal-fave-window .block .image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: var(--cut-sm); }
@media screen and (max-width: 767px) {
	.c-fave .main .heading { padding-bottom: 110px; }
	.c-fave .main .heading .in h2 { font-size: 14px; line-height: 1.5; }
	.c-fave .main .heading .in h3 { margin: 10px 0 0 0; font-size: 30px; }
	.c-fave .main .heading::before { top: auto; bottom: 0; right: auto; left: 50%; margin: 0 0 0 -70px; width: 140px; height: 104px; }
	.c-fave .section { margin: 40px 0 0 0; }
	.c-fave .stage, .c-fave .stage:nth-child(even) { display: block; padding: 48px 0; }
	.c-fave .stage:nth-child(even) .stage-head { text-align: left; }
	.c-fave .stage-head { position: static; display: grid; grid-template-columns: 70px 1fr; column-gap: 14px; align-items: center; margin: 0 0 20px 0; }
	.c-fave .stage-icon, .c-fave .stage:nth-child(even) .stage-icon { grid-row: 1 / span 3; width: 70px; margin: 0; }
	.c-fave .stage-ja { margin: 2px 0 0 0; font-size: 26px; }
	.c-fave .stage-copy { margin: 4px 0 0 0; font-size: 14px; }
	.c-fave .section .list { display: block; }
	.c-fave .section .block { margin: 0 0 12px 0; }
	.c-fave .section .block .frame, .c-fave .stage03 .block-wide .frame { display: block; clip-path: var(--cut-sp); }
	.c-fave .section .block .txt { padding: 6vw 6vw 7vw 6vw; }
	.c-fave .section .block h2, .c-fave .section .block-wide h2 { padding-bottom: 64px; }
	.c-fave .section .block .btn { left: 6vw; bottom: 7vw; }
	.modal-fave-window .block .head h2 { margin: 0 0 15px 0; }
}

/* =====================================================================
	現場の名言（/meet/yardlove/famous/）：言葉をくれた人ごとに、大きさと色の違う札を並べる
===================================================================== */
.c-famous { background-color: var(--paper); }
.c-famous .main { background-color: var(--ground); }
.c-famous .main .heading h2 { max-width: none; font-size: 18px; line-height: 1; color: var(--main); }
.c-famous .main .heading h3 { max-width: none; margin-top: 20px; font-size: 55px; line-height: 1.41; }
.c-famous .main .heading h3 > span { display: block; overflow: hidden; }
.c-famous .main .heading h3 > span > span { display: block; }
.c-famous .main .heading::before { top: 30px; margin-right: 290px; width: 240px; height: 174px; background-image: url('/demos/mio-recruit/assets/svg/meet-a-famous.svg'); }
.c-famous .main .heading::after { display: none; }
.c-famous .section .container { max-width: 1200px; }
.c-famous .from { padding: 80px 0; }
.c-famous .from:first-child { padding-top: 0; }
.c-famous .from-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 28px 0; }
.c-famous .from-en { flex: 0 0 100%; color: var(--main); font-size: 13px; letter-spacing: 0.06em; }
.c-famous .from-ja { font-size: 32px; line-height: 1.3; }
.c-famous .from-count { padding: 4px 16px 4px 10px; background: var(--ground); font-size: 13px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); }
.c-famous .board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); grid-auto-flow: dense; gap: 16px; }
.c-famous .from:nth-child(even) .board { direction: rtl; }
.c-famous .from:nth-child(even) .board > * { direction: ltr; }
.c-famous .board .block { position: relative; }
.c-famous .board .size-l { grid-column: span 2; grid-row: span 2; }
.c-famous .board .size-m { grid-column: span 2; }
.c-famous .board .block a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 26px 26px 64px 26px; background: var(--ground); color: var(--ink); clip-path: var(--cut); }
.c-famous .board .tone-ink a { background: var(--sub); color: #fff; }
.c-famous .board .tone-main a { background: var(--ground); }
.c-famous .board .tone-main .word { color: var(--main); }
.c-famous .board .who { display: block; margin: 0 0 14px 0; font-size: 13px; line-height: 1.5; color: #676c6e; }
.c-famous .board .tone-ink .who { color: rgba(255, 255, 255, 0.72); }
.c-famous .board .word { display: block; font-size: 21px; line-height: 1.48; }
.c-famous .board .size-m .word { font-size: 25px; }
.c-famous .board .size-l .word { margin-top: auto; margin-bottom: auto; font-size: 36px; line-height: 1.41; }
.c-famous .board .more { position: absolute; right: 0; bottom: 20px; display: flex; align-items: center; height: 30px; padding: 0 18px 0 22px; background: var(--ink); color: #fff; font-size: 13px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); transition: background-color 0.3s; }
.c-famous .board .tone-ink .more { background: var(--main); }
.os-pc .c-famous .board .block a:hover .more { background: var(--main); }
.os-pc .c-famous .board .tone-ink a:hover .more { background: #fff; color: var(--ink); }
.os-pc .c-famous .board .block a { transition: background-color 0.3s; }
.os-pc .c-famous .board .block a:hover { background-color: #e4eae9; }
.os-pc .c-famous .board .tone-ink a:hover { background-color: var(--ink); }
.c-famous .board .block { transform: none; opacity: 1; }
.c-famous .board .block.fx-fade-bottom { transition-delay: 0s; }
/* モーダル：影の板をやめ、左上を落とした紙に */
.modal-famous-window .frame { box-shadow: none; border-radius: 0; clip-path: var(--cut); }
.modal-famous-window .block .m-who { margin: 0 0 14px 0; font-size: 13px; line-height: 1.5; color: var(--main); }
@media screen and (max-width: 767px) {
	.c-famous .main .heading { padding-bottom: 110px; }
	.c-famous .main .heading h2 { max-width: none; font-size: 14px; line-height: 1.5; }
	.c-famous .main .heading h3 { max-width: none; margin-top: 10px; font-size: 30px; }
	.c-famous .main .heading::before { top: auto; bottom: 0; right: auto; left: 50%; margin: 0 0 0 -70px; width: 140px; height: 102px; }
	.c-famous .from { padding: 48px 0; }
	.c-famous .from-ja { font-size: 26px; }
	.c-famous .board { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(150px, auto); gap: 8px; }
	.c-famous .board .size-l, .c-famous .board .size-m { grid-column: span 2; grid-row: auto; }
	.c-famous .board .block a { padding: 5vw 4.6vw 52px 4.6vw; clip-path: var(--cut-sp); }
	.c-famous .board .word { font-size: 15px; }
	.c-famous .board .size-m .word { font-size: 20px; }
	.c-famous .board .size-l .word { font-size: 25px; }
	.c-famous .board .who { font-size: 12px; }
	.c-famous .board .more { bottom: 14px; }
}

/* =====================================================================
	澪重工の電気・制御系職種（/meet/electric/）
===================================================================== */
.c-electric { overflow-x: clip; }
/* 見出しの写真：右下も落とした鋼板の形。紙片は四角の箱から信号旗の切り紙に */
.c-electric .sec-hero .kv > span > span { position: relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%); background: #dcdfdf; }
.c-electric .sec-hero .kv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-electric .sec-hero .ornament img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease 0.6s, transform 0.8s cubic-bezier(0.33, 1, 0.68, 1) 0.6s; }
.dom-loaded .c-electric .sec-hero .ornament img { opacity: 1; transform: none; }
.c-electric .sec-hero .ornament.back .groupe { top: 400px; margin-left: 330px; width: 300px; height: 280px; }
.c-electric .sec-hero .ornament.front .groupe01 { top: 34px; margin-left: 470px; width: 220px; height: 220px; }
.c-electric .sec-hero .headline h2 .row > span .front { clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); }
.c-electric .sec-hero .headline h2 .row i { padding-right: 30px; }
.c-electric .sec-hero .hero-en { position: absolute; top: 420px; right: 70px; font-size: 13px; letter-spacing: 0.14em; color: var(--ink); }
/* 書き出し：写真の組を左、言葉を右へ（元の左右を入れ替える） */
.c-electric .sec-message .container { display: flex; flex-direction: column; align-items: flex-start; padding-left: 52%; }
.c-electric .sec-message .note { margin: 18px 0 0 0; font-size: 12px; color: #676c6e; }
.c-electric .sec-message .photo .groupe { right: auto; left: -60px; }
.c-electric .sec-message .photo .groupe .box img { position: absolute; left: 0; top: 4%; width: 92%; height: 92%; object-fit: contain; }
.c-electric .sec-message .photo .groupe .image img { display: block; width: 100%; height: auto; object-fit: cover; clip-path: var(--cut); }
.c-electric .sec-message .photo .groupe .image01 img { aspect-ratio: 4 / 5; }
.c-electric .sec-message .photo .groupe .image02 img { aspect-ratio: 1 / 1; }
.c-electric .sec-message .photo .groupe .image03 { top: 62%; left: 50%; width: 240px; padding: 20px; background: var(--paper); clip-path: var(--cut); }
.c-electric .sec-message .photo .groupe .image03 img { clip-path: none; }
/* セクションの見出し：大きな英字は左寄せ、和文の前に信号旗 */
.c-electric section .heading { justify-content: flex-start; margin: 0 auto; max-width: 1190px; padding: 0 20px; text-align: left; }
.c-electric section .heading .en-lp { left: 20px; margin: 0; width: auto; white-space: nowrap; text-align: left; color: #e1e7e6; }
.c-electric .sec-attraction .heading .en-lp br { display: none; }
.c-electric section .heading .in { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; padding: 0 0 0 40px; }
.c-electric section .heading .h-flag { grid-row: 1 / span 2; width: 52px; height: auto; transform: rotate(-4deg); }
.c-electric section .heading p { margin: 0.5em 0 0 0; }
/* 持ち場：写真と文を1つおきに左右入れ替え */
.c-electric .field-nav { margin: 0 auto 26px auto; max-width: 1050px; }
.c-electric .field-nav ol { justify-content: flex-start; }
.c-electric .sec-field .block { scroll-margin-top: 100px; }
.c-electric .sec-field .block .frame { clip-path: var(--cut); }
.c-electric .sec-field .block:nth-child(even) .frame { flex-direction: row-reverse; }
.c-electric .sec-field .block .image span { overflow: hidden; clip-path: var(--cut-sm); background: #dcdfdf; }
.c-electric .sec-field .block .image span img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-electric .sec-field .block .f-no { margin: 0 0 6px 0; color: var(--main); font-size: 13px; }
.c-electric .sec-field .block .detail h3::after { width: 56px; height: 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); }
.c-electric .sec-field .block .btn a { border: 0; background: var(--ink); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); }
.os-pc .c-electric .sec-field .block .btn a:hover { background-color: var(--main); }
/* 魅力：1つを大きく、残り2つを右に積む */
.c-electric .sec-attraction .blocks { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 20px; margin: 0; }
.c-electric .sec-attraction .block { padding: 0; }
.c-electric .sec-attraction .block-lead { grid-row: span 2; }
.c-electric .sec-attraction .block .frame { padding: 40px 34px 34px 34px; clip-path: var(--cut); }
.c-electric .sec-attraction .block-lead .frame { display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; background: var(--sub); color: #fff; }
.c-electric .sec-attraction .block .num { position: static; margin: 0 0 14px 0; color: var(--main); }
.c-electric .sec-attraction .block-lead .num { color: #fff; }
.c-electric .sec-attraction .block h3 { min-height: 0; }
/* 先輩の声：1人を写真つきで大きく、6人を3列に */
.c-electric .voice-lead { display: flex; align-items: stretch; margin: 0 0 20px 0; background: #fff; clip-path: var(--cut); }
.c-electric .voice-lead .vl-photo { flex: 0 0 34%; background: #dcdfdf; }
.c-electric .voice-lead .vl-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.c-electric .voice-lead .vl-text { flex: 1 1 auto; align-self: center; padding: 40px 48px; }
.c-electric .voice-lead .vl-job { color: var(--main); font-size: 15px; }
.c-electric .voice-lead .vl-name { margin: 4px 0 16px 0; font-size: 32px; line-height: 1.3; }
.c-electric .voice-lead .lead { font-size: 15px; line-height: 1.8; }
.c-electric .sec-voice .block .frame { clip-path: var(--cut-sm); }
.c-electric .sec-voice .block h3::before { background-image: url('/demos/mio-recruit/assets/svg/meet-a-quote.svg'); }
.c-electric .sec-voice .block .v-name { margin: 0 0 10px 50px; font-size: 14px; line-height: 1.8; color: #676c6e; }
/* 応募：枠線の白い箱をやめ、墨の鋼板に */
.c-electric .sec-entry .ornament .groupe img { display: block; width: 100%; height: 100%; object-fit: contain; }
.c-electric .sec-entry h2 span::after { height: 16px; bottom: -6px; background: url('/demos/mio-recruit/assets/svg/meet-a-wake.svg') center/100% 100% no-repeat; opacity: 0.9; }
.c-electric .sec-entry .btn a { border: 0; background: var(--ink); color: #fff; clip-path: var(--cut); }
.os-pc .c-electric .sec-entry .btn a:hover { background-color: var(--main); color: #fff; }
@media screen and (max-width: 767px) {
	.c-electric .sec-hero .kv > span > span { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8vw), calc(100% - 8vw) 100%, 0 100%); }
	.c-electric .sec-hero .ornament.back .groupe { top: 70vw; left: 64vw; width: 36vw; height: 34vw; margin: 0; }
	.c-electric .sec-hero .ornament.front .groupe01 { top: 6vw; left: 78vw; width: 22vw; height: 22vw; margin: 0; }
	.c-electric .sec-hero .headline h2 .row i { padding-right: 6vw; }
	.c-electric .sec-hero .hero-en { top: 76vw; right: auto; left: 4vw; font-size: 11px; }
	.c-electric .sec-message .container { padding-left: 6.6vw; }
	.c-electric .sec-message .photo .groupe { left: auto; }
	.c-electric .sec-message .photo .groupe .image03 { top: 64vw; left: 52vw; width: 36vw; padding: 3vw; }
	.c-electric section .heading { padding: 0 4vw; }
	.c-electric section .heading .en-lp { left: 4vw; }
	.c-electric section .heading .in { padding: 0; column-gap: 3vw; }
	.c-electric section .heading .h-flag { width: 10vw; }
	.c-electric .field-nav { margin: 0 0 4vw 0; }
	.c-electric .sec-field .block .frame { clip-path: var(--cut-sp); }
	.c-electric .sec-attraction .blocks { display: block; }
	.c-electric .sec-attraction .block-lead .frame { min-height: 0; }
	.c-electric .sec-attraction .block .frame { padding: 6.6vw; clip-path: var(--cut-sp); }
	.c-electric .voice-lead { display: block; clip-path: var(--cut-sp); }
	.c-electric .voice-lead .vl-text { padding: 6.6vw; }
	.c-electric .voice-lead .vl-name { font-size: 26px; }
	.c-electric .voice-lead .lead { font-size: 3.7vw; }
	.c-electric .sec-voice .block .v-name { margin: 0 0 2vw 11vw; font-size: 3.4vw; }
}

/* 改行：語の途中・崩さない言葉で折らない（文字の仕様は変えない） */
.c-genbalove, .c-fave, .c-famous, .c-electric, .modal-fave-window, .modal-famous-window { word-break: auto-phrase; }
.c-genbalove .nw, .c-fave .nw, .c-famous .nw, .c-electric .nw, .modal-fave-window .nw, .modal-famous-window .nw { white-space: nowrap; }

/* 現場の名言：横いっぱいの札（1行の言葉） */
.c-famous .board .size-w { grid-column: 1 / -1; }
.c-famous .board .size-w a { flex-direction: row; align-items: center; gap: 28px; padding: 30px 150px 30px 34px; }
.c-famous .board .size-w .who { flex: 0 0 auto; margin: 0; }
.c-famous .board .size-w .word { font-size: 25px; }
.c-famous .board .size-w .more { top: 50%; bottom: auto; margin-top: -15px; }
@media screen and (max-width: 767px) {
	.c-famous .board .size-w a { flex-direction: column; align-items: flex-start; gap: 0; padding: 5vw 4.6vw 52px 4.6vw; }
	.c-famous .board .size-w .who { margin: 0 0 14px 0; }
	.c-famous .board .size-w .word { font-size: 20px; }
	.c-famous .board .size-w .more { top: auto; bottom: 14px; margin-top: 0; }
}

/* 電気ページ（ver2 調整）：書き出しの文の幅・写真の組・持ち場の部署名・魅力の写真・応募の飾り */
.c-electric .sec-message .container { padding-left: 46%; }
.c-electric .sec-message .photo .groupe .image01 { top: 0; left: 34%; }
.c-electric .sec-message .photo .groupe .image02 { top: 42%; left: 2%; width: 240px; }
.c-electric .sec-message .photo .groupe .image03 { top: 66%; left: 52%; }
.c-electric .sec-field .block .detail h3 span { display: block; margin: 4px 0 0 0; }
.c-electric .sec-attraction .block-lead .frame { justify-content: flex-start; padding-top: 0; padding-left: 0; padding-right: 0; }
.c-electric .sec-attraction .block-lead .a-photo { display: block; margin: 0 0 30px 0; background: #dcdfdf; }
.c-electric .sec-attraction .block-lead .a-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.c-electric .sec-attraction .block-lead .num, .c-electric .sec-attraction .block-lead h3, .c-electric .sec-attraction .block-lead .lead { padding: 0 34px; }
.c-electric .sec-entry .ornament.left .groupe { width: 300px; height: 340px; }
.c-electric .sec-entry .ornament.right .groupe { width: 300px; height: 280px; }
/* 共通フッター：electric.css の LP 用フッター（横並びの ul）を、このページだけ共通の形に戻す */
body:has(.c-electric) #footer .nav-content .block ul, body:has(.c-electric) #footer .nav-corporate ul { display: block; }
body:has(.c-electric) #footer .nav-content .block ul li, body:has(.c-electric) #footer .nav-corporate ul li { margin: 0 0 10px 0; }
@media screen and (max-width: 767px) {
	.c-electric .sec-message .container { padding-left: 6.6vw; }
	.c-electric .sec-message .photo .groupe .image01 { left: 30vw; }
	.c-electric .sec-message .photo .groupe .image02 { top: 40vw; left: 4vw; width: 40vw; }
	.c-electric .sec-message .photo .groupe .image03 { top: 66vw; left: 50vw; }
	.c-electric .sec-attraction .block-lead .frame { padding: 0 0 6.6vw 0; }
	.c-electric .sec-attraction .block-lead .a-photo { margin: 0 0 5vw 0; }
	.c-electric .sec-attraction .block-lead .num, .c-electric .sec-attraction .block-lead h3, .c-electric .sec-attraction .block-lead .lead { padding: 0 6.6vw; }
}
@media screen and (min-width: 768px) {
	.c-electric .sec-hero .ornament.back .groupe { left: auto; right: 6%; margin: 0; top: 490px; width: 280px; height: 260px; }
	.c-electric .sec-hero .ornament.front .groupe01 { left: auto; right: 3%; margin: 0; top: 30px; width: 200px; height: 200px; }
	.c-electric .sec-hero .hero-en { top: 446px; }
}

/* 検査の調整（ver2）：短い最後の行を作らない・目次の番号は段 11px・見出しの型を3つ続けない */
.c-genbalove, .c-fave, .c-famous, .c-electric, .modal-fave-window, .modal-famous-window { text-wrap: pretty; }
.c-fave .main .heading .in h2 { font-size: 25px; line-height: 1.48; }
.c-electric .field-nav .en { font-size: 11px; }
.c-electric .sec-attraction .heading { justify-content: flex-end; }
.c-electric .sec-attraction .heading .en-lp { left: auto; right: 20px; text-align: right; }
.c-electric .sec-attraction .heading .in { padding: 0 40px 0 0; }
@media screen and (max-width: 767px) {
	.c-fave .main .heading .in h2 { font-size: 20px; }
	.c-electric .sec-attraction .heading .en-lp { right: 4vw; }
	.c-electric .sec-attraction .heading .in { padding: 0; }
}
.c-electric .sec-attraction .heading { justify-content: center; text-align: center; }
.c-electric .sec-attraction .heading .en-lp { left: 50%; right: auto; transform: translate(-50%, -50%); text-align: center; }
.c-electric .sec-attraction .heading .in { display: block; padding: 0; }
.c-electric .sec-attraction .heading .h-flag { display: block; margin: 0 auto 10px auto; }
@media screen and (max-width: 767px) {
	.c-electric .field-nav .en { font-size: 14px; }
	.c-electric .sec-attraction .heading .en-lp { left: 50%; right: auto; }
}
.c-electric .sec-hero .headline h2 * { white-space: nowrap; word-break: keep-all; }
@media screen and (min-width: 768px) {
	.c-electric .sec-message .container { padding-left: 44%; }
	.c-electric .sec-message .photo .groupe { left: 0; }
}
.c-famous .board { grid-auto-rows: minmax(100px, auto); }
.c-famous .board .block a { min-height: 200px; }
.c-famous .board .size-w a { min-height: 0; }
@media screen and (max-width: 767px) { .c-famous .board .block a { min-height: 150px; } .c-famous .board .size-w a { min-height: 0; } }
@media screen and (max-width: 767px) { .c-famous .section .container { padding: 0 16px; } }
@media screen and (max-width: 767px) {
	.c-electric .sec-hero .hero-en { top: 86vw; }
	.c-electric .sample-note { padding: 0 16px; }
}