/* ============================================================ YUIME LP／お問い合わせ — レスポンシブ指定 index.html / contact.html は .fig から自動生成される。 クラス名（f0, f1…）は再生成のたびに変わるため、ここでは Figma のレイヤー名（data-n 属性）を目印にする。 レイヤー名は .fig を更新しても変わらないので、再生成しても このファイルは生き続ける。 ※ index.html / contact.html は手で編集しない。直すのは .fig か このファイル。 ※ :not() を改行でつなぐと「子孫」の意味になるので必ず1行で書く ============================================================ */ :root { --green:#2F7D24; --greenTx:#337A28; --red:#DD001B; --redF:#E62327; --ink:#211815; --cream:#FDF8F0; --label:#6E6E6E; } /* 生成物は 1440px を前提に px で組まれている。 幅が足りない画面では、まず横あふれを止める */ html, body { max-width:100%; overflow-x:hidden; } /* ------------------------------------------------------------ 注意バーは幅によらず中央寄せにする .fig ではオートレイアウトになっておらず、中身が1440px前提の絶対配置。 生成器は「右寄りの要素は右端から固定」するため、1440pxより広い画面では 「求人ページはこちら」だけが右へ流れて本文から離れる（1920pxで497px）。 逆に狭い画面では本文と重なる（1420pxから）。 幅に関係なく、3つを1かたまりとして中央に並べる。 ------------------------------------------------------------ */ [data-n="02_注意バー"] { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; padding:8px 24px; /* 高さは .fig の 58px を保つ。auto にすると 4px 縮んで、 以降のセクションが全部ずれる */ height:auto; min-height:58px; } [data-n="02_注意バー"] > [data-n] { position:relative; left:auto; right:auto; top:auto; } [data-n="02_注意バー"] > [data-n^="当サイトは"] { width:auto; white-space:normal; } [data-n="専用タグ"] { width:auto; flex:none; } [data-n="リンク"] { flex:none; } /* このセクションだけは幅によらず高さを中身に合わせる。 （元は Turnstile の枠のぶん縦に伸びる対策。2026-08-30 に reCAPTCHA v3 へ替えて枠は無くなったが、 .fig の高さ（1586px）で固定に戻すと中身が溢れたときに送信ボタンがフッターに食い込むので残す） */ [data-n="04_フォーム"], [data-n="本文カラム"] { height:auto; } /* ============================================================ お問い合わせフォームの実体 .fig の「入力欄」レイヤー（白い箱・角丸・内側の余白）はそのまま枠として使い、 その中に透明な input / textarea / select を敷いている。 見た目は .fig のまま、実際に入力できる状態にするための指定。 ============================================================ */ .field .ctl { flex:1 1 auto; min-width:0; width:100%; align-self:stretch; border:0; background:transparent; outline:none; box-shadow:none; font:inherit; color:#211815; padding:0; /* リングは枠側（.field:focus-within）に出す。ここで消して終わりにしない */ } .field .ctl::placeholder { color:#B5B0AA; opacity:1; } .field .ctl--area { resize:vertical; padding:0 0 18px; line-height:1.8; align-self:stretch; } /* セレクトは既定の見た目を消し、山形を自前で描く（.fig の山形は input に置き換わるため） */ .field .ctl--select { appearance:none; -webkit-appearance:none; cursor:pointer; } .field .ctl--select:invalid { color:#B5B0AA; } .ctl-chevron { width:14px; height:9px; flex:none; pointer-events:none; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M2 2.5 L7 6.5 L12 2.5' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ラジオ・チェックは本物の控えを透明にして重ね、.fig の丸／四角を見た目として使う */ .ctl-sr { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; } .opt { cursor:pointer; } .opt .ctl-sr:checked ~ [data-n="丸"] { box-shadow:inset 0 0 0 1.5px #DD001B; } .opt .ctl-sr:checked ~ [data-n="丸"]::after { content:""; position:absolute; inset:4px; border-radius:50%; background:#DD001B; } [data-n="チェックボックス"] { position:relative; cursor:pointer; } [data-n="チェックボックス"]:has(:checked) { box-shadow:inset 0 0 0 1px #DD001B; } [data-n="チェックボックス"]:has(:checked)::after { content:""; position:absolute; left:4px; top:0; width:6px; height:10px; border:solid #DD001B; border-width:0 2px 2px 0; transform:rotate(45deg); } /* キーボードで辿れるように、フォーカスが分かる指定。 黄色だけだと生成りの上で 1.4:1 しか無いので緑にする（4.9:1）。 ※フォームの部品は生成り／白の上にしか出ないので、この1色で足りる */ .opt .ctl-sr:focus-visible ~ [data-n="丸"], [data-n="チェックボックス"]:has(.ctl-sr:focus-visible) { outline:2px solid #337A28; outline-offset:3px; } /* 電話番号は必須に変更（2026-08-17 クライアント指示）。 .fig のバッジは「任意」（グレー）のままなので、Figma を直して再生成するまで ここで色を合わせる。必須の赤は他のバッジと同じ #E72227 ※ Figma 側のバッジを「必須」に直したら、このブロックは消す */ [data-n="ラベル / 電話番号"] [data-n^="バッジ"] { background:#e72227; } [data-n="ラベル / 電話番号"] [data-n^="バッジ"] > [data-n] { color:#ffffff; } /* 送信ボタン（button 要素になるので既定の見た目を消す） */ button[data-n^="ボタン / "] { border:0; font:inherit; cursor:pointer; } button[data-n^="ボタン / "][disabled] { opacity:.45; cursor:not-allowed; } /* ------------------------------------------------------------ 入力エラーの表示 LP2の資料DLフォーム（figout/lp2-download.html／plugin-lp2-form の 「YUIME LP2 資料DL エラー表示の見本」）と同じ見せ方にそろえる。 ・帯 … 赤枠2px＋薄赤の地＋！アイコン、16px太字 ・欄 … 内側に赤の枠（2px） ・文言 … 欄の直下8px、13px太字の赤 帯も文言も「入力欄の列」に合わせて置く。ラベル列の幅は画面幅で 変わるので、--lbcol（ラベル列＋間隔）で1か所にまとめる。 ------------------------------------------------------------ */ :root { --lbcol:383px; } /* 343（ラベル列）＋40（間隔） */ @media (max-width:1024px) { :root { --lbcol:290px; } } /* 250＋40 */ @media (max-width:768px) { :root { --lbcol:0px; } } /* 縦積みになる */ /* 欄の枠（PHP側から戻ってきたときにも付く） */ .field.is-error { box-shadow:inset 0 0 0 2px #DD001B; } /* エラー中はフォーカスの線も赤にする（緑のままだと直ったように見える）。 最初のエラー項目には自動でフォーカスが当たるので必ず通る経路 */ .field.is-error:focus-within { outline-color:#DD001B; } /* 選択肢は見本と同じく全部の丸を赤にする。どれも選ばれていないため */ [role="radiogroup"].is-error [data-n="丸"] { box-shadow:inset 0 0 0 2px #DD001B; } [data-n="チェックボックス"].is-error { box-shadow:inset 0 0 0 2px #DD001B; } /* フォームの先頭に出る帯。ページの中央に置く （入力欄の列に寄せるとラベル列343pxのぶん右にずれて見える） */ .form-error, .form-ok { display:flex; align-items:center; justify-content:center; gap:10px; align-self:center; width:fit-content; max-width:100%; margin:0; padding:16px 20px; text-align:center; border-radius:8px; font-size:16px; font-weight:700; line-height:1.6; } .form-error svg, .form-ok svg { width:20px; height:20px; flex:none; } .form-error { border:2px solid #DD001B; background:#FFF1F2; color:#DD001B; } .form-ok { border:2px solid #2F7D24; background:#EDF6EA; color:#2F7D24; } /* 項目ごとのエラー文・文字数・送信ボタンの案内。 本文カラムの gap が 40px あるため、そのままだと欄から離れて どの欄のエラーか分からない。負のマージンで見本と同じ8pxまで詰める */ .field-error { margin:-32px 0 0; padding-left:var(--lbcol); color:#DD001B; font-size:13px; font-weight:700; line-height:1.6; } .field-count { margin:-32px 0 0; padding-left:var(--lbcol); color:#6E6E6E; font-size:13px; } .submit-hint { margin:0; padding-left:var(--lbcol); color:#6E6E6E; font-size:14px; line-height:1.7; } /* ============================================================ UXの底上げ（Figmaに無い、実装側で足す分） ============================================================ */ /* main は .fig 由来のノードではないので幅指定を持たない。 ルートフレームが縦並び（flex）なので、指定しないと中身の最大幅まで伸びてしまう */ main { width:100%; align-self:stretch; } /* 本文へスキップ。キーボード操作でヘッダーのCTAを毎回踏まずに済むように */ .skiplink { position:absolute; left:8px; top:-60px; z-index:9999; padding:10px 16px; border-radius:0 0 8px 8px; background:#211815; color:#fff; font-weight:700; text-decoration:none; } .skiplink:focus { top:0; } /* 押せる要素の当たり判定を確保する（フッターの文字リンクが21pxしかなかった） */ [data-n="コーポレートサイト"], [data-n="◎ インスタグラム"], [data-n="▤ メディア情報"], [data-n="リンク"], [data-inline-link] { min-height:24px; display:inline-flex; align-items:center; } /* 15px角の見た目はそのままに、押せる範囲だけ広げる。 padding で広げると内側の枠線（box-shadow）まで一緒に広がって四角が伸びる */ [data-n="チェックボックス"]::before { content:""; position:absolute; left:-15px; top:-15px; right:-15px; bottom:-15px; } /* ラジオも同じく、枠の大きさを変えずに押せる範囲だけ広げる */ [data-n^="選択肢 / "] { position:relative; } [data-n^="選択肢 / "]::after { content:""; position:absolute; left:0; right:0; top:-10px; bottom:-10px; } /* ------------------------------------------------------------ 印刷（組合内で回覧される想定） ------------------------------------------------------------ */ @media print { /* 背景を落とすと、白抜き文字が白紙に消える（実測でLP55箇所・お問い合わせ20箇所）。 色を1つずつ戻すのは漏れるので、背景ごと印刷させる指定に切り替える。 Chrome ではこの指定が「背景のグラフィック」の設定より優先される */ html, body, .root, .root * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .root { overflow:visible; } .skiplink { display:none !important; } [data-n="スクロールトップ"] { display:none !important; } /* 画面下部に固定しているバーは、印刷では本文の流れに戻す */ [data-n="02_注意バー"] { position:static !important; } body { padding-bottom:0; } /* FAQは初期状態で閉じている。印刷物では回答が読めないと意味がないので開く */ [data-n^="回答"][hidden] { display:flex !important; } /* 開閉の丸ごと消す（印刷では全部開いているので、空の丸が残ると押せそうに見える） */ [data-n="質問バー"] [data-n="開閉"] { display:none !important; } /* 見出しやカードがページ跨ぎで割れないようにする */ [data-n^="09_"], [data-n^="12_"], [data-n*="事例カード"], [data-n*="STEP"], [data-n*="理由カード"], [data-n*="実績カード"], [data-n*="お悩みカード"], [data-n*="FAQ1"], [data-n*="FAQ2"], [data-n*="FAQ3"], [data-n*="FAQ4"] { break-inside:avoid; } /* URLの追記はボタンの中や横並びのリンクで重なって読めなくなるのでやめる */ } /* ------------------------------------------------------------ 狭い画面（〜375px）のお問い合わせフォーム ------------------------------------------------------------ */ @media (max-width:375px) { /* 「☐ プライバシーポリシー に同意する」が1行に収まらず右へ押し出される */ [data-n="チェック行"] { flex-wrap:wrap; row-gap:4px; } } /* セレクトの文字が右の山形と重なる（枠の右パディングは山形のぶんしかない） */ .field .ctl--select { padding-right:6px; } /* ------------------------------------------------------------ 日本語の組版 行頭に「ー」「ょ」「ョ」などが来る（禁則違反）のと、 最終行に1〜2文字だけ落ちるのを減らす。 ------------------------------------------------------------ */ .root [data-n] { line-break:strict; /* 小書き仮名・長音符を行頭に置かない */ text-wrap:pretty; /* 最終行に1〜2文字だけ残る折り返しを避ける（対応ブラウザのみ） */ } /* ============================================================ hover / focus Figmaはホバー状態を持たないので、ここで足す。 既存サイト（tokuteiginou.yuime.jp）の指定に合わせ、 opacity をわずかに落とすだけの控えめな作りにする。 .linkCard { transition: opacity .2s ease, transform .2s ease } .linkCard:hover { opacity: .94 } ※ 既存サイトのこの指定は SCSS の & 抜け（`.linkCard:hover` と書かれている）で 実際には当たっていない。値だけ踏襲した。 付けるのは「押せる要素」だけ（押せないカードに付けると誤解を招く）。 ============================================================ */ .root a, [data-n="質問バー"] { transition: opacity .2s ease, transform .2s ease; } /* ボタン類（CTA・ヘッダーのピル・ページ先頭へ） */ [data-n^="ボタン / "]:hover, [data-n^="ナビボタン / "]:hover, [data-n="スクロールトップ"]:hover { opacity:.94; } [data-n^="ボタン / "]:active, [data-n^="ナビボタン / "]:active, [data-n="スクロールトップ"]:active { opacity:.88; } /* 文字リンクは面積が小さく .94 では気づけないので、もう少し落とす */ [data-n="リンク"]:hover, [data-n="コーポレートサイト"]:hover, [data-n="◎ インスタグラム"]:hover, [data-n="▤ メディア情報"]:hover, [data-n="プライバシーポリシー"]:hover, [data-inline-link]:hover { opacity:.7; } /* FAQの設問バー（開閉できるものだけ role="button" が付く） */ [data-n="質問バー"][role="button"]:hover { opacity:.9; } /* キーボードで辿ったときに、どこにいるか分かるようにする。 リンクは緑の帯・赤いボタン・グレーパープルのフッターの上にも乗る。 緑だと フッターで 1.07:1・緑の帯で 1.03:1 になり見えなくなるため、 地色を選ばない濃茶＋黄の2色重ねにしてある（フッター上で 3.5:1）。 ※フォームの入力欄は下の別指定（緑1色）。地色が生成りと白しか無く、 黒＋黄は目立ちすぎるため分けている */ .root a:focus-visible, [data-n="質問バー"]:focus-visible, .skiplink:focus { outline:3px solid #211815; outline-offset:2px; border-radius:4px; box-shadow:0 0 0 6px #F5CE2E; } /* フォームの部品（生成り・白の上にしか出ない）。緑1色で 4.9〜5.3:1 */ .field:focus-within, [data-n^="選択肢 / "]:focus-within { outline:2px solid #337A28; outline-offset:2px; border-radius:8px; } /* 指で操作する端末では hover を効かせない（押した後に残って見える） */ @media (hover:none) { [data-n^="ボタン / "]:hover, [data-n^="ナビボタン / "]:hover, [data-n="スクロールトップ"]:hover, [data-n="質問バー"][role="button"]:hover { opacity:1; } } /* 導入事例は .fig の4枚から6枚に増えている。.fig の高さのままだと入り切らないので 中身に合わせる（cases.json の件数を変えても崩れない） */ [data-n="08_導入事例"], [data-n="事例グリッド"] { height:auto; } /* アートボード自体の高さも中身に合わせる。 .fig の高さ（1問だけFAQを開いた状態の値）で固定されているため、 全部閉じた初期状態だとページ末尾に余白が残る */ .root > [data-n] { height:auto; } /* ------------------------------------------------------------ FAQは開閉する .fig は「開いた状態」「閉じた状態」を別レイヤーで持っているだけなので、 高さも1問だけ開いた状態で固定されている。開閉すると高さが変わるため、 FAQまわりだけは幅によらず中身に合わせて伸縮させる。 ※ 全部閉じた状態が初期値になるので、.fig（1問開いた状態）より セクションは縦に短くなる ------------------------------------------------------------ */ [data-n="11_FAQ"], [data-n="FAQ本体"], [data-n="FAQリスト"], [data-n*="FAQ1"], [data-n*="FAQ2"], [data-n*="FAQ3"], [data-n*="FAQ4"], [data-n*="FAQ5"], [data-n^="回答"] { height:auto; } /* ------------------------------------------------------------ メインビジュアルの左右写真 .fig は 1440px 幅で 380px。そのままだと画面が広いほど写真だけが 相対的に細くなるので、1440px以上では同じ比率（380/1440＝26.3889%）で伸ばす。 1440px ちょうどで 380px になる式なので、境目で段差は出ない。 1439px以下は、中央のコピー（640px）に食い込ませないための別式を使う。 ------------------------------------------------------------ */ @media (min-width:1440px) { [data-n="写真 / 左"], [data-n="写真 / 右"] { width:26.3889%; } } /* ------------------------------------------------------------ 1440pxより広い画面での置き去り対策 解決帯の黄色い下線と下向きの三角は .fig の絶対位置（left:491px / 686px）で 固定されている。文字はflexで中央に寄るため、画面が広がるほど離れていく （実測：1600pxで80px、3840pxで1200pxズレて完全に分離）。 1440pxちょうどは .fig の値をそのまま使いたいので 1441px 以上に当てる。 ------------------------------------------------------------ */ @media (min-width:1441px) { [data-n="06b_解決帯"] > [data-n="矩形"] { left:50%; right:auto; margin-left:-224.5px; } [data-n="06b_解決帯"] > [data-n="三角"] { left:50%; right:auto; margin-left:-34px; } } /* フッターのSNSリンクが親から3.2pxはみ出す（.fig の固定幅と実際の文字幅の差） */ [data-n="SNS"] > [data-n] { width:max-content; max-width:100%; } /* ------------------------------------------------------------ 0. 土台：固定pxの箱が親からはみ出さないようにする .fig の値をそのまま持っているため、1120px・920px・548px…と いった固定幅が随所にある。親より広い箱は必ずはみ出すので、 画面が狭いときは一律で親の幅までに抑える。 意図的に画面外へ出す装飾（背景の弧・ロゴ透かし・キラキラ）と、 位置が意味を持つ図形（マーカー・三角）だけ対象外にする。 ------------------------------------------------------------ */ @media (max-width:1439px) { .root [data-n]:not([data-n="背景の弧"]):not([data-n^="ロゴ透かし"]):not([data-n^="装飾"]):not([data-n="矩形"]):not([data-n="三角"]) { max-width:100%; min-width:0; } /* チップは文字幅に合わせる箱。.fig の固定幅のままだと、 狭い画面で親の幅いっぱいまで伸びた帯に見える */ [data-n^="チップ / "] { width:max-content; max-width:100%; } /* 1440px設計では 380px の写真2枚と 640px のコピーで 1400px。 画面が狭くなると中央のコピーが左右の写真に食い込んで文字が読めなくなるので、 写真側を画面幅に追従させる（1440pxではちょうど 380px になる式）。 ※ セレクタは 1024px 以下の再構成（幅40%）に上書きされる必要があるので、 詳細度を上げない（属性1つだけ）で書く */ [data-n="写真 / 左"], [data-n="写真 / 右"] { width:calc((100% - 680px) / 2); } /* 横並びのカードは、Figmaの幅の比率を保ったまま縮める。 flex:1 1 0（等分）にすると、2枚しか入らない列だけ不自然に太くなるため、 幅は生成物の値を基準（flex-basis:auto）にして縮小だけ許可する */ [data-n="カード列"] > [data-n], [data-n="お悩みカード列"] > [data-n], [data-n="理由グリッド"] [data-n="行"] > [data-n], [data-n*="事例カード"] > [data-n], [data-n="FAQ本体"] > [data-n], [data-n*="STEP"] > [data-n="STEP本文"] { flex:0 1 auto; min-width:0; } [data-n="事例本文"], [data-n="FAQリスト"], [data-n="STEP本文"] { flex-shrink:1; min-width:0; } /* 事例のスペック（場所・品目・派遣人数）は固定幅。縮むと文字が切れるので、 折り返して文字幅に合わせる */ [data-n="スペック"] { flex-wrap:wrap; height:auto; } [data-n="スペック"] > [data-n^="項目 / "] { width:auto; flex:0 1 auto; min-width:0; } [data-n="05_サービス紹介CTA"], [data-n="09_中間CTA"], [data-n="12_クロージングCTA"], [data-n="04_実績3指標"], [data-n="06_お悩み訴求"], [data-n="07_選ばれる理由"], [data-n="08_導入事例"], [data-n="10_導入の流れ"], [data-n="11_FAQ"], [data-n="04_フォーム"], [data-n="03_ページ見出し"] { /* .fig は左右160px固定。1440pxでは本文1120pxになるが、そのままだと 1281pxで本文961pxまで縮み、1024px（964px）より狭くなる逆転が起きる。 「本文1120pxを保てるところまで余白を詰める」式にすると段差なく繋がる （1439px→159.5px、1281px→80.5px、1160px以下→20px） */ padding-left:max(20px, calc((100% - 1120px) / 2)); padding-right:max(20px, calc((100% - 1120px) / 2)); } /* 横並びのカードは高さを揃える。白背景と影が付いているので、 下端がずれると影の段差としてそのまま見える */ [data-n="カード列"], [data-n="お悩みカード列"], [data-n="理由グリッド"] [data-n="行"] { align-items:stretch; } /* 逆に、縮むと文字やアイコンが欠けるものは縮ませない */ [data-n^="タグ / "], [data-n^="バッジ / "], [data-n^="番号バッジ"], [data-n^="チップ / "], [data-n="専用タグ"], [data-n="バッジ"], [data-n="開閉"], [data-n="チェック"], [data-n="矢印"], [data-n="汗"], [data-n^="アイコン"], [data-n="山形"] { flex:none; } /* FAQの設問は折り返して縮む。そうしないと右の開閉アイコンが潰れる */ [data-n="質問バー"] > [data-n]:first-child { flex:1 1 auto; min-width:0; width:auto; } /* 事例の「課題」「成果」は タグ＋本文の横並び。本文側を縮ませる */ [data-n="事例本文"] > [data-n="課題"] > [data-n]:last-child, [data-n="事例本文"] > [data-n="成果"] > [data-n]:last-child { flex:1 1 auto; min-width:0; width:auto; } /* 解決帯は中身が 1440px 前提の絶対配置。1行が長く、少しでも幅が減ると 文字が切れるため、ここから縦積みの中央揃えに切り替える （固定の top のままだと、折り返した分だけ次の行と重なる） */ [data-n="06b_解決帯"] { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; height:auto; min-height:253px; padding:48px 24px 60px; } [data-n="06b_解決帯"] > [data-n^="YUIMEの"], [data-n="06b_解決帯"] > [data-n^="人材獲得"] { position:relative; left:auto; right:auto; top:auto; width:100%; text-align:center; white-space:normal; } /* 主コピーは36px固定。1行に収まらなくなる幅から画面幅に追従させる */ [data-n="06b_解決帯"] > [data-n^="人材獲得"] { font-size:clamp(20px, 2.85vw, 36px); } [data-n="06b_解決帯"] > [data-n^="YUIMEの"] { font-size:clamp(14px, 1.9vw, 24px); } /* 下線は .fig では絶対位置の矩形。縦積みにすると位置が合わないので矩形自体は隠し、 代わりに文字そのものへ下線として描く（1440pxでしか出ていなかった飾りを全幅で復活させる） */ [data-n="06b_解決帯"] > [data-n="矩形"] { display:none; } [data-n="06b_解決帯"] > [data-n^="YUIMEの"] { width:auto; max-width:100%; padding:0 6px; background-image:linear-gradient(transparent 62%, rgba(245,206,46,.85) 62%); background-repeat:no-repeat; } /* 下向きの三角は画面中央へ寄せ直す */ [data-n="06b_解決帯"] > [data-n="三角"] { left:50%; right:auto; top:auto; bottom:0; margin-left:-34px; } } /* ------------------------------------------------------------ 1. 1280px 以下：左右の余白を詰め、本文カラムを画面に追従させる ------------------------------------------------------------ */ @media (max-width:1280px) { /* ※ 12_クロージングCTA は "1" 始まりなので [data-n^="0"] に当たらない。 3本とも明示的に並べる */ /* 本文カラムは画面幅に追従させる。 ※ max-width で書くと、上の一括指定（.root [data-n]:not()×5 ＝ 詳細度が高い）の max-width:100% に負けて 1120px の上限が消える。width 側で表現する */ [data-n="カード列"], [data-n="お悩みカード列"], [data-n="理由グリッド"], [data-n="事例グリッド"], [data-n="STEPリスト"], [data-n="FAQ本体"], [data-n="本文カラム"] { width:min(100%, 1120px); } [data-n="理由グリッド"] > [data-n="行"] { width:100%; } [data-n="事例グリッド"] > [data-n] { width:100%; } [data-n="STEPリスト"] > [data-n] { width:100%; } /* 注意バーのタグは文字幅に合わせる（固定幅だと2pxだけ文字が切れる） */ [data-n="専用タグ"] { width:auto; padding:4px 10px; } } /* ------------------------------------------------------------ 【検討中】1240px以下：左右の写真30% / 中央のコピー40% 1240px以下では写真が細く見えるため、割合を固定に変える案。 30+40+30=100% で隙間がゼロになるので、コピー側は文字を画面幅に 追従させないと写真に食い込む。 ------------------------------------------------------------ */ @media (min-width:1025px) and (max-width:1240px) { [data-n="写真 / 左"], [data-n="写真 / 右"] { width:30%; } [data-n="MVコピー"] { width:40%; padding-left:24px; padding-right:24px; box-sizing:border-box; } [data-n="MVコピー"] [data-n="大見出し"], [data-n="MVコピー"] [data-n="補足枠"], [data-n="MVコピー"] [data-n="CTA枠"] { width:100%; } /* チップは文字幅に合わせる箱。width:100% を当てると緑の帯が横いっぱいに伸びる */ [data-n="MVコピー"] [data-n^="チップ / "] { width:max-content; max-width:100%; } /* 見出しは 56px 固定。40%幅に収まらないので画面幅に追従させる */ /* 中央の枠は 40%。9文字の見出しが1行に収まる大きさを画面幅から逆算する （枠の内寸 = 40%W - 左右余白48px、それを9文字で割る） */ [data-n="繁忙期の人手不足に"], [data-n="人材を支援"], [data-n="します"] { font-size:clamp(30px, calc(4.44vw - 7px), 56px); white-space:normal; } [data-n="2行目"] { flex-wrap:wrap; justify-content:center; } [data-n="マーカー強調"] { width:auto; } /* マーカーの top は56px見出し用の固定値。文字を縮めると下に取り残されるので、 文字サイズに追従する下端基準に置き換える */ [data-n="マーカー強調"] > [data-n="矩形"] { top:auto; bottom:.14em; left:4px; right:4px; width:auto; height:.3em; } [data-n="MVコピー"] [data-n="【原稿待ち】 MV補足文"] { width:100%; font-size:clamp(15px, 1.4vw, 17px); } /* チップ・ボタンの文字とアイコンも、枠の40%に収まるよう画面幅に追従させる */ [data-n="MVコピー"] [data-n^="チップ / "] { padding:clamp(6px,.7vw,9px) clamp(10px,1.4vw,18px); } [data-n="MVコピー"] [data-n^="チップ / "] > [data-n] { font-size:clamp(13px, 1.15vw, 14px); letter-spacing:0; } [data-n="MVコピー"] [data-n^="ボタン / "] > [data-n="問い合わせ"], [data-n="MVコピー"] [data-n^="ボタン / "] > [data-n="資料請求"] { font-size:clamp(12px, 1.35vw, 17px); letter-spacing:.02em; } [data-n="MVコピー"] [data-n^="ボタン / 問い合わせ"] > [data-n="アイコン"] { width:clamp(20px, 2.4vw, 34px); height:clamp(15px, 1.83vw, 26px); flex:none; } [data-n="MVコピー"] [data-n^="ボタン / 資料請求"] > [data-n="アイコン"] { width:clamp(15px, 1.83vw, 26px); height:clamp(19px, 2.32vw, 33px); flex:none; } [data-n="MVコピー"] [data-n^="ボタン / "] { height:auto; min-height:clamp(48px, 5.3vw, 76px); } [data-n="MVコピー"] [data-n="CTA枠"] { padding-top:clamp(16px, 2.2vw, 32px); } /* ボタン2つ（560px）も 40%幅には入らない */ [data-n="MVコピー"] [data-n="CTAボタン"] { width:100%; gap:12px; } [data-n="MVコピー"] [data-n^="ボタン / "] { flex:1 1 0; width:auto; min-width:0; padding-left:10px; padding-right:10px; } } /* ------------------------------------------------------------ 2. 1024px 以下（タブレット） ------------------------------------------------------------ */ @media (max-width:1024px) { [data-n="01_ヘッダー"] { padding:16px 24px; } [data-n="02_注意バー"] { padding:12px 24px; flex-wrap:wrap; gap:10px; } /* 中身は 1440px 前提の絶対配置。横並びとして流し直す */ [data-n="02_注意バー"] > [data-n] { position:relative; left:auto; right:auto; top:auto; } /* 長い注意文は折り返して縮める */ [data-n="02_注意バー"] > [data-n^="当サイトは"] { flex:1 1 240px; min-width:0; white-space:normal; } [data-n="04_実績3指標"], [data-n="06_お悩み訴求"], [data-n="07_選ばれる理由"], [data-n="08_導入事例"], [data-n="10_導入の流れ"], [data-n="11_FAQ"], [data-n="05_サービス紹介CTA"], [data-n="09_中間CTA"], [data-n="12_クロージングCTA"], [data-n="04_フォーム"] { padding-top:72px; padding-bottom:72px; padding-left:30px; padding-right:30px; } /* MV：左の写真を消し、コピー60% / 右写真40% の2分割にする */ [data-n="03_メインビジュアル"] { height:auto; min-height:520px; flex-direction:row; align-items:stretch; justify-content:flex-start; } [data-n="写真 / 左"] { display:none; } /* HTML上は写真が先に来るので、順序を入れ替えてコピーを左に置く */ [data-n="写真 / 右"] { position:relative; right:auto; top:auto; order:2; flex:0 0 40%; width:40%; height:auto; align-self:stretch; } [data-n="MVコピー"] { position:relative; order:1; flex:0 0 60%; width:60%; align-self:center; padding:56px 24px 56px 30px; box-sizing:border-box; align-items:flex-start; } [data-n="MVコピー"] [data-n="大見出し"], [data-n="MVコピー"] [data-n="補足枠"] { width:100%; align-items:flex-start; } [data-n="MVコピー"] [data-n="大見出し"] > *, [data-n="MVコピー"] [data-n="補足枠"] > * { text-align:left; } [data-n="繁忙期の人手不足に"], [data-n="人材を支援"], [data-n="します"] { font-size:clamp(28px, 4.4vw, 46px); white-space:normal; } [data-n="MVコピー"] [data-n="CTA枠"] { width:100%; align-items:flex-start; } /* 黄色マーカーは固定幅で置かれている。文字サイズが変わるとはみ出すので 文字幅に追従させる */ [data-n="2行目"] { flex-wrap:wrap; } [data-n="マーカー強調"] { width:auto; } /* マーカーは top:56px の固定値。見出しを縮めると箱の外へ出て、 文字と無関係な黄色い帯が宙に浮く（769〜1024pxで発生していた）。 文字サイズに追従する下端基準に置き換える */ [data-n="マーカー強調"] > [data-n="矩形"] { top:auto; bottom:.14em; left:4px; right:4px; width:auto; height:.3em; } [data-n="MVコピー"] [data-n="CTAボタン"] { flex-wrap:wrap; gap:12px; justify-content:flex-start; } [data-n="MVコピー"] [data-n^="ボタン / "] { width:clamp(150px, 21vw, 230px); height:auto; min-height:clamp(44px, 5.5vw, 56px); padding:10px clamp(8px, 1.4vw, 16px); gap:clamp(6px, 1vw, 12px); } /* 箱が 260→168px まで縮むので、文字とアイコンも一緒に縮める */ [data-n="MVコピー"] [data-n^="ボタン / "] > [data-n="問い合わせ"], [data-n="MVコピー"] [data-n^="ボタン / "] > [data-n="資料請求"] { font-size:clamp(12px, 1.85vw, 19px); letter-spacing:.02em; } [data-n="MVコピー"] [data-n^="ボタン / 問い合わせ"] > [data-n="アイコン"] { width:clamp(17px, 2.6vw, 27px); height:clamp(13px, 1.99vw, 21px); flex:none; } [data-n="MVコピー"] [data-n^="ボタン / 資料請求"] > [data-n="アイコン"] { width:clamp(13px, 1.99vw, 21px); height:clamp(17px, 2.53vw, 26px); flex:none; } /* カラムの間隔を詰める */ [data-n="カード列"], [data-n="お悩みカード列"], [data-n="事例グリッド"] { gap:16px; } [data-n="理由グリッド"] { gap:16px; } [data-n="理由グリッド"] [data-n="行"] { gap:16px; } [data-n="FAQ本体"] { gap:24px; } /* 上の一括指定 [data-n="FAQ本体"] > [data-n] が (0,2,0) なので、 こちらも同じ形にしないと縮んでチップの文字が切れる */ [data-n="FAQ本体"] > [data-n="FAQ見出し"] { width:200px; flex:none; } [data-n="右（会社情報）"] { padding:64px 32px 32px; } [data-n="STEPリスト"] > [data-n*="STEP"] { width:100%; } /* 事例カード：写真は縮み過ぎないように下限を持たせる */ [data-n*="事例カード"] > [data-n^="画像 / "] { flex:0 0 34%; width:34%; min-width:0; } /* 実績の数値は「幅を文字に合わせる」指定のため折り返さない。 カードが縮む幅では文字が切れるので、文字サイズを画面幅に追従させる */ /* 実績の数値は「幅を文字に合わせる」指定のため折り返さない。 カードが縮む幅では文字が切れるので、文字サイズを画面幅に追従させる */ [data-n="数値枠"] > [data-n] { font-size:clamp(22px, 3.2vw, 40px); width:100%; text-align:center; /* 生成物は white-space:pre（＝折り返さない）。改行は残しつつ折り返しを許す */ white-space:pre-line; overflow-wrap:anywhere; } } /* ------------------------------------------------------------ 3. 768px 以下（スマートフォン） ------------------------------------------------------------ */ @media (max-width:768px) { [data-n="04_実績3指標"], [data-n="06_お悩み訴求"], [data-n="07_選ばれる理由"], [data-n="08_導入事例"], [data-n="10_導入の流れ"], [data-n="11_FAQ"], [data-n="05_サービス紹介CTA"], [data-n="09_中間CTA"], [data-n="12_クロージングCTA"], [data-n="04_フォーム"] { padding-top:56px; padding-bottom:56px; padding-left:20px; padding-right:20px; } /* ヘッダー：ピル型ナビを隠す */ [data-n="01_ヘッダー"] { padding:14px 16px; } [data-n^="ナビボタン / "] { display:none; } /* 注意バーは画面下部に固定する */ [data-n="02_注意バー"] { position:static; } /* 画面が縦に短い端末で固定すると、メインビジュアルのCTAボタンを覆い隠す （実測：320×568 と 375×550 でボタン全体が隠れていた）。 縦に余裕があるときだけ画面下部に固定する */ @media (min-height:640px) { [data-n="02_注意バー"] { position:fixed; left:0; right:0; bottom:0; z-index:100; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; padding:8px 16px; gap:6px; height:auto; background:var(--green); border-top:1px solid rgba(0,0,0,.15); } } [data-n="専用タグ"] { display:none; } [data-n="02_注意バー"] > [data-n^="当サイトは"] { flex:0 1 auto; font-size:11px; line-height:1.4; white-space:normal; } [data-n="求人ページはこちら"] { font-size:11px; } [data-n="リンク"] [data-n="矢印"] { width:11px; height:11px; } /* 固定バーのぶんだけ本文の下に余白を確保する。 バーの実高は 320px で78.6px／360〜390pxで63.2px／412px以上で58px */ body { padding-bottom:0; } @media (min-height:640px) { body { padding-bottom:72px; } } @media (min-height:640px) and (max-width:340px) { body { padding-bottom:88px; } } /* MV：写真を全面に敷き、その上にコピーを重ねる */ [data-n="03_メインビジュアル"] { /* 中身が絶対配置になるので、高さは min-height で持たせる （height は後段の「高さの解除」で auto に上書きされるため効かない） */ display:block; position:relative; height:auto; min-height:520px; padding:0; overflow:hidden; } [data-n="写真 / 左"] { display:block; position:absolute; inset:0; left:0; top:0; width:100%; height:100%; border-radius:0; } [data-n="写真 / 右"] { display:none; } /* 写真の上に暗い幕を敷き、白文字を読めるようにする */ [data-n="写真 / 左"]::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.62) 100%); } [data-n="MVコピー"] { position:absolute; left:0; right:0; bottom:0; z-index:2; width:100%; padding:0 20px 28px; box-sizing:border-box; align-items:flex-start; } [data-n="MVコピー"] [data-n^="チップ / "] { padding:6px 12px; } [data-n="MVコピー"] [data-n^="チップ / "] > * { font-size:12px; letter-spacing:0; } [data-n="繁忙期の人手不足に"], [data-n="人材を支援"], [data-n="します"] { font-size:28px; line-height:1.45; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45); } [data-n="MVコピー"] [data-n="補足枠"] > * { font-size:13px; line-height:1.75; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.45); } /* CTAボタンは .fig どおり MV に残す（写真の上なので白フチで浮かせる） */ [data-n="MVコピー"] [data-n="CTA枠"] { width:100%; padding-top:14px; } [data-n="MVコピー"] [data-n="CTAボタン"] { width:100%; } [data-n="マーカー強調"] > [data-n="矩形"] { display:none; } /* レイヤー名は「人材を支援」。以前ここが「人手を支援」になっていて、上の28px・白文字・影の 指定がまるごと外れ、SPでも56pxの緑文字のまま写真に重なっていた（2026-08-26 修正） */ [data-n="人材を支援"] { color:#fff; } /* 見出し。Figmaで「幅を文字に合わせる」になっている行は white-space:pre で 出力されるため、そのままだと折り返さずに切れる。ここで折り返しを許可する */ [data-n="見出し"] > [data-n="見出し文"] > * { font-size:24px; } [data-n="見出し"] > [data-n]:not([data-n^="チップ / "]):not([data-n="見出し文"]) { font-size:24px; line-height:1.5; white-space:normal; width:100%; } [data-n="見出し"], [data-n="見出し文"] { width:100%; flex-wrap:wrap; } [data-n="見出し"] > [data-n="見出し文"] > * { white-space:normal; } [data-n^="チップ / "] { padding:7px 16px; } /* 汗マークは見出しの一部。折り返して別行に落ちると意味が分からなくなるので、 見出しの箱を文字幅に合わせて、「？」のすぐ右・下端に付ける */ [data-n="06_お悩み訴求"] [data-n="見出し行"] { flex-wrap:nowrap; justify-content:center; align-items:flex-end; gap:6px; width:100%; } [data-n="06_お悩み訴求"] [data-n="見出し行"] > [data-n="見出し"] { width:auto; flex:0 1 auto; min-width:0; } [data-n="06_お悩み訴求"] [data-n="汗"] { flex:none; margin-bottom:.15em; } /* 13文字＋汗マークが1行に収まる大きさにする（折り返すと「？」が下段に落ちて 汗マークが「？」の右に付かなくなる） */ /* 上の一括指定（[data-n="見出し"] > …:not():not()）より詳細度を上げる必要がある。 13文字＋汗マークが1行に収まる大きさにする （折り返すと「？」が下段に落ちて、汗マークが「？」の右に付かなくなる） */ .root [data-n="06_お悩み訴求"] [data-n="見出し行"] > [data-n="見出し"] > [data-n="こんなお悩みありませんか？"] { font-size:clamp(15px, 5.05vw, 22px); white-space:nowrap; width:auto; line-height:1.5; } /* 横並びをすべて縦積みに */ [data-n="カード列"], [data-n="お悩みカード列"], [data-n="理由グリッド"] [data-n="行"], [data-n="FAQ本体"], [data-n="フッター本体"] { flex-direction:column; gap:16px; } [data-n="カード列"] > [data-n], [data-n="お悩みカード列"] > [data-n], [data-n="理由グリッド"] [data-n="行"] > [data-n] { width:100%; flex:none; } [data-n="FAQ見出し"] { width:100%; } [data-n="FAQリスト"] { width:100%; } [data-n="右（会社情報）"] { width:100%; padding:48px 20px 32px; } /* 住所は1行で組まれているため、狭い画面で切れる。折り返しを許す */ [data-n="会社情報"] > [data-n] { width:100%; white-space:normal; text-align:center; } /* 事例カードは写真を上に */ [data-n*="事例カード"] { flex-direction:column; gap:16px; } [data-n*="事例カード"] > [data-n^="画像 / "] { flex:none; width:100%; height:200px; } [data-n="事例本文"] { width:100%; flex:none; } [data-n="スペック"] { flex-wrap:wrap; width:100%; height:auto; } [data-n="スペック"] > [data-n^="項目 / "] { width:auto; flex:0 1 auto; min-width:0; } [data-n="課題"], [data-n="成果"] { align-items:flex-start; } /* CTA：2列のまま、文字とアイコンを縮めて収める */ [data-n="CTAボタン"] { flex-direction:row; gap:10px; width:100%; } [data-n^="ボタン / 問い合わせ"], [data-n^="ボタン / 資料請求"] { flex:1 1 0; width:auto; min-width:0; min-height:60px; height:auto; padding:10px 8px; gap:6px; } [data-n^="ボタン / 問い合わせ"] > [data-n="アイコン"], [data-n^="ボタン / 資料請求"] > [data-n="アイコン"] { width:20px; height:20px; } [data-n^="ボタン / 問い合わせ"] > [data-n="問い合わせ"], [data-n^="ボタン / 資料請求"] > [data-n="資料請求"] { font-size:13px; letter-spacing:0; } [data-n="リード枠"] { width:100%; } [data-n="リード枠"] > * { width:100%; font-size:16px; } /* 解決帯・写真帯 */ [data-n="06b_解決帯"] { padding:48px 20px 56px; } [data-n="06b_解決帯"] > [data-n^="YUIMEの"] { font-size:14px; } [data-n="06b_解決帯"] > [data-n^="人材獲得"] { font-size:20px; } [data-n^="装飾"] { display:none; } [data-n="06c_写真帯"] { height:120px; } /* 導入の流れ：STEPバッジを見出しの隣に */ [data-n="STEPリスト"] > [data-n*="STEP"] { width:100%; padding:18px 16px; gap:14px; align-items:flex-start; } /* 円を 104→56px に縮めるので、中の文字も一緒に縮めないと円からはみ出す */ [data-n="バッジ"] { width:56px; height:56px; flex:none; gap:0; } [data-n="バッジ"] > [data-n="STEP"] { font-size:9px; letter-spacing:.06em; line-height:1; } [data-n="バッジ"] > [data-n]:not([data-n="STEP"]) { font-size:20px; line-height:1.1; } [data-n="STEP本文"] { width:auto; flex:1 1 0; min-width:0; } [data-n="STEP本文"] > * { width:100%; } /* 背景の弧は消す */ [data-n="背景の弧"] { display:none; } /* 本文まわりの文字サイズ */ [data-n="中身"] > *, [data-n="事例本文"] > *, [data-n="STEP本文"] > * { font-size:14px; } [data-n="質問バー"] > [data-n]:first-child { font-size:15px; } [data-n="質問バー"] { padding:16px 18px; width:100%; } [data-n^="【既存サイトより転記】 FAQ"] { width:100%; } [data-n="回答（開いた状態）"] { width:100%; padding:18px 20px; } } /* ------------------------------------------------------------ 4. お問い合わせページ（contact.html） ラベル343px＋入力欄799px の2列。狭い画面ではラベルを上に積む。 ------------------------------------------------------------ */ @media (max-width:1024px) { [data-n="本文カラム"] > [data-n^="行 / "] { height:auto; } /* 最長ラベル（YUIMEを知ったきっかけ＋必須バッジ）が約240px。 220pxだと右揃えのため、あふれた分が左に飛び出す */ [data-n^="ラベル / "] { width:250px; flex:none; } [data-n^="入力欄 / "], [data-n="ラジオ"], [data-n="チェック行"], [data-n^="ボタン / 入力内容を確認する"] { flex:1 1 0; min-width:0; width:auto; } [data-n="同意チェック"], [data-n="送信ボタン行"] { justify-content:center; } } @media (max-width:768px) { [data-n="本文カラム"] > [data-n^="行 / "] { flex-direction:column; align-items:flex-start; gap:8px; height:auto; } [data-n^="ラベル / "] { width:100%; flex:none; justify-content:flex-start; text-align:left; height:auto; } [data-n^="入力欄 / "], [data-n="ラジオ"], [data-n="チェック行"], [data-n^="ボタン / 入力内容を確認する"] { width:100%; flex:none; } [data-n="ラジオ"] { flex-wrap:wrap; gap:12px; } /* 送信ボタンと同意チェックの行には、ラベル列を空けるための空き枠が入っている。 縦積みにするとこれと gap の分だけ右へ 20px はみ出すので、行ごと畳む */ [data-n="送信ボタン行"] > [data-n="空き"], [data-n="同意チェック"] > [data-n="空き"] { display:none; } [data-n="送信ボタン行"], [data-n="同意チェック"] { gap:0; } [data-n="リード文"] > * { font-size:13px; line-height:1.8; } [data-n="03_ページ見出し"] > [data-n="お問い合わせ"] { font-size:28px; } /* お問い合わせページには下部固定バーが無いので、本文の下余白は戻す */ body:has([data-n="04_フォーム"]) { padding-bottom:0; } } /* ------------------------------------------------------------ 5. 高さの解除（1024px以下で共通） 生成物は Figma の高さをそのまま px で持っている。縦積みにすると 中身が増えて枠から溢れ、次のセクションと重なる。 高さが意味を持つもの（写真・アイコン・バッジ）だけ残し、 それ以外は中身に合わせて伸びるようにする。 ※ :not() を改行でつなぐと「子孫」の意味になるので必ず1行で書く ------------------------------------------------------------ */ @media (max-width:1024px) { .root [data-n]:not([data-n^="画像 / "]):not([data-n="矩形"]):not([data-n^="アイコン"]):not([data-n="背景の弧"]):not([data-n="バッジ"]):not([data-n="チェック"]):not([data-n="矢印"]):not([data-n="三角"]):not([data-n="汗"]):not([data-n^="ロゴ透かし"]):not([data-n^="装飾"]):not([data-n="開閉"]):not([data-n="スクロールトップ"]):not([data-n^="番号バッジ"]):not([data-n="06c_写真帯"]):not([data-n="山形"]):not([data-n="丸"]):not([data-n="チェックボックス"]):not([data-n^="ボタン / "]):not([data-n^="ナビボタン / "]) { height:auto; } /* ラジオ・チェックボックスは大きさが見た目そのもの。縮ませない */ [data-n="丸"], [data-n="チェックボックス"] { flex:none; } /* 写真帯とセルは高さが見た目を決めるので残す */ [data-n="06c_写真帯"] { height:230px; } [data-n="06c_写真帯"] > [data-n^="画像 / "] { height:230px; } [data-n="見出し行"] > [data-n] { height:80px; } /* 入力欄は高さが見た目を決める */ [data-n^="入力欄 / "] { min-height:59px; } [data-n="入力欄 / お問い合わせ内容"] { min-height:180px; } [data-n^="ボタン / 入力内容を確認する"] { min-height:51px; } } @media (max-width:768px) { [data-n="06c_写真帯"], [data-n="06c_写真帯"] > [data-n^="画像 / "] { height:120px; } [data-n="見出し行"] > [data-n] { height:auto; } [data-n="06_お悩み訴求"] [data-n="汗"] { height:28px; width:32px; } } /* ------------------------------------------------------------ POINT 04 の写真差し替え（2026-08-25） .fig 側の photo5 は Shutterstock の透かし入りで使用禁止。 .fig を書き出し直すと透かし画像に戻るため、レイヤー名で上書きする。 .fig 側の写真を差し替えたら、このブロックは削除する。 ------------------------------------------------------------ */ [data-n="画像 / photo5"]{ background-image:url(../img/07-photo-1.jpg); background-size:cover; background-position:center; }