@charset "UTF-8"; /* 採用LP専用 */ .recruit-lp{--green:#47aa4f;--green-dark:#2f7d37;--deep:#2f7d37;--bright:#6cc472;--light:#eef6ef;--sage:#f6f8f6;--ink:#1a1a1a;--muted:#6b7268;--line:#e6e6e6;--white:#fff;--orange:#ee7a30;--orange-dark:#d3641d;--width:1180px;--section:112px;--radius:14px} .recruit-lp *{box-sizing:border-box} .recruit-lp{scroll-behavior:smooth} .recruit-lp{margin:0;color:var(--ink);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.8;background:#fff} .recruit-lp a{color:inherit;text-decoration:none} .recruit-lp img{display:block;max-width:100%;object-fit:cover} .recruit-lp .container{width:min(calc(100% - 64px),var(--width));margin:auto} .recruit-lp .site-header{height:82px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid #eef2ef} .recruit-lp .brand{display:flex;align-items:center} .recruit-lp .brand img{height:34px;width:auto;display:block} .recruit-lp .global-nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:700} .recruit-lp .global-nav .menu{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0} .recruit-lp .global-nav .menu>li{position:relative} .recruit-lp .global-nav .menu>li>a{display:inline-flex;align-items:center;height:82px;transition:.2s} .recruit-lp .global-nav .menu>li>a:hover{color:var(--green)} .recruit-lp .global-nav .drop{position:absolute;top:100%;left:0;min-width:230px;background:var(--green);padding:20px 22px;display:flex;flex-direction:column;gap:13px;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;box-shadow:0 18px 40px rgba(10,50,25,.18);z-index:20} .recruit-lp .global-nav .has-drop:hover .drop{opacity:1;visibility:visible;transform:translateY(0)} .recruit-lp .global-nav .drop a{color:#fff;font-size:14px;font-weight:500;white-space:nowrap;transition:.2s} .recruit-lp .global-nav .drop a:hover{opacity:.82} .recruit-lp .global-nav .drop .drop-entry{display:flex;width:100%;align-items:center;justify-content:center;background:#fff;color:var(--green-dark);font-weight:700;padding:11px 18px;border-radius:6px;margin-top:10px;font-size:13px} .recruit-lp .global-nav .drop .drop-entry:hover{opacity:1;background:#eef6ef} .recruit-lp .header-cta{padding:11px 26px;background:var(--green);color:#fff!important;border-radius:99px;font-weight:700;transition:.2s} .recruit-lp .header-cta:hover{background:var(--green-dark)} .recruit-lp .menu-button{display:none;border:0;background:none;font-weight:800;color:var(--deep)} .recruit-lp .hero{height:min(690px,calc(100vh - 82px));min-height:570px;position:relative;overflow:hidden;background:var(--deep)} .recruit-lp .hero-photo{position:absolute;inset:0;background:url('images/recruit/hero.jpg') 50% 30%/cover no-repeat;transform:scale(1.02);z-index:0} /* 斜めの切り抜きは .hero-panel（動かさない）、緑の面と方眼は中の （動く）に分けている。 1つの要素に clip-path と transform を同居させると、降下中だけGPUが別レイヤーで描くため、 着地の瞬間に切り抜かれていない四角が斜め線の右へ1フレームだけはみ出すことがあった （画面幅＝レイヤーの大きさで出る／出ないが変わる） 2026-09-06 */ .recruit-lp .hero-panel{position:absolute;inset:0;z-index:1;clip-path:polygon(0 0,53% 0,42% 100%,0 100%)} .recruit-lp .hero-panel>i{position:absolute;inset:0;display:block;background:var(--deep)} .recruit-lp .hero-panel>i::after{content:"";position:absolute;inset:0;opacity:.1;background-image:linear-gradient(90deg,transparent 49%,#7bcf94 50%,transparent 51%),linear-gradient(transparent 49%,#7bcf94 50%,transparent 51%);background-size:120px 120px} .recruit-lp .hero-copy{position:absolute;left:max(7vw,calc((100vw - var(--width))/2));top:50%;transform:translateY(-48%);z-index:3;color:#fff} .recruit-lp .eyebrow, .recruit-lp .section-label{font-size:13px;letter-spacing:.18em;font-weight:900;color:var(--green);margin:0 0 8px} .recruit-lp .hero .eyebrow{color:#98d9aa} .recruit-lp .hero h1{font-size:clamp(48px,6vw,82px);line-height:1.18;letter-spacing:.02em;margin:0 0 25px} .recruit-lp .hero h1 em{color:#fff;font-style:normal;font-size:1.16em;font-weight:900} .recruit-lp .hero-word{position:absolute;bottom:-32px;left:4vw;z-index:2;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);font-size:clamp(90px,15vw,210px);font-weight:900;line-height:1} .recruit-lp .section{padding:var(--section) 0} .recruit-lp .message{background:#fff} .recruit-lp .message-grid{display:grid;grid-template-columns:46% 1fr;gap:8%;align-items:center} .recruit-lp .message-photo{width:100%;aspect-ratio:1.28;border-radius:2px} .recruit-lp .message-copy{position:relative} .recruit-lp .about h2{font-size:clamp(30px,3.2vw,48px);line-height:1.4;margin:0 0 26px} .recruit-lp .message-copy .section-label{font-size:clamp(17px,1.9vw,24px);letter-spacing:.14em;margin-bottom:14px} .recruit-lp .message-copy h2{font-size:clamp(28px,3.4vw,44px);line-height:1.4;margin:0 0 26px} .recruit-lp .message-copy p:not(.section-label){color:var(--muted);max-width:600px} .recruit-lp .text-link{display:inline-flex;gap:24px;align-items:center;margin-top:18px;padding-bottom:6px;border-bottom:1px solid var(--green);color:var(--green);font-weight:800;font-size:14px;background-image:linear-gradient(to right,var(--orange) 50%,var(--green) 50%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:background-position .5s ease,border-color .35s ease} .recruit-lp .text-link span{transition:transform .25s ease} .recruit-lp .text-link:hover{background-position:0 0;border-color:var(--orange)} .recruit-lp .text-link:hover span{transform:translateX(6px)} .recruit-lp .btn-outline{display:inline-flex;align-items:center;gap:14px;margin-top:24px;padding:15px 34px;border:2px solid var(--green);border-radius:999px;background:#fff;color:var(--green);font-weight:800;font-size:14px;transition:background .3s ease,color .3s ease} /* 「代表メッセージを読む」だけF方式（左から色が流れ込む）にする 2026-08-25。 .recruit-lp 内の .btn-outline はこのボタンと「福利厚生をすべて見る」の 2つだけで、福利厚生は従来の演出のままにする指示のため、共通の.btn-outlineに 当てて後から打ち消すのではなく、最初からこのボタンだけに当てる。 ・緑の面(::after)を先に用意し、幅0から広げるだけなので背景の塗り直しが不要 ・文字色は0.08秒でほぼ即座に切り替える。ここに時間をかけると、タップ直後の ページ遷移で描画が止まり「緑と白の中間色＝薄い緑」のまま残ってしまう */ .recruit-lp .msg-links .btn-outline{ transition:color .08s linear; position:relative;z-index:0;overflow:hidden} .recruit-lp .msg-links .btn-outline::after{ content:"";position:absolute;inset:0;z-index:-1;background:var(--green); transform:scaleX(0);transform-origin:left center; transition:transform .35s cubic-bezier(.45,0,.55,1)} .recruit-lp .num-more-grid .number-card strong{--ns:42px} .recruit-lp .num-more-grid .number-card strong span{--nss:15px} .recruit-lp .btn-outline span{transition:transform .25s ease} .recruit-lp .btn-outline:hover{background:var(--green);color:#fff} .recruit-lp .btn-outline:hover span{transform:translateX(4px)} /* 「代表メッセージを読む」だけ、背景は塗り替えず::afterを左から広げる。 文字色を#fffにすると矢印(→)も同じ色を引き継いで一緒に白くなる 2026-08-25 */ .recruit-lp .msg-links .btn-outline:hover{background:#fff} .recruit-lp .msg-links .btn-outline:hover::after{transform:scaleX(1)} .recruit-lp .interview{background:#f4f5f4;overflow:hidden} .recruit-lp .section-heading h2,.recruit-lp .numbers h2,.recruit-lp .flow h2{font-size:18px;margin:0;color:var(--muted)} .recruit-lp .heading-row{display:flex;justify-content:space-between;align-items:flex-start} .recruit-lp .section-heading .section-label,.recruit-lp .numbers .section-label,.recruit-lp .flow .section-label{font-size:clamp(34px,4.2vw,60px);line-height:1;color:var(--green);letter-spacing:.06em;margin-bottom:10px} .recruit-lp .ghost-number{font:900 clamp(100px,16vw,210px)/.7 Georgia;color:transparent;-webkit-text-stroke:1px #dfe5e1} .recruit-lp .interview-slider{position:relative;display:flex;align-items:center;gap:12px;margin-top:45px;padding-bottom:36px} .recruit-lp .iv-viewport{overflow:hidden;flex:1} .recruit-lp .iv-track{display:flex;gap:26px;transition:transform .5s cubic-bezier(.4,0,.2,1)} /* カード幅（1行に何枚並べるか）は parts.css の .iv-track>.person-card に一本化した 2026-08-30。 ここに同値コピーを戻さないこと（片方だけ直してズレる） */ .recruit-lp .iv-nav{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--green);font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s} /* ‹ › の字形はフォントの都合で中心よりわずかに下に見えるため、PC・SPとも 下側にpaddingを取って視覚的な中央に合わせる（2026-08-24・指示によりPCも調整） */ .recruit-lp .iv-nav{padding-bottom:3px} .recruit-lp .iv-nav:hover{background:var(--green);color:#fff;border-color:var(--green)} .recruit-lp .iv-dots{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:8px} .recruit-lp .iv-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:.2s} .recruit-lp .iv-dots button.on{background:var(--green);width:22px;border-radius:5px} .recruit-lp .section-more{text-align:right;margin-top:20px} .recruit-lp .numbers{background:var(--light);color:var(--ink);position:relative;overflow:hidden} .recruit-lp .circuit{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(90deg,transparent 49%,#7bcf94 50%,transparent 51%),linear-gradient(transparent 49%,#7bcf94 50%,transparent 51%);background-size:140px 140px} .recruit-lp .numbers-layout{position:relative} .recruit-lp .numbers-title .section-label{color:var(--green)} .recruit-lp .numbers-title h2{color:var(--muted)} .recruit-lp .numbers-title p{color:var(--muted)} /* 行の高さは固定ではなく最小値にする（2026-08-30）。126px固定だと、注釈のあるカード （年間売上高）だけ中身が数px超えて枠の下からはみ出し、下の行のカードに重なっていた。 minmax にすると必要な行だけ伸びる。同じ行のカードは高さが揃うので見た目は崩れない */ .recruit-lp .number-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(126px,auto);gap:12px;grid-auto-flow:dense} .recruit-lp .number-grid .numbers-title{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:center;padding:4px 8px} .recruit-lp .number-card{background:#fff;color:var(--green);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;align-content:center;justify-content:center;gap:6px 14px;text-align:center;box-shadow:0 6px 18px rgba(20,60,30,.04)} /* カードは縦並び（column）。flex-basis は主軸＝高さを指すので 100% にしてはいけない。 横幅いっぱいにしたいときは width:100% を使う 2026-08-30 */ .recruit-lp .number-card>small{order:0;flex-basis:auto;width:100%;max-width:100%;text-align:center} .recruit-lp .number-card>.nc-icon{order:1} .recruit-lp .number-card>strong{order:2} .recruit-lp .number-card>.num-note{order:3;flex-basis:auto;width:100%;max-width:100%;text-align:center} /* 数字アイコン：正方形の枠にはめるのをやめ、「高さ」で揃える（2026-08-30）。 トップページ（.topnum）で先に実装した方式をそのまま持ち込んだもの。 正方形にはめると、横長の絵（ic-avgage 288x140）は枠の半分の高さしか描かれず 1枚だけ小さく見え、縦長の絵（ic-koji 220x288）は逆に大きく見えていた。 --ih … 基準の高さ。カードごと・画面幅ごとに下の各ブロックで上書きする （このファイル内の .nc-icon 指定は、すべて --ih だけを書き換える形に統一済み。 width/height を直接書かないこと。書くとこの計算式に勝ってしまう） --k … 画像ごとの倍率。PHPの johoku_icon_scale() が縦横比から出す（1/√(横÷縦)）。 横長ほど小さく・縦長ほど大きくなり、見た目の面積が揃う。 img の style="--k:..." で渡すので、絵を差し替えても自動で追従する 極端な横長（ic-avgage）が数字を押し出さないよう max-width も併記する。 ※ .nc-15（平均年齢だけ84pxに拡大していた手当て）は --k に置き換えたため廃止 */ .recruit-lp .nc-icon{--ih:58px;width:auto;height:calc(var(--ih) * var(--k,1) * var(--ik,1)); max-width:clamp(52px,46cqw,120px);object-fit:contain;flex:none;display:block} .recruit-lp .number-card.lg .nc-icon{--ih:150px} .recruit-lp .number-card.tall .nc-icon{--ih:90px} .recruit-lp .number-card .nc-body{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0} .recruit-lp .number-card small{color:var(--muted);font-weight:700;font-size:14px} /* 数字の大きさ：カード種別・画面幅ごとの指定は、すべて変数（--ns／--nss）だけを 書き換える形に統一した（2026-08-30）。font-size を直接書かないこと。 --ns … 数字の大きさ／--nss … 単位（span）の大きさ --nl … 「桁＋単位が長い値」だけに掛ける倍率。既定は 1（＝従来と同じ大きさ） 数字は white-space:nowrap のため、長い値（3,000現場・52.7万円・33.3時間）は カード幅を超えても折り返さず枠の外へそのまま描かれていた。 PHP側が文字数から .nc--long を付け、この倍率で1段小さくして収める */ .recruit-lp .number-card strong{--ns:44px;font-size:calc(var(--ns) * var(--nl,1));line-height:1.05} .recruit-lp .number-card strong span{--nss:16px;font-size:calc(var(--nss) * var(--nl,1));margin-left:2px} .recruit-lp .number-card .num-note{font-size:10.5px;font-style:normal;color:var(--muted);margin-top:2px;line-height:1.4} .recruit-lp .number-card.tall small{font-size:15px} .recruit-lp .number-card.tall{grid-row:span 2} .recruit-lp .number-card.lg{grid-column:span 2;grid-row:span 2} .recruit-lp .number-card.lg small{font-size:20px} .recruit-lp .number-card.lg strong{--ns:78px} .recruit-lp .number-card.tall strong{--ns:62px} .recruit-lp .number-card.qual{flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;gap:3px;padding:10px 12px} .recruit-lp .number-card.qual>small{order:0;flex-basis:auto;width:100%;text-align:center} .recruit-lp .number-card.qual>.num-note{order:0;flex-basis:auto;width:100%} .recruit-lp .number-card.qual .nc-icon{--ih:44px} .recruit-lp .number-card.qual .nc-row{display:flex;align-items:center;justify-content:center;gap:12px} .recruit-lp .number-card.qual .num-note{width:100%;flex-basis:auto;white-space:nowrap;font-size:10px;text-align:center;margin-top:0} .recruit-lp .number-band{grid-column:1/-1;grid-row:span 2;display:flex;gap:12px} .recruit-lp .number-band>.number-card{flex:1;gap:16px} .recruit-lp .number-band .nc-icon{--ih:88px} .recruit-lp .number-band small{font-size:16px} .recruit-lp .number-band strong{--ns:64px} .recruit-lp .number-card.wide{grid-column:span 2} .recruit-lp .jobs .section-heading{margin-bottom:40px} .recruit-lp .job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .recruit-lp .job-card{display:block;border:1px solid var(--line);background:#fff;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease} .recruit-lp .job-card:hover{transform:translateY(-10px);box-shadow:0 28px 56px rgba(11,61,39,.22);border-color:var(--green)} .recruit-lp .job-card img{width:100%;aspect-ratio:1.42} .recruit-lp .job-thumb{width:100%;aspect-ratio:1.42;background:#e7ede7;position:relative} .recruit-lp .job-card>div{padding:25px} .recruit-lp .job-card small{color:var(--green);font-weight:900} .recruit-lp .job-card h3{font-size:21px;margin:6px 0} .recruit-lp .job-card p{font-size:13px;color:var(--muted)} .recruit-lp .job-card .more{display:block;text-align:right;color:var(--green);font-size:13px;font-weight:800;margin-top:12px;transition:.2s} .recruit-lp .job-card:hover .more{color:var(--green-dark);letter-spacing:.03em} .recruit-lp .about{background:var(--sage);position:relative} .recruit-lp .about-grid{display:grid;grid-template-columns:48% 1fr;gap:8%;align-items:center} .recruit-lp .about-image{position:relative} .recruit-lp .about-image:before{content:'';position:absolute;inset:-25px 35px 25px -25px;border:1px solid #a9d3b4} .recruit-lp .about-image img{position:relative;width:100%;aspect-ratio:1.55} .recruit-lp .about .section-label{font-size:clamp(34px,4vw,56px);line-height:1;color:var(--green)} .recruit-lp .about-points{display:grid;grid-template-columns:repeat(3,1fr);padding:0;margin:38px 0 10px;list-style:none;border-top:1px solid #a8c7b0;border-bottom:1px solid #a8c7b0} .recruit-lp .about-points li{padding:22px 8px;font-weight:800;font-size:13px;text-align:center} .recruit-lp .benefits{background:var(--sage)} .recruit-lp .benefits .section-heading{margin-bottom:38px} .recruit-lp .benefit-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:16px} .recruit-lp .benefit-grid article{padding:30px;border:1px solid var(--line);min-height:230px} .recruit-lp .benefit-main{background:var(--light)} .recruit-lp .benefit-main strong{display:block;color:var(--green);font-size:70px;line-height:1.2} .recruit-lp .benefit-main strong span{font-size:22px} .recruit-lp .benefit-icon{width:56px;height:56px;border:2px solid var(--green);color:var(--green);border-radius:50%;display:grid;place-items:center;font-size:26px} .recruit-lp .benefit-grid h3{font-size:17px;margin-top:24px} .recruit-lp .benefit-grid p{font-size:13px;color:var(--muted)} .recruit-lp .req-thumb{width:100%;aspect-ratio:1.75;background:#e7ede7} .recruit-lp .flow .section-heading{text-align:left;margin-bottom:45px} /* 1fr（＝minmax(auto,1fr)）だと、中身が広い列（3列目の面接）が min-content ぶん広がって 他の列を押し潰す。minmax(0,1fr) にすると5列とも必ず均等になる 2026-08-30 */ .recruit-lp .flow-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;position:relative;align-items:start} .recruit-lp .flow-list:before{content:'';height:2px;background:#70b583;position:absolute;top:23px;left:10%;right:10%} .recruit-lp .flow-list li{text-align:center;position:relative;padding:0 6px} .recruit-lp .flow-list li>span{width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;margin:0 auto 14px;font-weight:900} .recruit-lp .flow-list strong, .recruit-lp .flow-list small{display:block;font-size:15px} .recruit-lp .flow-list small{color:var(--muted)} /* ENTRYボタン（.eb-ic / .eb-txt / .eb-arrow）の指定は parts.css の 素の .entry-button 系に一本化した（2026-08-29）。 ここにあった指定は parts.css の同名ルール（あとから読み込まれる）に すべて上書きされていて実際には効いていなかったため削除。ここに書き足さないこと。 */ .recruit-lp .site-footer{padding:72px 0 28px;background:#fff;color:var(--ink);border-top:1px solid rgba(0,0,0,.08)} .recruit-lp .footer-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:40px} .recruit-lp .footer-brand .brand img{height:34px;margin-bottom:18px} .recruit-lp .footer-addr{font-size:13px;color:var(--muted);line-height:1.9} .recruit-lp .footer-col{display:flex;flex-direction:column;gap:8px} .recruit-lp .footer-col h4{font-size:13px;font-weight:700;color:var(--green);margin:0 0 8px;letter-spacing:.06em} .recruit-lp .footer-col a{font-size:13px;color:var(--muted);transition:.2s} .recruit-lp .footer-col a:hover{color:var(--green)} .recruit-lp .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08);font-size:12px;color:var(--muted)} .recruit-lp .footer-bottom a:hover{color:var(--green)} @media(max-width:1024px){.recruit-lp{--section:88px} .recruit-lp .global-nav{gap:16px;font-size:12px} .recruit-lp .global-nav .menu{gap:18px} .recruit-lp .numbers-layout{grid-template-columns:1fr} .recruit-lp .numbers-title{display:flex;gap:20px;align-items:end} .recruit-lp .benefit-grid{grid-template-columns:repeat(2,1fr)} .recruit-lp .footer-grid{grid-template-columns:repeat(4,1fr);gap:28px} .recruit-lp .footer-brand{grid-column:1/-1}} @media(max-width:767px){.recruit-lp .container{width:min(calc(100% - 36px),var(--width))} .recruit-lp .site-header{height:66px;padding:0 18px} .recruit-lp .menu-button{display:block} .recruit-lp .global-nav{display:none;position:absolute;left:0;right:0;top:66px;padding:16px 22px 22px;background:#fff;box-shadow:0 15px 25px rgba(0,0,0,.08);flex-direction:column;align-items:stretch;gap:0} .recruit-lp .global-nav.is-open{display:flex} .recruit-lp .global-nav .menu{flex-direction:column;align-items:stretch;gap:0;width:100%} .recruit-lp .global-nav .menu>li>a{height:auto;padding:13px 0;border-bottom:1px solid #eef2ef} .recruit-lp .global-nav .drop{position:static;opacity:1;visibility:visible;transform:none;background:transparent;box-shadow:none;padding:8px 0 12px 14px;gap:9px} .recruit-lp .global-nav .drop a{color:var(--muted)} .recruit-lp .global-nav .drop .drop-entry{background:var(--green);color:#fff;align-self:flex-start;margin-top:2px} .recruit-lp .header-cta{margin-top:14px;text-align:center} .recruit-lp .hero{height:690px} /* 「緑の枠が下に見える」バグの本当の原因はここだった 2026-08-24 3回目でようやく特定。 hero-panel の出現位置やdetail度の問題ではなく、写真の高さが85%指定で 下15%ぶんが写真で覆われておらず、そこに.heroの地の色（緑）がそのまま 露出していた。パネルが登場する前の状態でも常に緑の帯が見えていた。 写真を高さ100%まで敷いて隙間を無くす（最終形はパネルが上に重なるので見た目は変わらない） */ .recruit-lp .hero-photo{background-position:81% 0%;background-size:auto 100%} .recruit-lp .hero-panel{clip-path:polygon(0 60%,100% 52%,100% 100%,0 100%)} .recruit-lp .hero-copy{left:24px;right:24px;top:auto;bottom:46px;transform:none} .recruit-lp .hero h1{font-size:40px} .recruit-lp .hero-word{font-size:54px;right:16px;bottom:16px;top:auto;left:auto;-webkit-text-stroke:1px rgba(255,255,255,.26)} .recruit-lp .message-grid,.recruit-lp .about-grid{grid-template-columns:1fr;gap:42px} .recruit-lp .message-photo{aspect-ratio:1.25} .recruit-lp .job-grid{grid-template-columns:1fr} /* SPの1枚表示も parts.css 側に一本化 2026-08-30 */ .recruit-lp .heading-row{display:block} .recruit-lp .ghost-number{display:none} .recruit-lp .numbers-title{display:block} .recruit-lp .number-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;grid-auto-flow:row} .recruit-lp .number-grid .numbers-title{grid-column:1/-1;grid-row:auto;padding:0 0 4px} .recruit-lp .number-card.lg, .recruit-lp .number-card.tall{grid-column:auto;grid-row:auto} .recruit-lp .number-card strong{--ns:34px} .recruit-lp .number-card.lg strong{--ns:42px} .recruit-lp .about-grid>div:last-child{order:-1} .recruit-lp .about-points{grid-template-columns:1fr} .recruit-lp .about-points li+li{border-top:1px solid #c6dbcc} .recruit-lp .benefit-grid{grid-template-columns:1fr} .recruit-lp .footer-grid{grid-template-columns:1fr 1fr;gap:26px} .recruit-lp .footer-brand{grid-column:1/-1} .recruit-lp .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px} } .recruit-lp.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform} .recruit-lp .reveal.in{opacity:1;transform:none} .recruit-lp.js .hero-photo{opacity:0;transform:scale(1.12)} .recruit-lp .hero.ready .hero-photo{opacity:1;transform:scale(1.02);transition:opacity 1.2s ease,transform 1.7s cubic-bezier(.2,.6,.2,1)} /* --- ヒーローの登場順序 2026-08-19 --- ① 人物写真(0s) → ② 左の緑スラッシュ(上から/0.70s) ＋ ③ 透かしRECRUIT(0.70s・②と同時) → ④ キャッチコピー(1.95s〜) ④の遅延は page-recruit.php の .mk の inline --d で指定している。 */ /* 動かすのは中の だけ（切り抜きは親に固定。理由はファイル前半の .hero-panel の注記） 2026-09-06 */ .recruit-lp.js .hero-panel>i{transform:translateY(-101%)} .recruit-lp .hero.ready .hero-panel>i{transform:translateY(0);transition:transform .75s cubic-bezier(.22,.75,.25,1) .70s} .recruit-lp.js .hero-word{opacity:0;transform:translateY(26px)} .recruit-lp .hero.ready .hero-word{opacity:1;transform:none;transition:opacity .7s ease .70s,transform .7s cubic-bezier(.2,.6,.2,1) .70s} .recruit-lp.js .hero-copy .mk .t{clip-path:inset(0 100% 0 0)} .recruit-lp .mk{position:relative;display:inline-block;vertical-align:top} .recruit-lp .mk .t{display:inline-block;white-space:nowrap} .recruit-lp .mk::after{content:"";position:absolute;left:0;top:12%;width:100%;height:76%;background:var(--green);transform:scaleX(0);transform-origin:left;pointer-events:none} .recruit-lp .hero-copy .mk::after{background:var(--deep)} .recruit-lp .hero.ready .mk .t, .recruit-lp .message-copy.in .mk .t{animation:mkText .8s cubic-bezier(.4,0,.2,1) var(--d,0s) both} .recruit-lp .hero.ready .mk::after, .recruit-lp .message-copy.in .mk::after{animation:mkWipe .8s cubic-bezier(.4,0,.2,1) var(--d,0s) both} /* セクション見出しのワイプ演出 2026-08-23 代表メッセージの見出しと同じ「緑の帯が左から右へ走って文字が現れる」動きを、 NUMBERS／JOBS／INTERVIEW など全てのセクション見出しにも適用する。 .mkh は js/recruit-lp.js が見出しを包むときに付けるので、 PHP側に を書き足す必要はない（見出しを増やせば自動で効く）。 親の .in はスクロール表示のIntersectionObserverが付ける既存の仕組みをそのまま使う。 */ .recruit-lp .in .mkh .mk .t{animation:mkText .8s cubic-bezier(.4,0,.2,1) var(--d,0s) both} .recruit-lp .in .mkh .mk::after{animation:mkWipe .8s cubic-bezier(.4,0,.2,1) var(--d,0s) both} /* 表示前に文字が一瞬見えないよう伏せておく（JSが動く環境だけ） */ .recruit-lp.js .mkh .mk .t{clip-path:inset(0 100% 0 0)} @keyframes mkWipe{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}50%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}} @keyframes mkText{0%,50%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}} /* ここには以前 @media(prefers-reduced-motion:reduce) のブロックがあり、 ヒーローの写真・緑パネル・キャッチコピーを transition:none / opacity:1 で 即座に最終状態にしていた。iPhoneの「視差効果を減らす」がONの端末では、 これが原因で「写真も緑の帯も文字も最初から全部同時に出ている」状態になり、 さらに transition だけを消して animation は消していなかったため、 mkWipe（緑の帯）だけが文字の上を走って「帯がちらつく」ように見えていた。 サイト全体（js/reveal.js 側）はこの設定を見ずに常に演出しているので、 採用ページも同じ挙動に揃えるためブロックごと削除した。 スクロールを奪うヒーローの一時ロックだけは js 側で従来どおり見送っている 2026-08-24 */ @media(max-width:1024px){.recruit-lp .number-grid{grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:minmax(118px,auto)!important;grid-auto-flow:dense!important} .recruit-lp .number-grid .numbers-title{grid-column:1/-1!important;grid-row:span 2!important;padding:2px 8px} .recruit-lp .number-card{grid-column:auto!important;grid-row:auto!important;min-height:0!important} /* .nc-row 導入前は「見出し／アイコン／数字／注釈」が横一列に並ぶ想定で row+wrap にしていた。 いまはアイコンと数字が .nc-row にまとまっているので、他のカードと同じ縦並びが正しい形。 column のまま wrap を残すと、カードの高さを超えた要素が“2列目”に回り込んで 横にはみ出す（2026-08-30 実測） */ .recruit-lp .number-card.tall{grid-column:auto!important;grid-row:span 2!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:center;align-content:center;justify-content:center;gap:4px 12px} .recruit-lp .number-card.tall small{order:0;flex-basis:auto;width:100%;text-align:center;margin:0} .recruit-lp .number-card.tall .nc-icon{order:1} .recruit-lp .number-card.tall strong{order:2;margin:0} .recruit-lp .number-card.tall .num-note{order:3;flex-basis:auto;width:100%;text-align:center;margin:0} .recruit-lp .number-band{display:contents!important} .recruit-lp .number-band>.number-card{grid-column:auto!important;grid-row:auto!important;flex:none!important;gap:6px 14px!important;align-content:center!important} /* 同上。14px はアイコンと数字の間隔だったので .nc-row 側へ移した 2026-08-30 */ .recruit-lp #np-inexp{grid-column:1/-1!important;grid-row:span 2!important;flex-direction:column!important;flex-wrap:nowrap!important;justify-content:center;gap:4px} .recruit-lp #np-inexp .nc-row{gap:14px} .recruit-lp .number-card.wide{grid-column:1/-1!important;grid-row:auto!important} .recruit-lp .number-card.qual .num-note{white-space:normal!important;font-size:11px;line-height:1.5} .recruit-lp .nc-icon{--ih:56px} .recruit-lp .number-card.tall .nc-icon{--ih:100px} .recruit-lp #np-inexp .nc-icon{--ih:132px} .recruit-lp .number-band .nc-icon{--ih:56px} .recruit-lp .number-card strong{--ns:46px} .recruit-lp .number-card.tall strong{--ns:80px} .recruit-lp .number-card.tall small{font-size:17px} .recruit-lp .number-card.tall .num-note{font-size:12px} .recruit-lp #np-inexp strong{--ns:92px} .recruit-lp #np-inexp small{font-size:19px} .recruit-lp .number-card.qual strong{--ns:34px} .recruit-lp .number-band small{font-size:14px}} @media(max-width:640px){.recruit-lp .nc-icon{--ih:44px} .recruit-lp .number-band .nc-icon{--ih:44px} .recruit-lp .number-card strong{--ns:28px} .recruit-lp .number-card small{font-size:12px} .recruit-lp .number-card.tall .nc-icon{--ih:66px} .recruit-lp .number-card.tall strong{--ns:56px} .recruit-lp .number-card.tall small{font-size:14px} .recruit-lp #np-inexp .nc-icon{--ih:96px} .recruit-lp #np-inexp strong{--ns:60px} .recruit-lp #np-inexp small{font-size:15px}} @media(max-width:767px){} .recruit-lp .jobs{background:#fff} .recruit-lp .interview{background:#eef6ef} .recruit-lp .benefits{background:#fff} .recruit-lp .flow-list .fd{display:block;text-align:left;margin-top:12px;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:8px;padding:10px 12px} .recruit-lp .flow-list .fd .fi{display:block;font-size:13px;line-height:1.6;color:var(--muted)} .recruit-lp .flow-list .fd .fi+.fi{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)} .recruit-lp .flow-list .fd b{display:block;color:var(--green-dark);font-size:12.5px;font-weight:800;margin-bottom:2px} /* 回路パターンはSVG（ベクター）。元のJPEGは1500pxしかなく、全幅に伸ばすと粗く見えたため差し替え 2026-08-20 */ .recruit-lp .circuit{background:url(images/recruit/numbers-circuit.svg) center/cover no-repeat;opacity:1} .recruit-lp .job-thumb{background:#e7ede7 center/cover no-repeat} .recruit-lp .job-thumb.j-comm{background-image:url(images/recruit/job-tsushin.jpg)} .recruit-lp .job-thumb.j-elec{background-image:url(images/recruit/job-denki.jpg)} .recruit-lp .job-thumb.j-int{background-image:url(images/recruit/job-naiso.jpg)} .recruit-lp .job-thumb.j-kanri2{background-image:url(images/recruit/job-kanri-photo.jpg)} .recruit-lp .interview{position:relative;padding:80px 0 90px;background:#fff;--iv-green-right:10%;--iv-card-left:10%;--iv-green-top:80px;--iv-green-bottom:0px;--iv-card-top:-80px} .recruit-lp .interview:before{content:"";position:absolute;z-index:0;left:0;right:var(--iv-green-right);top:var(--iv-green-top);bottom:var(--iv-green-bottom);background:var(--green);border-radius:0 30px 30px 0} .recruit-lp .interview .container{position:relative;z-index:1;width:auto;max-width:none;margin:var(--iv-card-top) 0 0 var(--iv-card-left);background:var(--light);border-radius:30px 0 0 30px;box-shadow:0 30px 70px rgba(11,61,39,.14);padding:54px clamp(30px,4vw,56px);padding-right:clamp(30px,6vw,90px)} @media(max-width:900px){.recruit-lp .interview{padding:0 0 44px} .recruit-lp .interview:before{right:0;top:0;bottom:auto;height:170px;border-radius:0} .recruit-lp .interview .container{margin:120px 16px 0;width:auto;border-radius:20px;padding:34px 22px}} .recruit-lp .req-thumb{background:url(images/recruit/req-tools.jpg) center/cover no-repeat} .recruit-lp .flow{position:relative} .recruit-lp .flow>.container{position:relative;z-index:1} .recruit-lp .benefits{background:#fff} .recruit-lp .benefits .section-heading{margin-bottom:0} .recruit-lp .bene2{display:flex;flex-direction:column;gap:22px} .recruit-lp .bene-row{display:grid;grid-template-columns:34% 1fr;gap:22px;align-items:stretch} .recruit-lp .bfeat{background:#fff;border:2px solid var(--green);border-radius:16px;padding:26px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center} .recruit-lp .bfeat .ic img{width:130px;height:130px;margin-bottom:16px} .recruit-lp .bfeat .lbl{font-size:14px;font-weight:700;color:var(--muted);margin-bottom:8px} .recruit-lp .bfeat .num{font:900 66px/1 "Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;color:var(--green)} .recruit-lp .bfeat .num span{font-size:24px;margin-left:4px;font-weight:900} .recruit-lp .bfeat .sub{margin-top:14px;font-size:13px;color:var(--ink)} .recruit-lp .bfeat .fbig{font-size:30px;font-weight:900;color:var(--ink);line-height:1.35;letter-spacing:.01em} /* 週休2日制カードの説明文だけ他の .bcard p より濃い色(--ink)になっていたため、 他の説明文と同じ色(--muted)に揃える（PC・SP共通。指示によりPCも確認） 2026-08-24 3回目修正 */ .recruit-lp .bfeat .fsub2{margin-top:14px;font-size:14px;color:var(--muted)} .recruit-lp .bene-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .recruit-lp .bcard{background:#fff;border:2px solid var(--green);border-radius:14px;padding:24px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center} .recruit-lp .bcard img{width:84px;height:84px;margin-bottom:14px} .recruit-lp .bcard h3{font-size:16px;margin:0 0 8px;font-weight:800;line-height:1.4} .recruit-lp .bcard p{margin:0;font-size:14px;color:var(--muted)} .recruit-lp .bcard p em{font-style:normal;color:var(--muted);font-weight:700;font-size:1em;margin:0} .recruit-lp .bene-more{text-align:right} /* 福利厚生ボタン 2026-08-23：白いカード群の中で埋もれていたため塗り（緑地に白文字）へ。 ホバーは他のボタンと同じく色を反転させる（白地に緑文字） */ .recruit-lp .bene-more .btn-outline{background:var(--green);color:#fff;border-color:var(--green)} .recruit-lp .bene-more .btn-outline:hover{background:#fff;color:var(--green);border-color:var(--green)} @media(max-width:860px){.recruit-lp .bene-row{grid-template-columns:1fr}} @media(max-width:520px){.recruit-lp .bene-grid{grid-template-columns:1fr}} .recruit-lp .req-sub{margin:16px 0 0} .recruit-lp .req-sub a{display:inline-flex;align-items:center;gap:8px;color:var(--green-dark);font-weight:700;font-size:14px;border-bottom:1px solid var(--green);padding-bottom:3px;transition:.2s} .recruit-lp .req-sub a:hover{color:var(--green);gap:12px} .recruit-lp .flow-access{text-align:center;margin-top:36px} /* 枠を消して「ラインが引かれる」テキストリンクに 2026-08-23 参考サイト .c-txt.line と同じく、下線は左から伸びて離れると右へ引っ込む */ .recruit-lp .flow-access a{display:inline-flex;align-items:center;gap:10px;color:var(--green-dark);font-weight:800;font-size:14px;padding:0 0 5px;position:relative;transition:.2s} .recruit-lp .flow-access a::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--green);transform:scaleX(0);transform-origin:right top;transition:transform .3s} .recruit-lp .flow-access a span{transition:transform .25s} .recruit-lp .flow-access a:hover::before{transform-origin:left top;transform:scaleX(1)} .recruit-lp .flow-access a:hover span{transform:translateX(5px)} .recruit-lp .req-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px} .recruit-lp.js .flow-list li.reveal{opacity:0!important;transform:translateX(46px)!important;transition:opacity .6s ease,transform .6s ease} .recruit-lp.js .flow-list li.reveal.in{opacity:1!important;transform:none!important} /* カードのホバーが4pxの持ち上げになったのではみ出し許容は不要。 overflow-clip-margin を残すと左右の丸矢印にカードが重なるため hidden に戻す 2026-08-23 */ .recruit-lp .iv-viewport{padding:18px 0} .recruit-lp .msg-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px} /* 「代表メッセージを読む」：.dual-cta__recruit（採用情報ボタン）と同じく、 PC・SPで分けず :hover 一本だけにする。ここに何も書かなければ、上の .recruit-lp .btn-outline:hover（背景反転）がPC・SPとも共通でそのまま効く。 JSの.is-tappedは使わない 2026-08-25 */ .recruit-lp .num-more{position:relative;z-index:1;text-align:center;margin-top:24px} .recruit-lp .num-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:14px;color:var(--green);font-weight:800;font-size:14px;padding:15px 34px;border:2px solid var(--green);border-radius:999px;background:#fff;transition:background .3s ease,color .3s ease} .recruit-lp .num-more>summary::-webkit-details-marker{display:none} .recruit-lp .num-more>summary svg{width:16px;height:16px;stroke:var(--green);transition:transform .25s} .recruit-lp .num-more[open]>summary svg{transform:rotate(180deg)} .recruit-lp .num-more>summary:hover{background:var(--green);color:#fff} .recruit-lp .num-more>summary:hover svg{stroke:#fff} .recruit-lp .num-more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px;text-align:left} @media(max-width:820px){.recruit-lp .num-more-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.recruit-lp .num-more-grid{grid-template-columns:1fr}} /* 職種を知る：案B 横スプリット・エディトリアル */ .recruit-lp .job-grid--split{display:flex;flex-direction:column;gap:16px} .recruit-lp .job-grid--split .job-card{display:grid;grid-template-columns:44% 1fr;border-radius:18px;overflow:hidden;position:relative} /* 持ち上げるホバーは「押下」に変更したため無効化（下の 押下 の指定を参照）2026-08-24 */ .recruit-lp .job-grid--split .job-card:hover{transform:none;box-shadow:none} .recruit-lp .job-grid--split .job-thumb{width:100%;height:100%;aspect-ratio:auto;min-height:190px} .recruit-lp .job-grid--split .job-body{padding:26px 30px;display:flex;flex-direction:column;justify-content:center;position:relative} .recruit-lp .job-grid--split .job-wm{position:absolute;right:22px;top:6px;font-family:var(--font-en,"Jost"),sans-serif;font-weight:700;font-size:66px;line-height:1;color:var(--green-soft);pointer-events:none} .recruit-lp .job-grid--split .job-tag{align-self:flex-start;font-size:11px;font-weight:800;color:#fff;background:var(--green);padding:5px 12px;border-radius:20px;letter-spacing:.02em} .recruit-lp .job-grid--split .job-body h3{font-size:22px;margin:10px 0 8px} .recruit-lp .job-grid--split .job-body p{font-size:14px;color:var(--muted);max-width:84%} .recruit-lp .job-grid--split .job-card .more{text-align:left;margin-top:14px} @media(max-width:820px){.recruit-lp .job-grid--split .job-card{grid-template-columns:1fr}.recruit-lp .job-grid--split .job-thumb{min-height:170px}} /* --- 職種カード：両端を斜めに（案3） 2026-08-15 --- */ .recruit-lp .job-grid--split .job-card{ border:0;border-radius:0; clip-path:polygon(30px 0,100% 0,calc(100% - 30px) 100%,0 100%); } /* 影は親（.job-card-wrap）に掛ける。 同じ要素に clip-path と filter を併用すると、影が clip-path に切り取られて消えるため。 ※ 実際の値（平らな緑の影・押下の動き）はファイル後方の「押下」ブロックで指定している。 ここは初期値のみ。 */ .recruit-lp .job-grid--split .job-card-wrap{filter:drop-shadow(0 7px 0 rgba(47,125,55,.5))} .recruit-lp .job-grid--split .job-thumb{clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%)} .recruit-lp .job-grid--split .job-body{padding:26px 52px 26px 46px} /* 通し番号は非表示（本文右の空きが目立つため） 2026-08-15 */ .recruit-lp .job-grid--split .job-wm{display:none} .recruit-lp .job-grid--split .job-body p{max-width:92%} .recruit-lp .job-grid--split .job-card:hover{box-shadow:none;filter:none} @media(max-width:820px){ .recruit-lp .job-grid--split .job-card{clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%)} .recruit-lp .job-grid--split .job-thumb{clip-path:none} .recruit-lp .job-grid--split .job-body{padding:24px 30px 24px 30px} } /* --- SP：ヒーローの緑帯は画面下部にあるため、下からせり上がる --- .js の有無に関わらず既定で隠す（2026-08-24）。 以前は .recruit-lp.js が付くまでの一瞬、緑帯が本来位置にそのまま見えてしまっていた （JSの実行がペイントに間に合わないタイミングがあるため）。 .js を条件から外し、常に隠した状態を初期値にすることでその一瞬の表示を消す。 */ @media(max-width:767px){ /* ★★ SPは「要素ごと動かす」従来の作りのまま。中の は動かさない ★★ 2026-09-06 PC側は clip-path と transform を分離したが（斜め線から四角がはみ出す不具合の対策）、 同じことをSPにも適用すると**動きが速くなって見える**。 理由：SPの帯は画面の下45%ぶんしかないため、中身（全高）を下から上げると 　　　帯の高さぶん動いた時点で埋まりきってしまい、そこで見た目の動きが終わる。 実測（幅390px）：緑の上端が最終位置に達するまで **従来0.75秒 → 分離すると0.12秒**。 残りの0.63秒は何も起きていない状態になっていた（2026-09-06 Mさん指摘で発覚）。 ★SPの帯は full-bleed（画面幅いっぱいの帯）で、PCのような細い斜め線ではないため、 　タイルのはみ出しは目立たない。**SPは従来の挙動を優先して据え置く。** */ /* PC側の 用の指定を打ち消す（同じ詳細度・後勝ちで効かせている。!important は使わない） */ .recruit-lp.js .hero-panel>i{transform:none} .recruit-lp .hero.ready .hero-panel>i{transform:none} /* --- ここから下は 2026-09-06 以前と同じ内容 --- */ .recruit-lp .hero-panel{transform:translateY(101%)} /* .js が付いた瞬間、詳細度の高い他の規則（.recruit-lp.js .hero-panel、PC用の上からの登場）に 負けて逆方向から出てしまっていたため、同じ詳細度でSP用の値を明示し直す（2026-08-24） */ .recruit-lp.js .hero-panel{transform:translateY(101%)} /* ★transition をこの行に明記しているのは、PC側の transition が `.hero-panel>i` に移ったため、`.hero-panel` には何も掛からなくなったから。 以前はPC側の規則から transition だけが降りてきていた（値は同じ .75s / 遅延 .70s）。 */ .recruit-lp .hero.ready .hero-panel{transform:translateY(0);transition:transform .75s cubic-bezier(.22,.75,.25,1) .70s} } /* --- JOBS 3カード：右から左へスライドイン 2026-08-19 --- ※ .job-card は JS 側で .reveal が付与される（js/recruit-lp.js の selectors）。 既定の fade-up（translateY）をここで上書きしている。 .in:hover を別に書いているのは、.reveal.in の transform:none が ホバー時の浮き上がり（translateY(-4px)）を打ち消してしまうため。 */ .recruit-lp.js .job-grid--split .job-card.reveal{opacity:0;transform:translateX(70px);transition:opacity .7s ease,transform .75s cubic-bezier(.2,.7,.25,1)} .recruit-lp.js .job-grid--split .job-card.reveal.in{opacity:1;transform:none} .recruit-lp.js .job-grid--split .job-card.reveal.in:hover{transform:translateY(-4px)} /* 上のカードから順に 0.13 秒ずつ遅らせる（JSの自動ディレイは .job-card-wrap が1枚ずつの親になるため全て 0s になる。ここで明示する） */ .recruit-lp .job-grid--split .job-card-wrap:nth-child(1) .job-card{transition-delay:0s} .recruit-lp .job-grid--split .job-card-wrap:nth-child(2) .job-card{transition-delay:.13s} .recruit-lp .job-grid--split .job-card-wrap:nth-child(3) .job-card{transition-delay:.26s} /* ここにあった @media(prefers-reduced-motion:reduce) の打ち消しも、 上記と同じ理由（サイト全体の挙動に揃える）で削除 2026-08-24 */ /* H.I さんの写真（先輩社員の声カード） 2026-08-20 */ /* NUMBERS 見出しの背後だけ回路パターンを白く抜く 2026-08-20 （背景はセクション全面に cover で敷いているため、見出しの位置に合わせて SVG側で避けるのは画面幅によってズレる。見出し側に白のにじみを敷くのが確実） */ .recruit-lp .numbers-title{position:relative;z-index:1} .recruit-lp .numbers-title::before{content:"";position:absolute;left:-46px;right:-70px;top:-34px;bottom:-28px; background:radial-gradient(closest-side,rgba(255,255,255,.96) 52%,rgba(255,255,255,.75) 76%,rgba(255,255,255,0) 100%); z-index:-1;pointer-events:none} /* ===== 職種カード：導線を「詳しく見る」から右端の三角矢印へ 2026-08-22 ===== ・カード全体がリンクなので、文字のリンクは置かず矢印だけで示す ・ホバーは「浮く」のではなく「沈む」（影を弱め、わずかに右下へ動かす） */ .recruit-lp .job-grid--split .job-card .more{display:none} .recruit-lp .job-grid--split .job-body{padding-right:86px} /* 矢印は縦長のシェブロンを2つ重ねた「»」。 clip-path の内側3点は、線幅2pxを保つ位置を三角比から算出した値 （左端の縦ずれ＝13.5%、内側の頂点＝幅の73%） */ .recruit-lp .job-grid--split .job-body::before, .recruit-lp .job-grid--split .job-body::after{content:"";position:absolute;top:50%; width:10px;height:22px;margin-top:-11px;background:var(--green); clip-path:polygon(0 0,100% 50%,0 100%,0 86.5%,73% 50%,0 13.5%);transition:.22s} .recruit-lp .job-grid--split .job-body::before{right:50px;opacity:.4} .recruit-lp .job-grid--split .job-body::after{right:40px} .recruit-lp .job-grid--split .job-card-wrap:hover .job-body::before{right:46px;opacity:1;background:var(--green-dark)} .recruit-lp .job-grid--split .job-card-wrap:hover .job-body::after{right:36px;background:var(--green-dark);transform:none} /* ===== 押下（ホバー／タップ） 2026-08-24 ユーザー指示で変更 ===== 以前は「右下の影のほうへ斜めに沈む」動きだったが、参考サイトの『押下』に合わせて **真下にまっすぐ沈む**形に変更した。 ・影＝ブランドの緑・ぼかし無し・真下 7px（物理ボタンの側面に見立てる） ・押した状態＝カードが 7px 下がり、影が消える（＝押し込まれて厚みが無くなる） ・沈む量と影の高さを同じ 7px にしているので、カードの下端が影のあった位置に着地する ※ 影は clip-path の都合で親（.job-card-wrap）の filter で描いている */ .recruit-lp .job-grid--split .job-card-wrap{transition:filter .16s cubic-bezier(.22,.7,.3,1)} .recruit-lp .job-grid--split .job-card{transition:transform .16s cubic-bezier(.22,.7,.3,1)} .recruit-lp .job-grid--split .job-card-wrap:hover{filter:drop-shadow(0 0 0 rgba(47,125,55,0))} .recruit-lp .job-grid--split .job-card-wrap:hover .job-card{transform:translateY(7px)} /* .reveal.in の transform:none に負けないよう、同じ詳細度で後ろに置く （スライドインのアニメーションが終わったあともホバーが効くようにするため） */ .recruit-lp.js .job-grid--split .job-card-wrap:hover .job-card.reveal.in{transform:translateY(7px)} .recruit-lp .job-grid--split .job-card:hover{transform:none} @media(max-width:820px){ .recruit-lp .job-grid--split .job-body{padding-right:64px} .recruit-lp .job-grid--split .job-body::before{right:32px} .recruit-lp .job-grid--split .job-body::after{right:22px} } /* スマホ・タブレット（ホバーできない端末）ではタップした瞬間に沈める。 指を置いた時点で反応してほしいので、時間は短め（.14秒）。 タップ時のグレーのハイライトは演出と重なるので消す 2026-08-22 */ @media(hover:none){ .recruit-lp .job-grid--split .job-card{-webkit-tap-highlight-color:transparent; transition:transform .12s cubic-bezier(.22,.7,.3,1)} .recruit-lp .job-grid--split .job-card-wrap{transition:filter .12s cubic-bezier(.22,.7,.3,1)} /* ホバー相当の見た目は出さない（タップ後に居座るのを防ぐ） */ .recruit-lp .job-grid--split .job-card-wrap:hover{filter:drop-shadow(0 7px 0 rgba(47,125,55,.5))} .recruit-lp .job-grid--split .job-card-wrap:hover .job-card{transform:none} .recruit-lp.js .job-grid--split .job-card-wrap:hover .job-card.reveal.in{transform:none} .recruit-lp .job-grid--split .job-card-wrap:hover .job-body::before{right:50px;opacity:.4;background:var(--green)} .recruit-lp .job-grid--split .job-card-wrap:hover .job-body::after{right:40px;background:var(--green)} /* タップしている間だけ真下へ沈む＋矢印が反応する（PCの押下と同じ動き） */ .recruit-lp .job-grid--split .job-card-wrap.is-tapped{filter:drop-shadow(0 0 0 rgba(47,125,55,0))}.recruit-lp .job-grid--split .job-card-wrap:active .job-card, .recruit-lp .job-grid--split .job-card-wrap.is-tapped .job-card{transform:translateY(7px)}.recruit-lp.js .job-grid--split .job-card-wrap:active .job-card.reveal.in, .recruit-lp.js .job-grid--split .job-card-wrap.is-tapped .job-card.reveal.in{transform:translateY(7px)}.recruit-lp .job-grid--split .job-card-wrap:active .job-body::before, .recruit-lp .job-grid--split .job-card-wrap.is-tapped .job-body::before{right:46px;opacity:1;background:var(--green-dark)}.recruit-lp .job-grid--split .job-card-wrap:active .job-body::after, .recruit-lp .job-grid--split .job-card-wrap.is-tapped .job-body::after{right:36px;background:var(--green-dark)} } /* エントリー：背景写真の右側に人物がいるので、文字とボタンを左へ寄せる 2026-08-22 （中央ぞろえの体裁は保ったまま、かたまりごと左に移動させる） */ /* ===== 先輩社員の声：新デザインカード（採用トップのみ / 2026-08-23） ===== */ /* ===== 社員カード 新デザイン ===== 画面幅・レスポンシブによらずレイアウトが崩れないよう、カード自身を コンテナクエリの基準(container-type)にして、内部の文字サイズ・余白は すべてカードの実際の幅(cqw)に対する割合で決めている。 ブレークポイントでの分岐に頼らないため、途中の幅でも比率が保たれる。 */ .iv3{position:relative;overflow:hidden;background:#fff; aspect-ratio:3/4;display:block;text-decoration:none; container-type:inline-size; box-shadow:0 4px 8px rgba(0,0,0,.06),0 6px 12px rgba(0,0,0,.04); transition:box-shadow .2s,transform .2s} .iv3:hover,.iv3.in:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.12)} /* 背景の斜めスラッシュ（S1：右上の角だけに三角形／元の形に戻した） */ .iv3::before{content:"";position:absolute;inset:0;z-index:0; background:var(--slash,#8fbf97); clip-path:polygon(26% 0, 100% 0, 100% 62%)} /* 写真。recruit-lp.css の .recruit-lp img{object-fit:cover} に負けないよう .recruit-lp を前置して詳細度を上げている。高さ・横位置は%指定なので カードの幅が変わっても常に同じ比率で追従する。 画像は透明部分を除いた人物の輪郭ぎりぎりでトリミング済み（p-*-tight.png）なので、 bottom:0 で人物の下端が常にカード下端に接続し、height(+scale)がそのまま 「頭頂の高さ」を決める。right(+scale)で人物の重心（顔の中心）を右寄りに揃えている。 3人とも同じ固定値ではなく、元画像ごとにCSS変数で個別調整する。 */ .recruit-lp .iv3__photo{ --portrait-height:55%; --portrait-right:0%; --portrait-bottom:0%; --portrait-scale:1; position:absolute;right:var(--portrait-right);bottom:var(--portrait-bottom);top:auto; width:auto;height:var(--portrait-height);max-width:none;z-index:1; object-fit:contain;object-position:right bottom; transform:scale(var(--portrait-scale));transform-origin:right bottom; pointer-events:none} /* H.Iさん：自由配置ツールで手動決定した最終値 */ .recruit-lp .iv3__photo.ph-hi{--portrait-height:55.5%;--portrait-right:-20%;--portrait-bottom:0%;--portrait-scale:1.33} /* K.Hさん・A.Sさんは、H.Iさんの頭頂位置・顔の大きさ・重心位置に、 透明部分を除いた人物の輪郭（頭頂〜輪郭幅）を基準に数値だけを合わせている */ .recruit-lp .iv3__photo.ph-kh{--portrait-height:74.9%;--portrait-right:-11%;--portrait-bottom:0%;--portrait-scale:1} .recruit-lp .iv3__photo.ph-as{--portrait-height:74.5%;--portrait-right:-28%;--portrait-bottom:0%;--portrait-scale:1} .iv3__body{position:relative;z-index:2;height:100%;box-sizing:border-box} /* メッセージは行数（2行／3行）が原稿ごとに異なるため、上端からの余白だけを揃えても メッセージ末尾〜人物までの間隔が原稿によってバラつく。そこで人物の頭頂位置と同じ高さまでの 領域を確保し、その領域の下端にメッセージを揃えることで、行数に関係なく 「メッセージ末尾と人物の間隔」を一定に保っている（自由配置ツールで決定した値） */ .iv3__msg{position:absolute;top:0;left:0;right:0;height:46%;box-sizing:border-box; display:flex;align-items:flex-end; padding:26px 20px 52px} /* 改行は原稿の
で制御し、意図しない位置で折り返さないようにする */ /* 3行分の高さを常に確保し、下端揃えの中で上から流すことで、 2行の原稿でも1行目の位置が3行の原稿と揃う */ /* .iv3__quote の指定は parts.css に一本化した 2026-08-30。ここに同値コピーを戻さないこと （読み込み順で parts.css が後なので、ここに書いても効かないまま残る） */ /* プロフィール（緑の短い線・イニシャル・部署・入社年）は人物と同じ情報グループに見えるよう、 本文の流れから外してカード上端からの割合で固定している（自由配置ツールで決定した値） */ .iv3__foot{position:absolute;left:20px;top:39%;right:20px} .iv3__rule{width:30px;height:2px;background:#47aa4f;margin:0 0 9px} .iv3__name{font:700 clamp(13px,4.8cqw,15px)/1.45 "Noto Sans JP",sans-serif;color:#1a1a1a} .iv3__role{font:400 clamp(11px,4.2cqw,13px)/1.5 "Noto Sans JP",sans-serif;color:#6c766e;margin-bottom:4px} /* 入社年 */ .iv3__year{font:400 clamp(10px,3.6cqw,12px)/1.5 "Noto Sans JP",sans-serif;color:#8b948d;margin:0} /* CTAはプロフィールから独立させ、カード下端から一定距離の位置に固定（自由配置ツールで決定した値） */ .iv3__more{position:absolute;left:20px;bottom:43px;z-index:2; display:inline-flex;align-items:center;gap:14px;min-height:44px; font:700 12px/1 "Noto Sans JP",sans-serif} .iv3__more i{display:block;width:38px;height:1.5px;background:#47aa4f;position:relative;transition:width .25s} .iv3__more i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1.5px solid #47aa4f;border-right:1.5px solid #47aa4f;transform:rotate(45deg)} .iv3:hover .iv3__more i{width:52px} /* .recruit-lp a{color:inherit} に負けないよう詳細度を確保 */ .recruit-lp .iv3{color:#1a1a1a} .recruit-lp .iv3 .iv3__more{color:#2f7d37} /* SP：左右の矢印が横幅を圧迫してカードが198pxまで痩せていたため、 矢印はカードの上に重ねてスライダー本体を全幅で使う */ @media(max-width:767px){ .recruit-lp .interview-slider{position:relative;gap:0} /* 縦長化した分、矢印は文字ブロックに重ならないよう写真側(下寄り)に配置 */ .recruit-lp .interview-slider .iv-nav{position:absolute;top:88%;transform:translateY(-50%);z-index:4; background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.10)} .recruit-lp .interview-slider .iv-prev{left:-4px} .recruit-lp .interview-slider .iv-next{right:-4px} } /* ===== 募集要項リスト・ENTRYボタン・ENTRY FLOW（採用トップのみ / 2026-08-23） ===== */ /* 募集要項リストの見た目は parts.css の共通 .requirements-list に一本化した（2026-08-29）。 以前ここに同じ値のコピーがあったが、そのせいで「どのスコープにも当たらないページ」で カード幅が揃わない事故が起きたため削除。ここに書き足さないこと。 */ /* ENTRYボタンの体裁は parts.css の素の .entry .entry-button 系に一本化（2026-08-29）。ここに書かない */ /* ===== ENTRY FLOW：面接・入社に詳細パネルを付ける（プレビュー） ===== */ .recruit-lp .flow-list li{padding:0 6px} /* 詳細を持つステップの背景パネル。丸の少し上から始めて内容の下まで伸ばす */ /* z-index は作らない。作るとパネルが緑の線より前に来て線が途切れる */ /* 文章がパネルからはみ出さないよう、li に左右の余白を持たせて パネル(::before)は padding も含めた li 全幅に敷く */ .recruit-lp .flow-list li.fstep{padding:0 20px} .recruit-lp .flow-list li.fstep::before{ content:"";position:absolute;left:0;right:0; top:-34px;bottom:-26px;background:#f3f7f3;z-index:-1} /* 03と05のパネルの高さを揃える */ .recruit-lp .flow-list{align-items:stretch} .recruit-lp .flow-list li.fstep>span, .recruit-lp .flow-list li.fstep>strong, .recruit-lp .flow-list li.fstep>small, .recruit-lp .flow-list li.fstep>.flow-access{position:relative;z-index:1} /* 面接・入社の見出しは他より大きく */ /* 見出しは全ステップ同じ大きさに揃える */ /* 見出しは全ステップ同じ大きさ。「下のフォームから応募」が折り返さないよう、 リスト全幅を基準にしたコンテナクエリで1列分の幅に追従させる（1列＝20cqw） */ .recruit-lp .flow-list{container-type:inline-size} .recruit-lp .flow-list strong{font-size:clamp(12px,1.76cqw,20px);font-weight:900;margin-bottom:6px;white-space:nowrap} /* 横線がパネルに隠れる問題の対処。 .reveal の will-change:transform が li に重ね合わせ文脈を作るため、 パネル(::before)が親側の横線より前に出てしまう。will-change を解除して回避する */ .recruit-lp.js .flow-list li.reveal{will-change:auto} /* 詳細ブロック：枠をなくす。 以前は各項目の上に「DETAIL 01 / 02」のラベルを ::before で出していたが、 不要との指示により削除（counter も使わなくなったため外した） 2026-08-24 */ .recruit-lp .flow-list .fd{background:none;border:0;border-radius:0;padding:0;margin-top:20px} .recruit-lp .flow-list .fd .fi{font-size:13px;line-height:1.75;color:#5b6b5e} .recruit-lp .flow-list .fd .fi+.fi{margin-top:22px;padding-top:22px;border-top:1px dashed #cfd8d1} .recruit-lp .flow-list .fd b{display:block;color:#1a1a1a;font-size:15px;font-weight:800;margin-bottom:5px} /* 面接会場へのアクセス：03のパネル内に入れる枠付きボタン */ .recruit-lp .flow-list .flow-access{margin:24px 0 0;text-align:center} .recruit-lp .flow-list .flow-access a{ display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%; padding:13px 10px;border:1px solid var(--green);border-radius:4px;background:#fff; /* 文字色は企業カラー(--green #47aa4f)。--green-dark(#2f7d37) では濃く沈んで 枠の緑と色味がずれて見えていた。PC・SP共通 2026-08-24 */ color:var(--green);font-weight:800;font-size:12.5px;white-space:normal;line-height:1.45; /* 文字色は即座に切り替える（理由は .btn-outline のコメント参照）2026-08-25 */ transition:color .08s linear, border-color .2s ease; /* F方式（左から色が流れ込む）用 2026-08-25 */ position:relative;z-index:0;overflow:hidden} .recruit-lp .flow-list .flow-access a::before{display:none} .recruit-lp .flow-list .flow-access a::after{ content:"";position:absolute;inset:0;z-index:-1;background:var(--green); transform:scaleX(0);transform-origin:left center; transition:transform .3s cubic-bezier(.45,0,.55,1)} .recruit-lp .flow-list .flow-access a:hover span{transform:translateX(4px)} /* 背景は塗り替えず::afterを左から広げる。矢印(→)も文字色を引き継いで白くなる */ .recruit-lp .flow-list .flow-access a:hover{color:#fff} .recruit-lp .flow-list .flow-access a:hover::after{transform:scaleX(1)} /* SP：縦並びのときはパネルを文章側だけに敷く */ /* 中身（ENTRY FLOWの縦積みレイアウト）はファイル末尾の @media(max-width:1023px) へ移動した 2026-08-30 */ /* SP（縦積み）は幅いっぱいのため、見出しは全ステップ固定サイズで揃える */ /* 中身（ENTRY FLOWの縦積みレイアウト）はファイル末尾の @media(max-width:1023px) へ移動した 2026-08-30 */ /* 数字カード：アイコンと数字が必ず横並びのままになるよう、 カード自身を基準にしたコンテナクエリで幅に追従させる（折り返し防止）。 個別に大きさを持つカード（創業・平均年齢・未経験入社率・下段グリッド）にも 同じ詳細度で上書きし、どの幅でも縦積みにならないようにする */ .recruit-lp .number-card{container-type:inline-size} @media(max-width:640px){ .recruit-lp .number-card{gap:4px 8px;padding:10px 8px} .recruit-lp .number-card .nc-icon, .recruit-lp .number-card .nc-icon.nc-15{--ih:clamp(22px,26cqw,44px)} .recruit-lp .number-card strong, .recruit-lp .num-more-grid .number-card strong{--ns:clamp(15px,15.5cqw,28px);white-space:nowrap} .recruit-lp .number-card strong span, .recruit-lp .num-more-grid .number-card strong span{--nss:clamp(9px,6cqw,14px)} .recruit-lp .number-card small{font-size:clamp(10px,7.5cqw,12px)} /* 大きめのカードは元の大きさを上限に、幅が足りなければ縮める */ .recruit-lp .number-card.tall .nc-icon{--ih:clamp(26px,30cqw,66px)} .recruit-lp .number-card.tall strong{--ns:clamp(20px,23cqw,56px)} .recruit-lp #np-inexp .nc-icon{--ih:clamp(40px,34cqw,96px)} .recruit-lp .number-card.qual .nc-icon{--ih:clamp(22px,11cqw,44px)} .recruit-lp .number-card.qual strong{--ns:clamp(18px,9cqw,34px)} } /* アイコンと数字は、どんな幅でも絶対に縦積みにならないよう、 カードを「2列グリッド（アイコン｜数字）」で組む。 flex の折り返しに依存しないため、幅が足りない場合も横並びのまま縮む。 */ /* 2026-08-30 改訂：以前は「見出し／アイコン／数字／注釈」を1つの2列グリッドに まとめて入れていたが、2列にまたがる見出し・注釈の“折り返さない幅”が列幅を決めてしまい、 長い見出し（リピート率・継続取引率）や長い注釈（2026年度 18億円見込み…）があるカードでは 数字の列が押し潰され、数字（white-space:nowrap）が枠の外へ描かれていた。 アイコン＋数字だけを .nc-row という別の行にくくると、見出し・注釈の長さは 数字の配置にいっさい影響しなくなる。トップページの .topnum__row と同じ構造。 */ .recruit-lp .number-card:not(.qual){ display:flex;flex-direction:column;flex-wrap:nowrap; align-items:center;justify-content:center;row-gap:4px} /* アイコン｜数字。max-width:100% でカード幅を超えないようにし、 数字は nowrap のまま（「3,000／現場」と割れないため）。 幅が足りないカードは .nc--long の倍率で文字を小さくして収める（末尾の18項） */ .recruit-lp .nc-row{display:flex;max-width:100%;align-items:center;justify-content:center;gap:14px} .recruit-lp .nc-row>.nc-icon{min-width:0} .recruit-lp .nc-row>strong{min-width:0;white-space:nowrap} @media(max-width:640px){.recruit-lp .nc-row{gap:8px}} /* ===================================================================== 採用トップ SPレスポンシブ修正 2026-08-24（このファイル末尾にまとめて追加） ここから下は原則 max-width:767px（SP）限定。PC表示には影響しない。 ===================================================================== */ /* 9. ENTRY：.entry セクションはインタビューページ（page-interview-*.php）とも 共有しているため、必ず .recruit-lp を前置して採用トップだけに限定する。 ・高さ：parts.css のSP用 min-height:520px が高すぎたため下げる ・背景：3人の人物は元画像(1600x900)の右寄り・やや下寄りにいるため、 centerのままだと縦長のSPでは中央の何もない壁面ばかりが写っていた。 人物が入るように位置を右・やや下へ寄せ、上下の不要な余白を実質カットする 2026-08-24 */ @media(max-width:767px){ /* ENTRYのSP高さ・背景位置は parts.css の素の .entry に一本化（2026-08-29）。ここに書かない */ /* 74%だと一番右の人物が画面外に切れていた。写真は1600x900、SPは440x420なので cover で0.467倍＝746.7px幅になり、横に306.7pxはみ出す。74%指定ではその 74%ぶん左へ寄り、元画像のx=1429までしか映らない（右端の人物はx=1560付近）。 右端揃え(100%)にすると x=657〜1600 が映り、3人とも収まる 2026-08-24 */ } /* 1. メッセージ/企業理念ボタンの間隔を詰める。 各ボタンが .btn-outline 自身の margin-top:24px を持っており、 .msg-links の gap（横並び時の余白）と二重に効いて縦の余白が広くなっていた。 SPでは縦積みになるボタン自身の margin-top を消し、gap だけで間隔を作る */ @media(max-width:767px){ .recruit-lp .msg-links{gap:10px;margin-top:24px} .recruit-lp .msg-links .btn-outline{margin-top:0} } /* 2. NUMBERS：背景の回路パターンの配置。「1枚の画像の上下を切り離して、 セクションの上下にそれぞれ配置する」という指示どおりの作りに変更した。 これまでは同じSVGを2枚重ねていたため、模様が2回ずつ出て意匠が重複していた。 今回は元の numbers-circuit.svg (1600x860) を高さのちょうど半分で切り分けた 専用ファイルを2つ書き出し、 ・numbers-circuit-top.svg … 元画像の上半分（左上の模様側）→ セクション上部へ ・numbers-circuit-bottom.svg … 元画像の下半分（右下の模様側）→ セクション最下部へ を1枚ずつ配置している。切り口が直線で目立たないよう、各ファイルの切断面側 30%にグラデーションのマスクを掛けて背景へ溶けるようにしてある （SVG内の linearGradient#cut / mask#cutm）。 幅は縦横比そのままの 100%（＝セクション幅）で、引き伸ばし歪みは無い 2026-08-24 6回目修正 */ @media(max-width:767px){ .recruit-lp .circuit{ background-image:url(images/recruit/numbers-circuit-top.svg),url(images/recruit/numbers-circuit-bottom.svg); /* 実機で模様が細かすぎたため 140%（＝1.4倍）に拡大。左上／右下を基準に置いているので、 はみ出すのは模様が薄れていく内側ではなく画面外側になる 2026-08-24 */ background-size:140% auto,140% auto; background-position:left top,right bottom; background-repeat:no-repeat,no-repeat} } /* 3. 未経験入社率カードの比率を、有資格者カード（.wide.qual）と同じ 「横2列ぶんの幅×通常の高さ1行」に揃える。 これまでは grid-row:span 2 で縦に2行ぶん取っていたため、他のカードより 縦長になっていた。行を1つに戻し、中のアイコン・数字も収まるサイズに縮める */ @media(max-width:767px){ .recruit-lp #np-inexp{grid-row:auto!important;padding:14px 16px!important} .recruit-lp #np-inexp .nc-icon{--ih:64px!important} .recruit-lp #np-inexp strong{--ns:40px!important} .recruit-lp #np-inexp small{font-size:14px!important} } /* 5. INTERVIEW：矢印（‹ ›）をカード上に重ねるのをやめ、下のドット（・・・）と 同じ行の左右に並べる。ボタンも行の高さに収まるよう小さくする */ @media(max-width:767px){ .recruit-lp .interview-slider .iv-nav{position:absolute;top:auto;bottom:0;transform:none; width:34px;height:34px;font-size:20px} .recruit-lp .interview-slider .iv-prev{left:4px} .recruit-lp .interview-slider .iv-next{right:4px} .recruit-lp .iv-dots{bottom:13px} } /* 6. BENEFITS：4つのカード（.bcard）はアイコン→文字の縦並びだったため縦に長かった。 SPではアイコンを左、文字を右の横並びにしてカードの高さを低くする */ /* 太字タイトルと説明文の開始位置（縦のライン）を全カードで揃えるため、 flexの横並び（各要素が自分の文字幅ぶんだけ場所を取る）ではなく グリッドで「アイコン列／文字列」を固定する。カードの高さも .bfeat と同じ2行ぶん（アイコン52px基準）に自然と揃う 2026-08-24 */ @media(max-width:767px){ /* アイコンが52pxだと線が細く見えづらいとのフィードバックにより62pxへ拡大 （線画そのものは変えず表示サイズだけ上げて、相対的な線の太さを確保）2026-08-25 */ .recruit-lp .bcard{display:grid;grid-template-columns:62px 1fr;column-gap:14px;row-gap:4px; text-align:left;align-items:center;padding:16px 18px} .recruit-lp .bcard img{grid-row:1/3;grid-column:1;width:62px;height:62px;margin:0} /* 太字見出しと説明文を上下2段に分けたことで、見出し内の改行は不要になったため 手動
は削除。自然な折り返しに任せても、グリッドで列位置が固定されているので カードごとの縦のラインはズレない 2026-08-24 3回目修正 */ .recruit-lp .bcard h3{grid-column:2;grid-row:1;margin:0} .recruit-lp .bcard p{grid-column:2;grid-row:2;margin:0} } /* 完全週休2日制（.bfeat）だけ他のカードと同じ横並びになっておらず縦に長く 残っていたため、.bcard と同じグリッド構成で高さを揃える 2026-08-24 */ @media(max-width:767px){ /* .bcardと同じ理由・同じサイズで62pxへ拡大 2026-08-25 */ .recruit-lp .bfeat{display:grid;grid-template-columns:62px 1fr;column-gap:14px;row-gap:2px; text-align:left;align-items:center;padding:16px 18px} .recruit-lp .bfeat .ic{grid-row:1/3;grid-column:1} .recruit-lp .bfeat .ic img{width:62px;height:62px;margin-bottom:0} .recruit-lp .bfeat .fbig{grid-column:2;grid-row:1;font-size:17px;line-height:1.4} .recruit-lp .bfeat .fsub2{grid-column:2;grid-row:2;margin-top:0;font-size:13px} } /* 「福利厚生・制度をすべて見る」：白いカード群に埋もれないようにした緑のピル型ボタンは SPだとカード群の中で浮いて見えるため、枠を外して下線リンクに変更。 下線が左から右へ伸びる動きは .flow-access a と同じ仕組み（タップでも:hoverと同様に発火する） 2026-08-24 */ @media(max-width:767px){ .recruit-lp .bene-more .btn-outline{ display:inline-flex;align-items:center;gap:10px; padding:0 0 5px;margin-top:0;border:0;border-radius:0;background:none; /* 文字色は企業カラー(--green #47aa4f)。以前は --green-dark(#2f7d37) で濃すぎた。 タップ時に line379 の :hover で --green に変わっていたのが正しい色 2026-08-24 */ color:var(--green);position:relative;font-weight:800} .recruit-lp .bene-more .btn-outline:hover, .recruit-lp .bene-more .btn-outline:active{background:none;color:var(--green)} .recruit-lp .bene-more .btn-outline::before{ content:"";position:absolute;left:0;bottom:0;width:100%;height:2px; background:var(--green);transform:scaleX(0);transform-origin:right top;transition:transform .3s} .recruit-lp .bene-more .btn-outline:hover::before, .recruit-lp .bene-more .btn-outline:active::before{transform-origin:left top;transform:scaleX(1)} .recruit-lp .bene-more .btn-outline span{transition:transform .25s} .recruit-lp .bene-more .btn-outline:hover span, .recruit-lp .bene-more .btn-outline:active span{transform:translateX(5px)} } /* 7. GUIDELINE のSP調整も parts.css の共通 .requirements-list 側へ移動（2026-08-29） */ /* 8-a. ENTRY FLOW：面接(03)・入社(05) の丸数字が縦軸からずれる問題。 .fstep には（本来パネル用の）padding:0 20px が付いており、丸を含む行全体が 右にずれていた。SPでは0に戻して他のステップと同じ位置に揃える */ /* 中身（ENTRY FLOWの縦積みレイアウト）はファイル末尾の @media(max-width:1023px) へ移動した 2026-08-30 */ /* 8-b. ENTRY FLOW：縦軸の線を、コンテナ全体基準の1本の線から 「各ステップが自分の高さぶんだけ次のステップへ線を引き継ぐ」方式に変更。 03・05は原稿（DETAIL説明文）の長さでステップ自体の高さが変わるため、 コンテナ基準の固定オフセットでは5の丸を過ぎて線が伸びてしまっていた。 最後のステップ（5/入社）だけは丸の高さ（48px）で線を止める */ /* 中身（ENTRY FLOWの縦積みレイアウト）はファイル末尾の @media(max-width:1023px) へ移動した 2026-08-30 */ /* 8-c. ENTRY FLOW：01・02・04（.fstepでない通常の項目）が、スクロール表示のたびに 右からスライドインする演出（.flow-list li.reveal の translateX）のせいで、 アニメーション中だけ丸・縦線が軸からずれて見えていた。 丸と縦線は li 自身を基準にした絶対配置のため、li ごと動くと軸が揃わなくなる。 SPでは横スライドをやめ、フェードのみにして軸のジッターをなくす 2026-08-24 */ /* 中身（ENTRY FLOWの縦積みレイアウト）はファイル末尾の @media(max-width:1023px) へ移動した 2026-08-30 */ /* 8-d. ENTRY FLOW：01・02・04（通常項目）の丸が、03・05（fstep）の丸より右にずれる問題の 本当の原因。643行目に「.flow-list li{padding:0 6px}」というメディアクエリで囲まれていない （＝PC/SP問わず常に効く）指定があり、これが 240行目のSP用リセット（padding:0）を ソース順で後から上書きしていた。fstepは868行目に専用の上書きがあるため揃って見えたが、 通常項目だけpadding:0 6pxが残り、丸の位置が横に約6pxずれていた。 ここで通常項目分もSP専用で明示的にpadding:0へ戻す 2026-08-24 */ /* 767→1023px。ENTRY FLOWの縦積みを広げたのに合わせる（2026-08-30）。 ※この指定だけ、コメント中に波括弧があって自動移動から漏れたので手で直した */ @media(max-width:1023px){ .recruit-lp .flow-list li{padding:0} } /* 8-e. ENTRY FLOW：縦線が01の丸より上に突き出る問題。 縦線(::after)は li の上端(top:0)から引いているが、01だけは本文が2行になって li 自体が丸より高くなる（実測 li=65.4px / 丸=48px）。丸は align-items:center で 縦中央に置かれるため上に約8.7pxの余白ができ、その分だけ線が丸からはみ出していた。 02・04は li の高さが丸と同じ48pxなので、はみ出しは01でしか起きない。 先頭だけ線の開始位置を丸の中心（＝liの縦中央50%）に合わせ、丸の裏から下へ引く 2026-08-24 */ /* 中身（ENTRY FLOWの縦積みレイアウト）はファイル末尾の @media(max-width:1023px) へ移動した 2026-08-30 */ /* 8-f. ENTRY FLOW：見出しの文字が丸数字に対して上にずれる問題。 li は grid（1列目=丸48px／2列目=本文）で、丸に grid-row:1/3 が入っているため 常に2行ぶんの高さが確保される。02・04のように （説明文）が無い項目でも 空の2行目ができ、丸は2行ぶん(48px)の中央＝24pxに、見出しは1行目だけ(38.4px)の 中央＝19.2px に置かれるので、実測で約7.8px 上にずれていた。 01は説明文があり本文ブロック全体の中央＝丸の中央で揃っていたため、 ずれているのは説明文の無い項目だけ、という見え方になっていた。 ・説明文が無い項目（＝ が最後の子）は見出し自身を2行ぶんに広げて中央へ ・03/05（.fstep）は本文が上揃えのため、見出しだけ丸の高さの中央へ これで丸と見出しの中心が全ステップで一致する 2026-08-24 */ /* 中身（ENTRY FLOWの縦積みレイアウト）はファイル末尾の @media(max-width:1023px) へ移動した 2026-08-30 */ /* ===================================================================== 採用トップ SP調整 2026-08-24（第7回） ===================================================================== */ /* 10. ENTRY：キャッチコピーの文字サイズを統一。 「未経験から」は parts.css の .entry-inner p（19px）を拾っていて、 h2（SPで38px）と並ぶと明らかに小さく、1つのコピーに見えなかった。 .entry の見た目はインタビューページ（page-interview-*.php）と共通なので、 .recruit-lp を付けて採用トップだけに効かせる */ @media(max-width:767px){ } /* 11. INTERVIEW：PCの「緑の角丸ブロックと白カードが左右にずれて重なる」意匠を SPでも維持する。900px以下の指定（.interview:before を高さ170pxの帯にして カードを中央に置く）だと、重なりが無くなって単なる帯になっていた。 PCと同じ考え方のまま寸法だけ縮める： ・緑ブロック … 左端から右8%手前まで。上60px下40pxの位置で右側だけ角丸 ・白カード … 左8%から右端まで。上に40px引き上げて左側だけ角丸 互いに逆方向へずらすことで、PCと同じ重なりがSPでも出る */ @media(max-width:767px){ .recruit-lp .interview{padding:56px 0 64px} .recruit-lp .interview:before{ left:0;right:8%;top:56px;bottom:44px;height:auto;border-radius:0 20px 20px 0} .recruit-lp .interview .container{ margin:-44px 0 0 8%;width:auto;max-width:none; border-radius:20px 0 0 20px;padding:34px 20px 34px 22px; box-shadow:0 20px 44px rgba(11,61,39,.14)} } /* 12. NUMBERS：カード内の文字・アイコンが小さすぎたので上限値を引き上げる。 コンテナクエリ（cqw＝カード自身の幅に対する％）で縮む仕組みは折り返し防止に 必要なのでそのまま残し、clamp の最大値と係数だけ上げている。 数字は white-space:nowrap のため、上げすぎるとカードから溢れる。 440px幅（カード実寸およそ198px）で溢れないことを実測して決めた値 */ @media(max-width:640px){ .recruit-lp .number-card{padding:12px 8px} .recruit-lp .number-card .nc-icon, .recruit-lp .number-card .nc-icon.nc-15{--ih:clamp(26px,30cqw,58px)} .recruit-lp .number-card strong, .recruit-lp .num-more-grid .number-card strong{--ns:clamp(17px,19cqw,38px)} .recruit-lp .number-card strong span, .recruit-lp .num-more-grid .number-card strong span{--nss:clamp(10px,7.2cqw,16px)} .recruit-lp .number-card small{font-size:clamp(11px,8.6cqw,14px)} .recruit-lp .number-card .num-note{font-size:11.5px} .recruit-lp .number-card.tall .nc-icon{--ih:clamp(30px,36cqw,88px)} .recruit-lp .number-card.tall strong{--ns:clamp(22px,29cqw,74px)} .recruit-lp .number-card.tall small{font-size:16px} .recruit-lp .number-card.qual .nc-icon{--ih:clamp(26px,16cqw,68px)} .recruit-lp .number-card.qual strong{--ns:clamp(20px,13cqw,50px)} .recruit-lp .number-card.qual small{font-size:15px} /* 未経験入社率は2列ぶんの幅があり余裕が大きいので、単独でさらに大きくする （既存指定が !important のため、こちらも同じ強さで上書きする） */ .recruit-lp #np-inexp .nc-icon{--ih:92px!important} .recruit-lp #np-inexp strong{--ns:56px!important} .recruit-lp #np-inexp small{font-size:17px!important} } /* 13. NUMBERS：数字カードの後半を「その他の数字を見る」で畳めるようにする。 SPで13枚が一列に続くと section が長くなりすぎるため、 ・常時表示 … 創業／平均年齢／平均勤続年数／未経験入社率／年間休日／平均月給 （応募者が自分の働き方を判断するための数字） ・畳む … 年間売上高／従業員数／年間施工件数／リピート率／有資格者／ 月平均残業／有給取得率（会社の規模・実績・制度の詳細） PCは
のまま summary を隠して従来どおり全部表示する。 SPだけ js/recruit-lp.js が読み込み時に open を外して閉じた状態にする。 ＝ JSが動かない環境でも「全部見える」側に倒れるので情報が消えることはない */ .recruit-lp .num-fold{margin-top:0} .recruit-lp .num-fold>summary{display:none} /* PCは開きっぱなし＝ボタン不要 */ .recruit-lp .num-fold-grid{margin-top:12px} @media(max-width:767px){ .recruit-lp .num-fold{margin-top:12px} .recruit-lp .num-fold>summary{display:inline-flex;width:100%;justify-content:center} .recruit-lp .num-fold[open]>summary{margin-bottom:4px} /* 畳んだ中身も、常時表示のカードと同じ2列グリッドに揃える （num-more-grid は 480px以下で1列になる指定があるため打ち消す） */ .recruit-lp .num-fold .num-more-grid{grid-template-columns:repeat(2,1fr);margin-top:12px} .recruit-lp .num-fold .number-card.wide{grid-column:1/-1} } /* ===================================================================== 採用トップ SP調整 2026-08-24（第8回） ===================================================================== */ /* 14. NUMBERS：セクションの上下と見出し周りが空きすぎていたので詰める。 ・セクション余白 … --section の88pxが上下に効いて計176px分空いていた ・見出しブロック … .numbers-title が grid-row:span 2（118px×2＋隙間＝248px）を 占めていて、文字量に対して余白が大きすぎた。1行ぶんに変更する */ @media(max-width:767px){ .recruit-lp .numbers{padding-top:52px;padding-bottom:56px} .recruit-lp .number-grid .numbers-title{grid-row:auto!important;padding:0 8px} } /* 15. NUMBERS：未経験入社率カードが枠から縦にはみ出していた。 前回アイコンを92pxまで上げたが、このカードは grid-auto-rows:118px の1行に 収まる必要があり、上下padding(28px)＋ラベル(約20px)＋行間(4px)を引くと アイコンに使えるのは約66pxしかなく、実測で6px溢れていた（有資格者カードは .num-more-grid 側で行の高さが自動なので溢れていなかった）。 paddingを詰めたうえで、1行に収まる最大サイズまで下げる */ @media(max-width:640px){ .recruit-lp #np-inexp{padding:10px 16px!important} .recruit-lp #np-inexp .nc-icon{--ih:70px!important} .recruit-lp #np-inexp strong{--ns:50px!important} .recruit-lp #np-inexp small{font-size:16px!important} } /* 16. NUMBERS：「もっと数字を見る」はピル型ボタンをやめて枠なしのテキストに。 開いたらボタン自体を消し、上のカード群と同じ12pxの間隔で自然につながるようにする */ @media(max-width:767px){ .recruit-lp .num-fold{margin-top:12px} .recruit-lp .num-fold>summary{ display:inline-flex;width:100%;justify-content:center;gap:8px; border:0;border-radius:0;background:none;padding:6px 0; color:var(--green);font-weight:800;font-size:14.5px} .recruit-lp .num-fold>summary:hover, .recruit-lp .num-fold>summary:active{background:none;color:var(--green)} .recruit-lp .num-fold>summary:hover svg{stroke:var(--green)} .recruit-lp .num-fold[open]>summary{display:none} /* 開いたら文言ごと消す */ .recruit-lp .num-fold[open] .num-fold-grid{margin-top:0} } /* 17. INTERVIEW：カードの送りで「少し浮く」動きの原因は2つ。 ①スライドで新しいカードが画面に入った瞬間、そのカードに .in が付いて .reveal の translateY(30px)→0 が走り、横移動と同時に下から浮き上がっていた ②.iv3:hover の translateY(-4px) が、タップ後にホバー状態として残る端末がある SPではどちらも止めて、純粋な横スライドだけにする */ @media(max-width:767px){ .recruit-lp.js .iv-track .reveal{opacity:1;transform:none;transition:none} .recruit-lp .iv3,.recruit-lp .iv3.in{transition:none} .recruit-lp .iv3:hover,.recruit-lp .iv3.in:hover{transform:none} } /* ===================================================================== 採用トップ 調整 2026-08-24（第9回） ===================================================================== */ /* 18. ENTRY：キャッチコピーの文字サイズをPCでも統一する。 SPだけ揃えていたが、PCは parts.css の .entry-inner p（19px）と h2（45px）のままで 「未経験から」だけ小さかった。あわせて、行間が本文用の広い line-height を 継承していて3行が離れて見えていたので 1.3 に詰める。 .entry はインタビューページと共通のため .recruit-lp を付けて採用トップ限定にする */ @media(min-width:768px){ } /* 19. ENTRY：キャッチコピーを「文字は左揃え・かたまりは中央配置」にする。 SPは parts.css の .entry-inner{display:block;text-align:center} で1文字単位の 中央揃えになっていた。文章のブロック自体は幅を内容に合わせて中央に置き、 その中では左揃えにすることで行頭が揃う。 PCは1025px以上ですでに左揃えになっているため、SPのみ調整する 2026-08-24 */ /* ENTRYの文字組みは parts.css の素の .entry-inner に一本化（2026-08-29）。ここに書かない */ /* =================================================================== タップ時の演出（採用トップ固有のボタン）2026-08-24 実測の結果、この案件の対象端末では指で押しても :active が付かない （押下中に element.matches(':active') が false）。そのため :active は使わず、 js/nav.js が付け外しする .is-tapped だけで指定する。 共通パーツ側は parts.css の同名ブロックを参照。 ※「その他の数字を見る」(.num-fold>summary) はSP専用デザインがあるため触らない。 =================================================================== */ @media(hover:none){ /* .msg-links .btn-outline と .flow-list .flow-access a は、.dual-cta__recruit （採用情報ボタン）と同じ「:hoverだけ」に単純化したため、.is-tappedは 使わない・ここにも書かない 2026-08-25 */ .recruit-lp .bene-more .btn-outline.is-tapped{background:#fff;color:var(--green);border-color:var(--green)} .recruit-lp .text-link.is-tapped{background-position:0 0;border-color:var(--orange)} .recruit-lp .text-link.is-tapped span{transform:translateX(6px)} .recruit-lp .req-sub a.is-tapped{color:var(--green);gap:12px} .recruit-lp .header-cta.is-tapped{background:var(--green-dark)} .recruit-lp .iv-nav.is-tapped{background:var(--green);color:#fff;border-color:var(--green)} } /* ===================================================================== 18. NUMBERS：桁＋単位が長い数字がカードの外にはみ出す件の修正 2026-08-30 --------------------------------------------------------------------- 実機（テストサーバー）で「3,000現場」がカードの枠外に描かれた、という報告への対応。 ★2026-08-30 の再検証で分かったこと（重要） 以前のプレビューは が空で日本語が文字化けしたまま描画されており、 化けた文字列は本来より大幅に横幅が広い。その状態で測っていたため 「はみ出している」と読めていた。charset を直して Noto Sans JP 相当 （Noto Sans CJK JP）で測り直すと、320〜1440px のどの幅でも 「3,000現場」には 33〜40% の余りがあり、はみ出さない。 Google Fonts が読めなかった場合（代替書体）でも 34〜38% の余りがある。 → ローカルでは再現しない。実機で再発するようなら端末・画面幅・ スクリーンショットをもらって原因を特定しなおすこと。 そこで今回は「見た目を変えずに、構造としてはみ出せなくする」方向で直した。 ① アイコンと数字を .nc-row に分離（このファイル上部）。 見出し・注釈の長さが数字の置き場所を狭めることが無くなった ② 行の高さを minmax(126px,auto) に。注釈のあるカードが下にはみ出さない ③ 数字の大きさは --ns 変数に一本化し、font-size の計算は1か所だけ ④ 桁＋単位が長い値（6文字以上）には PHP が .nc--long を付ける。 ただし縮小は「カードが実際に狭いとき」だけに限る（下のコンテナクエリ）。 実測では 320px 幅でも収まっているので、通常の端末では発動しない＝ いまの見た目は変わらない。それより狭い環境のための保険 ※ ローカル検証の書体について：このコンテナから fonts.googleapis.com には 到達できないが、Noto Sans CJK JP が入っているので _test_stubs.php で 'Noto Sans JP' に割り当てて計測している（字幅は同一）。 それでも最終確認はプレビューHTMLか実機で行うこと ===================================================================== */ /* カードの内寸が 104px 未満になったときだけ、長い値を1段小さくする。 104px ＝ 実測で「52.7万円」の余りが5px を切りはじめる幅（320px端末で内寸98px）。 container-type:inline-size がカードに付いているのでコンテナクエリが使える */ @container (max-width:104px){ .recruit-lp .number-card.nc--long{--nl:.88;--ik:.9;padding-left:8px;padding-right:8px} .recruit-lp .number-card.nc--long .nc-row{gap:6px} } /* ===================================================================== 19. 右からのスライドイン演出でページが横スクロールしていた件 2026-08-30 --------------------------------------------------------------------- JOBSの職種カード（.job-card.reveal＝translateX(70px)）と ENTRY FLOWの項目（.flow-list li.reveal＝translateX(46px)）は、 画面に入るまで右へずらしてあるため、画面外に出た分だけページが横に広がり、 スマホで左右にスクロールできてしまっていた（実測：390pxで31px、1024pxで4px）。 演出そのものは触らず、はみ出した分をセクション側で切り取る。 overflow-x:hidden ではなく clip を使うのは、hidden だとスクロールコンテナが できてしまい、中の position:sticky が効かなくなるため（このページには無いが、 同じ書き方を他ページへ持っていったときの事故を防ぐ）。 ===================================================================== */ .recruit-lp .jobs, .recruit-lp .flow{overflow-x:clip} /* ===================================================================== ENTRY FLOW：縦積みレイアウトの適用範囲を 767px → 1023px に広げた 2026-08-30 --------------------------------------------------------------------- 5列の横並びは実測で **1130px以上でないと成立しない**。1100px以下では 3列目（面接）の中身が幅を食って他の列を押し潰し、820pxでは列幅が 133/109/259/60/88 とバラバラになって「入社日のご相談」が1文字ずつ改行されていた （2026-08-30 iPad Air 820px で実機指摘）。タブレット幅はスマホと同じ縦積みにする、 というユーザー判断。 ★この塊は、各所の @media(max-width:767px) に散らばっていた .flow-list 系の指定を **そのまま移動**してきたもの（複製ではない）。順序も元のまま。SPの見え方は変わらない。 ENTRY FLOW の縦積みを直すときは、この1か所だけを直せばよい。 ===================================================================== */ @media(max-width:1023px){ .recruit-lp .flow-list{grid-template-columns:1fr;gap:24px} /* 縦軸は各ステップ側で個別に描画する方式に変更したため、コンテナ全体を基準にした この線は無効化する（2026-08-24。詳細は本ファイル末尾のSP追加分を参照） */ .recruit-lp .flow-list:before{content:none} .recruit-lp .flow-list li{text-align:left;display:grid;grid-template-columns:48px 1fr;column-gap:17px;align-items:center;padding:0} .recruit-lp .flow-list li>span{grid-row:1/3;margin:0} /* 文字がパネルの縁に接して見えていたため、上下(-14px/-18px)と同じ考え方で 左右にも余白ぶんパネルを広げる（テキスト位置は変えず、パネルだけ外側に広げる）2026-08-24 */ .recruit-lp .flow-list li.fstep::before{ left:51px;right:-14px;transform:none;top:-14px;bottom:-18px} .recruit-lp .flow-list li.fstep>strong{font-size:18px} /* 詳細があるステップは丸を上端に置く（縦中央だと見出しとずれるため） */ .recruit-lp .flow-list li.fstep{align-items:start} .recruit-lp .flow-list li.fstep>span{grid-row:1;align-self:start} .recruit-lp .flow-list .fd{margin-top:14px} .recruit-lp .flow-list li.fstep>small, .recruit-lp .flow-list li.fstep>.flow-access{grid-column:2} .recruit-lp .flow-list .flow-access{margin-top:18px} .recruit-lp .flow-list strong{font-size:18px;white-space:normal} .recruit-lp .flow-list li.fstep{padding:0} .recruit-lp .flow-list li:not(:last-child)::after{content:"";position:absolute; left:23px;top:0;bottom:-24px;width:2px;background:#70b583;z-index:-1} .recruit-lp .flow-list li:last-child::after{content:"";position:absolute; left:23px;top:0;height:48px;width:2px;background:#70b583;z-index:-1} .recruit-lp.js .flow-list li.reveal{transform:none!important} .recruit-lp .flow-list li:first-child::after{top:50%} /* 行は grid-template-rows で明示していない（暗黙の行）ため、終端に -1 は使えない （1/-1 は 1/1 に潰れて効かない）。丸と同じ 1/3 で2行ぶんを明示する */ .recruit-lp .flow-list li>strong:last-child{grid-row:1/3;align-self:center;margin:0} .recruit-lp .flow-list li.fstep>strong{align-self:center;margin:0} }