なので、`.s2close .in p`(0-2-1) に負けないところまで上げる（16pxで出てしまう）。 級数・字間・色は他6つの眉ラベルと同じ値にそろえる（ここだけ13px/.14em/別の橙になっていた） */ .s2close .in p.en{margin:0;font-size:14px;font-weight:700;letter-spacing:.2em;color:#9C4219} /* このページで一番大事な見出しが、章見出し(36px)より小さかった。本文比も1.88倍しかなかった */ .s2close h3{margin-top:12px;font-size:30px;line-height:1.5;color:var(--ink)} .s2close .in p{margin:16px 0 0;font-size:16px;line-height:1.9;max-width:36em;text-align:left;color:var(--ink)} /* 押す場所は、板の中で一番大きい物にする（480pxのままだと板の2.5%しか占めない） */ .s2close .s2cta{margin:24px 0 0;max-width:none;min-height:68px;font-size:20px} .s2close .s2cta:active{transform:scale(.97)} /* 共通ヘッダーの2つは style.css の :active 一覧に入っておらず、押しても無反応だった。 style.css は触れないので、案2のページに限って足す（ロゴはスマホで唯一のトップへ戻る口） */ body.saiyo2 .logo:active{transform:scale(.97);opacity:.85} body.saiyo2 .hbtn:active{transform:scale(.97);opacity:.85} /* 🚨 `.s2close .note2`(0-2-0) は `.s2close .in p`(0-2-1) に負けて丸ごと効いていなかった。 添え書きのつもりが本文と同じ 17px・同じ濃さで出ていたので、同じ強さまで上げる */ .s2close .in p.note2{margin-top:16px;font-size:14px;color:var(--sub)} /* ---- スマホ下部の固定CTA（固定バーはこの1本だけ・主60px） ---- */ .s2bar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none; grid-template-columns:1fr auto;gap:8px;align-items:stretch; background:var(--white);border-top:1px solid var(--line); padding:8px 8px calc(8px + env(safe-area-inset-bottom))} .s2bar .s2cta{min-height:60px;font-size:18px;box-shadow:none} .s2bar-sub{display:flex;align-items:center;justify-content:center;min-height:60px;padding:0 16px; font-size:14px;font-weight:700;letter-spacing:.02em;text-decoration:none;white-space:nowrap; color:var(--brand);background:var(--white);box-shadow:inset 0 0 0 2px var(--brand);border-radius:999px} .s2bar-sub:active{background:var(--paper);transform:scale(.97)} @media (max-width:359px){ .s2bar .s2cta{font-size:14px;padding:8px 8px} .s2bar-sub{font-size:12px;padding:0 10px} } /* ========================================================= 幅別 ========================================================= */ @media (max-width:720px){ /* 2026-09-07 固定バーは「浮くUIは置かない」指示で撤去 */ body.saiyo2{padding-bottom:env(safe-area-inset-bottom)} /* 🚨 応募のカードを足したぶん、節の余白24pxと合わせて片側48pxになり、 本文の幅が342→292px（−14.6%）・行数が4→6行に増えて読みにくくなっていた。 スマホではカードの内側を詰める */ .s2close .in>div{padding:24px 16px} .s2sec.sec{padding:56px 0} .s2career{padding:64px 0} .s2film{padding:12px 0} .s2scenehead{top:12px;left:12px} .s2subtitle{bottom:10px;font-size:14px;letter-spacing:.2em;text-indent:.2em} .s2title{padding:32px 24px 40px} .s2title h1{font-size:36px} .s2sec h3.s2h{margin-top:32px} } @media (max-width:375px){ .s2title h1{font-size:28px} .s2fact dd b{font-size:28px} } /* 🚨 320px（iPhone SE1）だけ、h2「日給11,980円から、手に職まで。」が3行になり 1行目に「日給」の2字しか残らなかった（入る幅9.7字に対し「11,980円から、」が8.3字） */ @media (max-width:359px){ .s2sec h2,.s2career h2{font-size:22px} } @media (min-width:721px){ /* 🚨 2026-09-09 PCの節の上下が112px（共通の --s-md）で、7節あると節境界だけで画面が伸びる。 共通変数は他の7ページに効くので触らず、この採用ページの節だけ96pxに詰める */ .s2sec.sec{padding:96px 0} .s2title{padding:48px 40px 56px} /* 🚨 56px（本文の3.5倍）→ 40px（2.35倍）。字間は0。中央揃えをやめる */ .s2title h1{font-size:36px;letter-spacing:0} .s2lead{text-align:left} .s2fact dd b{font-size:56px} .s2acts{max-width:none;flex-direction:row;justify-content:flex-start;gap:32px;align-items:center} .s2acts .s2cta{width:auto;min-width:360px} /* 🚨 PC1440では左右140px・上下12pxの「帯」になっていて、レターボックスに見えていなかった。 全幅にして上下だけ墨を残す＝本物の横長。あわせて背が縮むので、 PCの初期画面（折り＝900px）にCTAが入る（実測ではCTAが折りの496px下にあった） */ /* 🚨 2026-09-09 おでん指示「求職者ページの大見出しの写真。顔が見切れないように作って」。 Vision実測：動画(1600x900)の顔は A[y201-463] B[y354-492]＝上下に291px必要。 40% で切ると左の人の頭が上に最大53px出ていた（1024〜2560の25通りで欠け）。31%に下げた。 幅2000px超では元が1600pxしかなく引き伸ばしにもなるので、枠の幅を1920pxで止める （はみ出した分は .s2film の墨色。もともと映画の1カットに見せる作りなので画が締まる） */ .s2frame{max-width:1920px} .s2frame img,.s2frame video{aspect-ratio:auto;height:min(38vh,420px);object-position:50% 31%} /* 🚨 PCの初期画面（折り＝900px）に応募のCTAが1つも無かった（実測でCTAは折りの496px下）。 PCには固定バーが無いので、ここに入らないと押す物が画面から消える。 題字を2段組にして、右側に「日給」と「電話で話を聞いてみる」を上げる */ .s2title{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px); column-gap:56px;align-items:start} .s2title>.s2en{grid-column:1;grid-row:1} .s2title>h1{grid-column:1;grid-row:2} .s2title>.s2lead{grid-column:1;grid-row:3} .s2title>.s2chips{grid-column:1;grid-row:4} .s2title>.s2fact{grid-column:2;grid-row:1/4;align-self:start;margin-top:8px;max-width:none} /* 右の段は幅400pxしかないので、ここだけは縦積みに戻す（横に並べると副リンクが潰れる） */ .s2title>.s2acts{grid-column:2;grid-row:4;align-self:start;margin-top:0; flex-direction:column;align-items:stretch;gap:12px} .s2title>.s2acts .s2cta{min-width:0;width:100%} .s2title>.s2acts .s2sub-link{justify-content:center} .s2scenehead{top:24px;left:24px} .s2subtitle{bottom:24px;font-size:18px} /* 🚨 repeat(3, minmax(320px,…)) は 768px で 1008px になり264pxはみ出す（実測）。 auto-fit＋min(320px,100%) で「入る数だけ並ぶ」形にする */ .s2jobs{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px} .s2sns{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto; overflow-x:visible;scroll-snap-type:none;max-width:720px;gap:24px} .s2nums{gap:24px} .s2model{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .s2scenes{gap:24px} .s2scene{display:grid;grid-template-columns:minmax(280px,480px) 1fr;align-items:stretch} .s2scene .ph img{height:100%;aspect-ratio:auto;min-height:240px} .s2scene .ph-todo{height:100%;aspect-ratio:auto;border-bottom:0; border-right:1px dashed rgba(251,246,233,.24)} .s2scene .tx{padding:28px 32px;align-self:center} .s2real{grid-template-columns:1fr 1fr} .s2fit{grid-template-columns:1fr 1fr;gap:40px} .s2close .in{padding:72px 40px} .s2close h3{font-size:30px} .s2close .in>div{padding:40px 40px} } @media (min-width:1024px){ /* 数字カードの3列化と数字の56px化は、カードが十分広くなる1024pxから （768pxで3列にすると「8:30〜17:00」が入り切らない） */ /* 正社員は横長1枚＋4枚。3列だと3行目に1枚だけ残って空きマスが2つ出るので4列にする */ .s2nums{grid-template-columns:repeat(4,minmax(0,1fr))} .s2nums dd b{font-size:56px} .s2nums dd.sm b{font-size:40px} /* 🚨 この2行を書かないと、上の `.s2nums dd b`（同じ強さで後ろにある）に負けて アルバイトの数字が40pxに戻り、正社員より大きくなる */ .s2nums-sub{grid-template-columns:repeat(2,minmax(0,1fr))} .s2nums-sub dd b,.s2nums-sub dd.sm b{font-size:24px} } /* 動きを減らす設定の人には、ヒーローの動きを全部止める */ @media (prefers-reduced-motion: reduce){ .s2frame img,.s2frame video,.s2scenehead,.s2subtitle,.s2title .s2en,.s2title h1, .s2lead,.s2chips,.s2fact,.s2acts{animation:none!important} /* モーション検品：reduce の人だけ will-change が46要素に残り続けていた （通常は motion.js の transitionend が掃除するが、reduce 分岐は掃除役が動かない） */ .js-rise [data-rise]{will-change:auto} } /* ========================================================= 仕上げ（2026-09-05 デザイン検品の差し戻し） 🚨 ここは必ずファイルの最後に置く。 前は 81行目に本文17pxを書いていたが、後ろの個別ルール（.s2said p{16px} 等）と 同じ詳細度で「後勝ち」に負けて、83件が16pxのままだった （[[css-written-is-not-css-working]] の再発。書いた＝効いている ではない） ========================================================= */ /* 本文は17px */ .s2lead,.s2jobs p:not(.k),.s2day p,.s2scene p,.s2real li,.s2fit li,.s2faq .a p, .s2said p,.s2career .s2todo,.s2todo-box p,.s2close .in p{font-size:17px} .s2todo-box p+p{font-size:16px} /* 見出しの上限（40pxは本文の2.4倍。合格帯は28〜36px） */ @media (min-width:1024px){ .s2sec h2,.s2career h2{font-size:32px} /* 応募の見出しは章見出しと同じ36px。ここが一番大事な行なので、章見出しより小さくしない */ .s2close h3{font-size:36px} } /* 🚨 ※要確認 は地の色ごとに変える。 （締めの節は 2026-09-09 に白地へ変えたので、accent地むけの .s2close .tmp は消した。 いま .tmp を使っているのは s2career だけ） */ .s2career .tmp,.s2career .s2todo .tmp{color:#F4F9FE;background:none;box-shadow:none} /* 副リンクの下線が列幅いっぱい（400px＝文字の3.5倍）に伸びて区切り線に見えていた */ .s2sub-link{align-self:flex-start;width:auto} .s2title>.s2acts .s2sub-link{align-self:center} /* SNSの3箱の右に440px（38%）の死んだ余白ができていた */ @media (min-width:721px){ .s2sns{max-width:none} } /* 節の上下余白を120pxにそろえる（96pxが2か所だけ浅かった） */ @media (min-width:721px){ .s2career{padding:120px 0} .s2close .in{padding:80px 40px} } /* 小さいラベルの字間を .24em にそろえる（98件中14件しか揃っていなかった） */ .s2fact dt,.s2nums dt,.s2model .k,.s2jobs .k{letter-spacing:.24em} /* 🚨 固定バーの主CTAが 360〜413px で「る」1文字だけ改行していた（iPhone SE2/8/12/13/14 の帯）。 逃げが ≤359px までしか無かった */ @media (max-width:413px){ .s2bar{gap:6px;padding:8px 6px calc(8px + env(safe-area-inset-bottom))} .s2bar .s2cta{font-size:16px;padding:8px 10px;letter-spacing:0} .s2bar-sub{font-size:13px;padding:0 10px} } @media (max-width:359px){ .s2bar .s2cta{font-size:14px;padding:8px 8px} .s2bar-sub{font-size:12px;padding:0 8px} } /* 粒。共通の .grain は position:fixed; z-index:-1 で body の背景に隠れ、 このページでは1画素も出ていなかった（実測 0.0000%・σ=0.0）。 手本7本の中央値 0.18% に合わせて、案2の節にだけ薄く乗せる */ .s2sec,.s2career,.s2close,.s2hero{position:relative} .s2sec>*,.s2career>*,.s2close>*,.s2hero>*{position:relative;z-index:1} .s2sec::after,.s2career::after,.s2close::after,.s2hero::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); background-size:120px 120px;mix-blend-mode:multiply;opacity:.05} /* 白地になった .s2close は screen 合成だと何も乗らない（白のまま）。 他の白い節と同じ multiply の粒に戻すため、ここの上書きから外した */ .s2career::after{mix-blend-mode:screen;opacity:.035} /* PCの縦700pxのノートでも初期画面にCTAを入れる（1440x700 で18px切れていた） */ @media (min-width:721px){ .s2film{padding:12px 0} .s2title{padding:32px 40px 48px} } /* ========================================================= 仕上げ2（2026-09-05 Web検品の差し戻し） ========================================================= */ /* 🚨 A：ヒーローを 38vh に下げたら、横に長い窓で顔が切れた（私が入れた崩れ）。 1440x568・2560x1300・3440x1440 で顔が2個→1個。枠の縦横比が約5.8:1を超えると切れる。 高さの下限を「幅÷5.6」で持たせて、どの窓でも 5.6:1 より横長にしない */ @media (min-width:721px){ /* 顔2つ（291px）＋ズーム(scale1.06)ぶんを残すには、枠が 4.8:1 より横長になってはいけない。 ただし背の低い窓で画面を埋め尽くさないよう 70vh で頭打ちにする */ .s2frame img,.s2frame video{min-height:min(calc(100vw / 4.8),70vh);max-height:70vh} } /* 記録4：スマホの SCENE 01 は 16:9 に切るので、左の作業者の額から上が消えていた */ .s2scene .ph img.pos-l{object-position:0% 25%} /* 記録1：字幕「現場へは、2人1組で。」が全15条件で明暗比4.5未満だった。 勾配を濃くするより、字の後ろに座を敷くほうが確実。 🚨 中央寄せに transform を使わない。入場アニメ s2in が最後に transform:none を当てるので、 translateX(-50%) が打ち消されて座が右にはみ出す（実物を見るまで機械判定では出なかった）。 left/right を両方置いて margin:auto で寄せる */ .s2subtitle{display:block;width:fit-content;max-width:calc(100% - 32px); margin-left:auto;margin-right:auto; padding:6px 16px;border-radius:999px; /* 🚨 2026-09-09 .6 だと映像の明るいコマで明暗比 3.69〜4.23（要4.5）。 背景は動画なのでコマごとに変わる。どのコマでも足りる濃さにする */ background:rgba(16,20,24,.82);backdrop-filter:blur(2px)} /* 記録5：2段組の左列が721pxで185pxしかなく、h1が列からはみ出していた */ @media (min-width:721px) and (max-width:999px){ .s2title{display:block} .s2title>.s2fact,.s2title>.s2acts{max-width:480px} } /* C：動きを減らす設定のとき、ヒーローの動画も止める（JSでpauseし、posterを残す） */ @media (prefers-reduced-motion: reduce){ .s2frame video{animation:none!important} } /* 映像の一時停止ボタン（5秒を超える自動再生には停止操作が要る） */ .s2vtoggle{position:absolute;right:12px;top:12px;z-index:2; min-height:44px;min-width:44px;padding:8px 16px; font-size:14px;font-weight:700;line-height:1.4;letter-spacing:.04em; color:#FFF7EA;background:rgba(16,20,24,.55);border:1px solid rgba(255,247,234,.45); border-radius:999px;cursor:pointer;backdrop-filter:blur(2px)} .s2vtoggle:hover{background:rgba(16,20,24,.75)} .s2vtoggle:active{transform:scale(.95);opacity:.85} .s2vtoggle:focus-visible{outline:3px solid #FFF7EA;outline-offset:2px} @media (min-width:721px){ .s2vtoggle{right:24px;top:24px} } /* 🚨 共通ヘッダー・フッターの押せる物14個に :active が無い（電話リンク3本を含む）。 採用ページで一番押される番号に手応えが無いので、このページの中だけ塞ぐ （style.css は触らない） */ body.saiyo2 .r2 .in a:active, body.saiyo2 .fgrid a:active, body.saiyo2 .copy a:active, body.saiyo2 .skip:active{transform:scale(.97);opacity:.85} /* 320pxでは枠が狭く、右上のボタンが「SCENE 01 …」に重なった。 ボタンを44x44の記号だけにして、SCENE表記側にもボタンぶんの逃げを作る */ @media (max-width:413px){ .s2vtoggle{min-width:44px;width:44px;padding:0;font-size:0;right:8px;top:8px} .s2vtoggle::before{content:"❙❙";font-size:13px;letter-spacing:1px} .s2scenehead{right:60px;padding-right:0} } @media (max-width:413px){ .s2vtoggle[data-state="paused"]::before{content:"▶"} } /* 2026-09-07 review: recruit.htmlを正本化。採用条件は初画面で2枚に分けて迷わせない */ .s2facts{margin:24px 0 0;max-width:760px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .s2facts .s2fact{margin:0;max-width:none;height:100%} @media(max-width:720px){ .s2facts{grid-template-columns:1fr;gap:10px;max-width:none} .s2title{padding-top:32px} .s2frame img,.s2frame video{object-position:48% 36%} .s2scenehead{font-size:12px;letter-spacing:.18em;right:72px} .s2subtitle{font-size:14px;letter-spacing:.14em;text-indent:.14em} } @media(max-width:360px){.s2scenehead{font-size:11px;letter-spacing:.12em}.s2subtitle{font-size:13px}} /* 2026-09-07 review pass2: s2facts導入後のPCグリッドを再指定。右カードだけ上、本文は上から始める */ @media (min-width:1000px){ /* 🚨 2026-09-09 2枚目のカードを足したら、右列400pxを2分割して1枚193px＝7行に折れ、 「24人／」で行末になっていた（スマホ342pxよりPCが狭いという逆転）。PCでは縦に積む */ /* 🚨 2026-09-09 カードを2枚にしたら右列が250→410pxに伸び、行4に置いていたCTAが 1000〜1512pxで1画面目から落ちた（カードの高さがCTAの位置を縛る作りだった）。 CTAを行1に上げて、カードの高さに左右されないようにする */ .s2title>.s2acts{grid-column:2;grid-row:1;align-self:start;margin-top:0} .s2title>.s2facts{grid-column:2;grid-row:2/5;align-self:start;margin-top:18px;max-width:none; grid-template-columns:1fr} .s2title>.s2en{grid-column:1;grid-row:1} .s2title>h1{grid-column:1;grid-row:2;margin-top:18px} .s2title>.s2lead{grid-column:1;grid-row:3} .s2title>.s2chips{grid-column:1;grid-row:4} } @media (min-width:721px) and (max-width:999px){ .s2title>.s2facts{max-width:760px} } .s2alt-links{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center} /* 押す前に「別のアプリが開く」と分かるようにする（戻れないと感じさせないため） */ .s2note-ext{width:100%;margin:0;font-size:13px;line-height:1.7;color:var(--sub)} /* 目には出さず、読み上げにだけ届ける（文字を足せないボタン用） */ .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* 長い採用ページの入口で、仕事内容・条件・応募の位置を先に見せる */ /* 🚨 2026-09-09 おでん指示「応募質問のところは青くしなくていい。同じ白でいい」。 :last-child の青地・白文字と、その hover・span の色指定をまとめて外した（残すと死にコードになる）。 節が4つ→7つになったので、PCは7列、スマホは横スクロールで全部に触れるようにする */ .s2jump{position:sticky;top:var(--head);z-index:40;display:grid;grid-template-columns:repeat(7,1fr); max-width:1160px;margin:0 auto;background:rgba(255,255,255,.96);border:1px solid var(--line); /* backdrop-filter:blur(10px) は削除（2026-09-10）。同じ規則の背景が96%不透明なので ぼかしは1pxも見えていないのに、費用だけ払っていた。 */ box-shadow:0 10px 30px rgba(13,54,105,.10)} .s2jump a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:10px 10px; color:var(--ink);font-size:15px;font-weight:700;text-decoration:none;border-right:1px solid var(--line); white-space:nowrap} .s2jump a:last-child{border-right:0} .s2jump span{color:var(--accent);font-size:11px;letter-spacing:.12em} .s2jump a:hover{background:var(--paper)} .s2jump a:active{transform:scale(.98)} .s2jump a:focus-visible{outline:3px solid var(--accent);outline-offset:-4px} /* 🚨 下へ送っている間、motion.js が .head に tucked を付けてヘッダーを画面外へ逃がす。 その時この帯の top が var(--head) のままだと、空いた64px（PCは76px）の穴から本文が覗き、 タブだけが宙に浮いた短冊になる。ヘッダーが引っ込んでいる間は上端に貼り付ける */ body.saiyo2:has(.head.tucked) .s2jump{top:0} /* 🚨 :has が無い環境むけ（saiyo2.js が に head-tucked を写す）。 上と1本にまとめてはいけない：セレクタを1つでも解析できないブラウザは **ルールごと捨てる**ので、代わりの指定まで一緒に消える */ html.head-tucked body.saiyo2 .s2jump{top:0} /* 章送りタブの現在地。31画面ぶんあるページを帯だけで移動するので、 いまどの章にいるかが分からないと迷子になる（印は saiyo2.js が付ける） */ .s2jump a[aria-current="true"]{background:var(--paper);box-shadow:inset 0 -3px 0 var(--accent)} .s2jump a[aria-current="true"] span{color:var(--ink)} /* 🚨 見出しのidにも効かせる。section[id] だけだと、外から #ichinichi のような 見出しのURLを共有された時に、ヘッダーと帯（120〜142px）の下へ潜る */ body.saiyo2 section[id],body.saiyo2 [id]{scroll-margin-top:70px} .s2bar.has-line{grid-template-columns:1.25fr .75fr} .s2jobs .ph img,.s2scene .ph img,.s2band-in img,.s2band img{filter:saturate(.98) contrast(1.02) brightness(1.01)} /* 2026-09-09：SCENE 03 に写真（img/AC1_室内機.webp）が入り、文字だけの青板 .ph-role は どのページからも呼ばれなくなったので、関連する指定をまとめて削除した */ .s2nums dt{letter-spacing:.08em} @media(max-width:720px){ /* 7つを1画面に押し込むと1つ45pxになって字が読めない。横スクロールにして、 指1本で端まで送れるようにする（scroll-snap で1つずつ止まる） */ /* 🚨 右端のぼかし（mask-image）は入れて外した。ぼかしは容器の枠に対して固定なので、 最後まで送っても最後のタブの右1/3が薄いままになり、そこにフォーカスが当たっても薄い。 幅590〜720pxでは7つ全部入りきってスクロールできないのにぼかしだけ残る。 「まだ先がある」は、5つ目が端で切れて見えること自体で足りる */ /* 🚨 scroll-snap は外した。札の先頭を container の先頭に吸着させるので、 キーボードで選んだ札を「ちょうど収まる位置」に寄せても、スナップが引き戻して 16〜30px はみ出したままになる（ブラウザ既定の scroll-into-view も効かなくなる） */ .s2jump{display:flex;overflow-x:auto;overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;border-left:0;border-right:0;scrollbar-width:none} .s2jump::-webkit-scrollbar{display:none} .s2jump a{flex:0 0 auto;min-width:84px;min-height:54px;padding:7px 12px;gap:3px; flex-direction:column;font-size:15px;line-height:1.2} /* 12→15px（.subnav a と揃える） */ .s2jump span{font-size:9px} } @media(max-width:359px){ .s2nums{grid-template-columns:1fr;gap:12px} .s2nums>div.wide{grid-column:auto} .s2nums>div{padding:22px 20px} /* 🚨 ここで主の数字を全部36pxにすると、3桁の「500」が2桁の「月給34」より 字の面積で上に来て、主役が2位になる。主役の月給だけ36pxにして、他は28pxに落とす */ .s2nums dd b{font-size:36px} .s2nums dd.sm b{font-size:28px} /* 🚨 1024px側で直した抜けが、320px側で再発していた。この行が無いと アルバイトの数字が36pxに戻り、正社員の「月給34」を抜いてページ最大の字の塊になる */ .s2nums-sub dd b,.s2nums-sub dd.sm b{font-size:19px} .s2nums .d{max-width:22em} /* 320pxでは、応募の見出しが枠の内側を15px超え、ボタンの文字が「聞いてみ／る」と1字で折れる。 この幅のときだけ級数を落とす（文言は3か所でそろえているので変えない） */ .s2close h3{font-size:26px} .s2close .s2cta{font-size:17px} } /* 2026-09-07 語中改行の抑止（日本語チェック君の実測：320pxで8か所・390pxで2か所を解消） */ @supports (word-break:auto-phrase){ /* 2026-09-09 追加：新しく足した2つ（.s2band-cap／.s2upd）と、実測で割れていた 本音の箇条書き・募集要項の表を対象に入れる。ここに入れ忘れると同じ節の中で 1つの文だけ防波堤が無い状態になる */ .s2lead,.note,.note2,.s2faq summary,h1,h2,h3, .s2jobs p,.s2scene p,.s2day p, .s2band-cap,.s2upd,.s2real li,.s2fit li,.tbl td{word-break:auto-phrase;overflow-wrap:normal} } /* 2026-09-07 固定バー撤去の後始末。style.css の @media(max-width:900px){body{padding-bottom:96px}} は他ページの .bar 用に生きているので触らず、このページだけ 900px まで打ち消す （720pxまでしか解除しておらず、721〜900px でフッター下に96pxの白帯が出ていた） */ @media (max-width:900px){ body.saiyo2{padding-bottom:env(safe-area-inset-bottom)} body.saiyo2 footer{padding-bottom:40px} } /* 2026-09-08 に電話の案内を全ページから消して LINE 一本化したので、 応募節の電話行（.tel-row）むけの指定はすべて削除した（このCSSを読むのは recruit.html だけ） */ .s2hero{position:relative;isolation:isolate;min-height:100svh;padding-top:var(--head);display:flex;align-items:stretch;overflow:hidden;background:#0c315e} .s2hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,22,45,.9) 0%,rgba(4,22,45,.72) 46%,rgba(4,22,45,.26) 74%,rgba(4,22,45,.12) 100%)} /* 2026-09-10 モーション検品：recruit のスクロールは1往路で1,895回塗り直していて（indexの3.7倍）、 その582回がこのヒーロー動画だった。画面外に出たら描くのをやめる。 実測 1,830回→1,071回（-41%）。画質・解像度・ビットレートは一切触らない。 🚨 contain-intrinsic-size は実際の高さと合わせること。ズレるとスクロール位置が飛ぶ。 */ .s2hero .s2film{position:absolute;inset:0;z-index:0;padding:0;background:#0c315e; content-visibility:auto;contain-intrinsic-size:100vw 100svh} .s2hero .s2frame{width:100%;max-width:none;height:100%} .s2hero .s2frame video{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;object-position:50% 37%;filter:saturate(.92) contrast(1.05) brightness(.93)} .s2hero .s2frame::after{background:linear-gradient(180deg,rgba(3,17,36,.22),transparent 30%,rgba(3,17,36,.42))} .s2hero .s2scenehead,.s2hero .s2subtitle{display:none} /* 🚨 2026-09-09 眉・見出し・リードに別々の帯を敷くと「紙を4枚貼った」ように見えた。 かといって帯を全部外すと明暗比が 1.61:1 まで落ちる（実測）。 文字ブロック全体に1枚だけ面を敷いて、写真は面の外側で見せる */ .s2hero .s2title{position:relative;z-index:2;display:block;width:100%;max-width:1160px;margin:auto;padding:64px 40px 80px;color:#fff} .s2hero .s2title::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1; background:linear-gradient(90deg,rgba(3,18,38,.90) 0%,rgba(3,18,38,.86) 46%,rgba(3,18,38,.62) 72%,rgba(3,18,38,.30) 100%)} .s2hero .s2title .s2en{color:#fff;font-size:13px;letter-spacing:.24em} .s2hero .s2title h1{max-width:11em;margin-top:16px;font-size:clamp(36px,3.4vw,44px);line-height:1.14;color:#fff;text-shadow:0 3px 24px rgba(0,12,28,.54)} .s2hero .s2lead{max-width:35em;margin-top:22px;color:#fff;font-size:17px;line-height:1.85;text-shadow:0 2px 16px rgba(0,12,28,.6)} .s2hero .s2chips{max-width:680px;margin-top:20px}.s2hero .s2chips li{background:rgba(255,255,255,.96);box-shadow:0 7px 20px rgba(0,14,34,.24)} .s2hero .s2facts{max-width:640px;margin-top:22px}.s2hero .s2facts .s2fact{background:rgba(255,255,255,.96);box-shadow:0 10px 26px rgba(0,14,34,.2)} .s2hero .s2acts{max-width:420px;margin-top:24px}.s2hero .s2cta{box-shadow:0 12px 30px rgba(0,14,34,.3)} .s2hero .s2sub-link{color:#fff;border-color:rgba(255,255,255,.75)}.s2hero .s2note-ext{color:#fff;text-shadow:0 1px 10px #00152f} .s2interlude{position:relative;max-width:none;margin:0;overflow:hidden;background:var(--deep)} .s2interlude::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,28,58,.24),transparent 55%,rgba(6,28,58,.14))} .s2interlude img{display:block;width:100%;height:clamp(270px,31vw,500px);object-fit:cover;object-position:center 48%;filter:saturate(.92) contrast(1.04)} @media (min-width:721px){ .s2hero{min-height:max(760px,100svh)} .s2hero .s2title{padding-top:clamp(100px,14vh,160px);padding-bottom:96px} .s2hero .s2facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .s2hero .s2acts{display:flex;flex-direction:column;align-items:stretch;gap:12px} .s2hero .s2acts .s2cta{width:100%;min-width:0} } @media (max-width:720px){ .s2hero{min-height:100svh} .s2hero::before{background:linear-gradient(180deg,rgba(4,22,45,.34),rgba(4,22,45,.76) 52%,rgba(4,22,45,.94))} .s2hero .s2title{padding:calc(var(--head) + 34px) 24px 54px;margin:0;align-self:flex-end} .s2hero .s2title h1{font-size:clamp(39px,11vw,48px);line-height:1.16} .s2hero .s2lead{font-size:15px;line-height:1.7;margin-top:16px} .s2hero .s2chips{display:none} .s2hero .s2facts{margin-top:18px;gap:8px}.s2hero .s2facts .s2fact{padding:12px 16px} .s2hero .s2facts .s2fact dd b{font-size:34px}.s2hero .s2facts .s2fact .d{font-size:14px} .s2hero .s2acts{margin-top:18px}.s2hero .s2cta{min-height:56px} .s2interlude img{height:270px;object-position:center} } @media (max-width:359px){.s2hero .s2title{padding-left:18px;padding-right:18px}.s2hero .s2title h1{font-size:37px}.s2hero .s2lead{font-size:14px}.s2hero .s2facts .s2fact{padding:10px 14px}.s2hero .s2facts .s2fact .d{display:none}} @media (min-width:721px){ /* 🚨 2026-09-09 ここを2段組にしたら、文が660px離れた2列に分解されて読めなくなっていた （右に置くはずだった英字ラベルだけ消して、grid が生き残っていた）。素の1段に戻す */ .s2sec .note::after,.s2career .note::after{content:"EIGHT / DELIVERY & INSTALLATION";display:block;padding:18px 0;border-top:1px solid currentColor;border-bottom:1px solid currentColor;font-size:11px;font-weight:700;letter-spacing:.16em;line-height:1.5;opacity:.62} .s2day{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px;border-left:0;padding-left:0} .s2day>div{min-height:132px;padding:18px 20px 20px 24px;border-left:2px solid var(--brand);background:linear-gradient(90deg,rgba(11,82,157,.065),transparent)} .s2day>div::before{left:-7px;top:23px}.s2day>div:last-child{padding-bottom:20px} .s2nums-sub{max-width:none}.s2nums-sub>div{min-height:178px} .s2sec h3.s2h{margin-left:0}.s2sec h2,.s2career h2{font-size:clamp(34px,3.1vw,42px);line-height:1.28} } @media (max-width:720px){.s2sec .note::after,.s2career .note::after{display:none}} .s2real+.s2interlude{width:100vw;margin:40px calc(50% - 50vw);} @media (min-width:721px){.s2real+.s2interlude{margin-top:56px;margin-bottom:56px}} .s2hero::before{background:linear-gradient(90deg,rgba(4,22,45,.30) 0%,rgba(4,22,45,.18) 42%,rgba(4,22,45,.08) 78%,rgba(4,22,45,.04) 100%)} .s2hero .s2frame video{filter:saturate(.98) contrast(1.01) brightness(1.05)} .s2hero .s2scenehead,.s2hero .s2subtitle{display:block;z-index:3;background:rgba(4,22,45,.84);backdrop-filter:blur(2px)} /* 🚨 top:18px だとPCで固定ヘッダ（下端77px）の下に丸ごと潜り、白い字が白いヘッダに重なって 明暗比1.00＝1文字も読めていなかった（2026-09-10 デザイン検品の実測）。 スマホは .s2hero の padding-top ぶん下がるので元から76pxで見えている＝PCだけの事故。 */ .s2hero .s2scenehead{top:calc(var(--head) + 14px);left:24px}.s2hero .s2subtitle{top:calc(var(--head) + 58px);bottom:auto;left:24px;right:auto;margin:0;width:auto;max-width:calc(100% - 48px);padding:6px 14px} /* 🚨 2026-09-09 眉・見出し・リードに帯を敷いたら、写真の上に紙を4枚貼ったように見えた。 帯はやめ、下側を濃くしたグラデを足場にする（トップの .bluehero と同じ考え方）。 文字は下半分に集めて、顔が写る上半分は写真のまま残す */ .s2hero .s2title .s2en,.s2hero .s2title h1,.s2hero .s2lead{width:fit-content;max-width:min(100%,35em);padding:0;background:rgba(4,22,45,0);box-decoration-break:clone;-webkit-box-decoration-break:clone} .s2hero .s2title h1{padding:0}.s2hero .s2lead{padding:0} @media (max-width:720px){ .s2hero::before{background:linear-gradient(180deg,rgba(4,22,45,.06) 0%,rgba(4,22,45,.10) 40%,rgba(4,22,45,.18) 100%)} .s2hero .s2frame video{filter:saturate(1) contrast(1) brightness(1.08)} .s2hero .s2scenehead{top:12px;left:12px}.s2hero .s2subtitle{top:56px;left:12px;max-width:calc(100% - 24px);font-size:13px} .s2hero .s2title{padding-top:104px;padding-bottom:34px} /* スマホは上から下へ。上3割は写真のまま（顔が見える）、下は文字の足場 */ .s2hero .s2title::before{background:linear-gradient(180deg,rgba(3,18,38,0) 0%,rgba(3,18,38,.62) 12%,rgba(3,18,38,.90) 30%,rgba(3,18,38,.94) 100%)} .s2hero .s2title .s2en{font-size:10.5px;letter-spacing:.24em;padding:0}.s2hero .s2title h1{font-size:clamp(32px,8.6vw,36px);line-height:1.24;padding:0}.s2hero .s2lead{font-size:14px;line-height:1.62;padding:7px 9px} .s2hero .s2chips{display:flex;gap:6px;margin-top:12px}.s2hero .s2chips li{font-size:11px;line-height:1.35;padding:5px 9px}.s2hero .s2chips li::before{width:11px;height:9px} .s2hero .s2facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:12px}.s2hero .s2facts .s2fact{padding:9px 10px}.s2hero .s2facts .s2fact dt{font-size:11px;letter-spacing:.08em}.s2hero .s2facts .s2fact dd{font-size:14px}.s2hero .s2facts .s2fact dd b{font-size:36px} /* 2026-09-10：ここで「／賞与年3回」「配送の経験がなくても入れます」が スマホでだけ1文字も出ていなかった（求職者に一番効く一言）。数字も56→28pxで PCのちょうど半分だった。数字は36pxへ、補足は折り返して出す。 */ .s2hero .s2facts .s2fact .d{display:block;font-size:14px;line-height:1.5;opacity:.92} .s2hero .s2acts{margin-top:12px}.s2hero .s2cta{min-height:50px;font-size:15px}.s2hero .s2note-ext{font-size:11px} .s2sec.sec{padding:52px 0}.s2career{padding:56px 0}.s2close .in{padding:52px 24px} .s2sec h3.s2h{margin-top:40px}.s2sec h3.s2h:first-of-type{margin-top:32px} /* 🚨 2列だと1行9字（PCは30字）。字を13→15pxにしたぶん、かえって1行が短くなった。 文字の大きさでなく列を減らして直す（2026-09-10 デザイン検品）。 */ .s2day{display:grid;grid-template-columns:1fr;gap:8px;border-left:0;padding-left:0}.s2day>div{padding:12px 10px 12px 14px;background:var(--white);border:1px solid var(--line);border-left:2px solid var(--brand);border-radius:8px}.s2day>div::before{display:none}.s2day>div:last-child{padding-bottom:12px}.s2day .t{font-size:16px}.s2day b{font-size:16px}.s2day p{font-size:15px;line-height:1.7} .s2scenes{display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:8px}.s2scene{scroll-snap-align:start}.s2scene .ph img{aspect-ratio:3/2}.s2scene .tx{padding:16px 18px 18px}.s2scene h3{font-size:20px}.s2scene p{font-size:15px;line-height:1.72} .s2real+.s2interlude{margin-top:28px;margin-bottom:28px}.s2interlude img{height:210px} } .s2sec .note::after,.s2career .note::after{content:none} .s2req{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .s2req summary{position:relative;display:flex;align-items:center;min-height:64px;padding:14px 48px 14px 4px;cursor:pointer;color:var(--brand);font-size:17px;font-weight:700;list-style:none}.s2req summary::-webkit-details-marker{display:none}.s2req summary::after{content:"＋";position:absolute;right:8px;font-size:26px;font-weight:400}.s2req[open] summary::after{content:"−"}.s2req .tbl{margin-top:0;border-top:1px solid var(--line)} @media (max-width:720px){.s2req{margin-top:16px}.s2req summary{min-height:56px;font-size:15px}.s2req .tbl{font-size:14px}} /* 🚨 2026-09-09 ヒーローに文字を全部入れると、写真を出す面積が残らず「人が見えない」状態になる。 実測：文字ブロックの面が画面の7割を覆っていた。リードとチップは1画面目から外に出し、 ヒーローには「眉・見出し・CTA・数字2枚」だけを残す（写真が主役に戻る） */ .s2intro{padding:32px 0 8px;background:var(--white)} .s2intro .s2lead{margin:0;max-width:36em;color:var(--ink);text-shadow:none;font-size:17px;line-height:1.95} .s2intro .s2chips{margin-top:20px} .s2intro .s2chips li{background:var(--white);box-shadow:0 2px 8px rgba(13,54,105,.08)} @media (min-width:721px){ .s2intro{padding:44px 0 12px} .s2intro .s2lead{font-size:18px} } @media (max-width:720px){ .s2intro{padding:26px 0 6px} .s2intro .s2lead{font-size:16px;line-height:1.85} } /* ヒーロー側は文字が減るので、面を下1/3だけに絞って写真を大きく見せる */ @media (max-width:720px){ /* 実測：文字は上から49%（眉）・53%（見出し）に来る。写真の白飛び（車内の窓）が明るく、 45%地点で .58 では明暗比 1.88:1 だった。文字が始まる45%以降を濃くする（顔は上40%に残す） */ /* 🚨 グラデの % は .s2title の高さ基準（ヒーロー基準ではない）。padding-top:150px があるので、 眉は .s2title の27%・見出しは34%の位置に来る。前は30%まで透明にしていて、眉が素の写真の上にいた （実測 1.86:1）。濃くする位置を上へ持ち上げる */ .s2hero .s2title::before{background:linear-gradient(180deg,rgba(3,18,38,0) 0%,rgba(3,18,38,.18) 22%,rgba(3,18,38,.84) 36%,rgba(3,18,38,.95) 46%,rgba(3,18,38,.96) 100%)} .s2hero .s2title{padding-top:210px} } @media (min-width:721px){ .s2hero .s2title::before{background:linear-gradient(90deg,rgba(3,18,38,.88) 0%,rgba(3,18,38,.80) 38%,rgba(3,18,38,.40) 66%,rgba(3,18,38,0) 92%)} } /* 🚨 2026-09-09 おでん指示「左上の二人組のところも被ってる」。 字幕を写真の上（顔の位置）から文字ブロックの中へ移した。写真の上には何も置かない */ .s2hero .s2subtitle{position:static;display:inline-block;margin:0 0 10px;padding:6px 14px; background:rgba(3,18,38,.86);border-radius:999px;font-size:13px;letter-spacing:.12em;text-indent:0; color:#fff;text-align:left;width:auto;max-width:none} @media (min-width:721px){ .s2hero .s2subtitle{font-size:14px;margin-bottom:14px} } /* 🚨 2026-09-09 顔と文字の重なり検査（_検査スクリプト/kao-moji.cjs）で、 PCは文字が左・顔が中央にあり、見出しが顔に22〜29%かぶっていた。 映像の見せる位置を右へずらして、左の文字帯と顔を分ける */ @media (min-width:1000px){ .s2hero .s2frame video{object-position:74% 26%} } @media (min-width:1600px){ .s2hero .s2frame video{object-position:78% 26%} } /* 🚨 2026-09-09 顔と文字の重なり検査：PCで見出し(y320-380)が左の人の顔(y201-404)に29%かぶっていた。 映像を右にずらすだけでは左の人が残るので、文字ブロックごと下へ寄せて顔の下で始める */ @media (min-width:1000px){ .s2hero{align-items:flex-end} .s2hero .s2title{margin:0 auto;padding-top:0;padding-bottom:72px} } /* 2026-09-09 おでん指示「もっとぎゅっと」。実測（同業37社の中央値8.3画面）に寄せるため、 本音の節の「向いている／向いていない」を畳んだ。中身は消していない */ .s2foldfit{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .s2foldfit>summary{cursor:pointer;list-style:none;padding:18px 4px;font-size:17px;font-weight:700; display:flex;align-items:center;justify-content:space-between;min-height:44px} .s2foldfit>summary::-webkit-details-marker{display:none} .s2foldfit>summary::after{content:"＋";font-size:19px;color:var(--accent)} .s2foldfit[open]>summary::after{content:"−"} .s2foldfit .s2fit{margin-top:4px;padding-bottom:20px} /* 🚨 2026-09-09 幅721〜999px（タブレット）が抜けていた。 ここだけ「文字が下に寄らない＋映像が顔を拡大する」状態で、文字が全部顔の上に乗っていた （顔が大きすぎてVisionが検出できず、検査でも見えていなかった）。 PCと同じ作法にそろえる：文字は下、映像の顔は右上へ逃がす */ @media (min-width:721px) and (max-width:999px){ /* ヒーローを低くすると映像の切り取りが浅くなり、顔が小さく上に収まる＝文字と離れる */ .s2hero{align-items:flex-end;min-height:76svh} .s2hero .s2title{margin:0 auto;padding-top:0;padding-bottom:40px} .s2hero .s2frame video{object-position:66% 12%} .s2hero .s2title::before{background:linear-gradient(180deg,rgba(3,18,38,0) 0%,rgba(3,18,38,.30) 12%,rgba(3,18,38,.88) 30%,rgba(3,18,38,.95) 100%)} } /* 幅360で字幕が顔に7.2%かかっていた（文字ブロックが上に来るため）。この幅だけ下げる */ @media (max-width:379px){ /* 見出しが長くなると文字ブロックが上に伸びて字幕が顔にかかる。この幅だけ字幕を詰める */ .s2hero .s2title{padding-top:238px} .s2hero .s2subtitle{font-size:12px;padding:4px 11px;margin-bottom:6px} .s2hero .s2title h1{font-size:30px;line-height:1.2} } /* 2026-09-09 デザイン検品の残り2件 */ @media (min-width:721px){ /* 節の上下は合格帯100〜120pxへ（96pxは安く見える側） */ .s2sec.sec{padding:104px 0} /* PCの全長がトップの1.8倍だったので、縦に積んでいたものを2列にする */ .s2faq{columns:2;column-gap:40px} .s2faq>details{break-inside:avoid;margin-bottom:0} } /* 🚨 2026-09-09 おでん指示「顔とかぶらない位置までグラデーションの背景を下げて、横に広げて、その分」。 PCは文字を縦に積んでいたため面が高く、左の人の顔の下半分を隠していた。 文字を左右2列に組み替えて面の高さを下げ、面は画面の全幅に敷く（顔は上に残る） */ @media (min-width:1000px){ .s2hero .s2title{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:0 48px;align-items:end;padding-bottom:56px} /* 🚨 行を明示しないと自動配置で順序が崩れる（実際に眉ラベルと副リンクが重なった）。 左列は 字幕→眉→見出し→CTA の順で固定する */ .s2hero .s2title{grid-template-rows:auto auto auto auto} .s2hero .s2subtitle{grid-column:1;grid-row:1;justify-self:start;align-self:end} .s2hero .s2title .s2en{grid-column:1;grid-row:2;align-self:end} .s2hero .s2title h1{grid-column:1;grid-row:3;margin-top:12px;align-self:end} .s2hero .s2acts{grid-column:1;grid-row:4;margin-top:22px;max-width:420px;align-self:end} .s2hero .s2facts{grid-column:2;grid-row:1/5;align-self:end;margin:0;max-width:none; grid-template-columns:1fr;gap:12px} /* 面は下からせり上がる形にして、顔が写る上半分は写真のまま残す */ .s2hero .s2title::before{background:linear-gradient(180deg, rgba(3,18,38,0) 0%,rgba(3,18,38,.22) 14%,rgba(3,18,38,.80) 34%,rgba(3,18,38,.93) 56%,rgba(3,18,38,.95) 100%)} } /* 🚨 2026-09-09 おでん実機指摘「携帯で開くと顔ドアップはおかしい」。 縦長の画面に横長の映像を目一杯まで切り取ると、顔だけが拡大される（実測で画面の14〜16%）。 ヒーローを低くして切り取りを浅くし、2人が入る引きの絵に戻す */ @media (max-width:720px){ .s2hero{min-height:74svh} .s2hero .s2frame video{object-position:52% 30%} .s2hero .s2title{padding-top:126px;padding-bottom:28px} .s2hero .s2title::before{background:linear-gradient(180deg,rgba(3,18,38,0) 0%,rgba(3,18,38,.24) 16%,rgba(3,18,38,.86) 30%,rgba(3,18,38,.95) 44%,rgba(3,18,38,.96) 100%)} } @media (max-width:379px){ .s2hero .s2title{padding-top:112px} } /* 🚨🚨 2026-09-09 おでん実機で3回差し戻し。 縦長の画面に「顔のアップの横長映像」を全面で入れると、どう調整しても ①顔が拡大される ②暗幕で顔が半分隠れる ③中途半端な位置で切れる のどれかになる。 スマホは全面をやめ、映像を横長のまま上に置いて、文字はその下に置く。 （映像の中の2人が両方入る＝顔が小さく、表情も見える） */ @media (max-width:720px){ .s2hero{min-height:0;display:block;padding-top:var(--head);background:var(--white)} .s2hero .s2film{position:static;padding:0} .s2hero .s2frame{width:100%;max-width:none;height:auto} .s2hero .s2frame video{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover; object-position:50% 34%;filter:saturate(.98) contrast(1.03) brightness(1.02)} .s2hero::before{display:none} .s2hero .s2title{position:static;padding:22px 24px 34px;color:var(--ink);margin:0;display:block} .s2hero .s2title::before{display:none} .s2hero .s2title .s2en{color:var(--accent);font-size:11px;letter-spacing:.24em;text-shadow:none} .s2hero .s2title h1{color:var(--ink);text-shadow:none;font-size:clamp(30px,8.2vw,36px);line-height:1.24;margin-top:10px} .s2hero .s2acts{margin-top:20px;max-width:none} .s2hero .s2facts{margin-top:18px} .s2hero .s2facts .s2fact{background:var(--white);box-shadow:0 6px 18px rgba(13,54,105,.10)} .s2hero .s2sub-link{color:var(--brand);border-color:var(--brand)} .s2hero .s2note-ext{color:var(--sub);text-shadow:none} .s2hero .s2chips li{background:var(--white)} } /* ===== 代表からの一言（ヒーロー直下・会社概要リードの上）2026-09-11 おでん指示で下部から移設 ===== */ .s2voice{padding:28px 0 0;background:var(--white)} .s2voice .s2said{margin-top:0} .s2said p.s2said-lab{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.08em;line-height:1.4;color:var(--accent)} @media (min-width:721px){ .s2voice{padding:40px 0 0} } @media (max-width:720px){ .s2voice{padding:22px 0 0} .s2said p.s2said-lab{font-size:12px} }