/* RAYUP トップページ「格式高い版」（検討用の別案・本番の public/ とは別物） * * 参考＝https://www.details.co.jp/ の実測（notes/20260823-kakushiki-sankou-site-bunseki.md）。 * 🚨 この版の設計方針は「足す」ではなく「引く」。実測で分かった4点だけを移植している： * ① 地を暗く（#1E1E1E） ② 文字を中間グレー（#A0A0A0）＝白抜きにしない * ③ 色は実質1色（差し色は数えるほどしか出さない） * ④ 動きは1種類だけ（下から80px上がりながら現れる）＋動かない背景 * 慣性スクロール・視差・1文字ずつの刻み・自作カーソルは参考サイトにも無い＝作らない。 * 🚨 本番の styles.css / home.css には触らない。ここだけで完結させる。 */ :root{ /* 地と文字。2026-08-25、参考サイト（recruit.coalition-group.jp／ notes/20260825-coalition-recruit-shikisai-bunseki.md）の実測に合わせて作り替えた。 旧版（details.co.jp実測ベース）より地を16ポイント明るくし、文字も明るくしている。 🎨 決めごとは変わらず：**金は「面」に使わない。文字と髪の毛のような線だけに使う。** 理由：伶さんが「ポップすぎる」と指摘した4つの原因のうち1つが 「黄色い丸pillのお問い合わせボタン（サイトで唯一の高彩度の面）」だった。 面に使った瞬間にそこへ戻る。だから面は最後まで無彩色のままにする。 */ --ground:#2E2C28; /* 旧 #1E1C19。参考サイトの地 rgb(46,46,43) をRAYUPのクリーム寄りに補正 */ --ground-deep:#24221F; /* 旧 #161412 */ --text:#C9C5BB; /* 旧 #A29D95。地とのコントラスト 8.09:1（計算・実測どおり） */ --text-dim:#9A958A; /* 旧 #706B63→#918C81。補助・キャプション。暗い地に対して4.67:1（2026-08-25、4.2:1から引き上げ） */ --text-hi:#DED8CC; /* 旧 #D8D2C6。見出し。コントラスト 9.82:1。白(#FFF)にはしない */ --line:rgba(201,197,187,0.16); /* 新しい --text の値に合わせて更新 */ /* カードの地。参考画面（Coalition の CONTENTS 節）の実測＝ページの地に白を51%、 カードの中の図の枠に白を25%乗せた関係。同じ比率を暗い地に当てはめた値。 🚨 半透明にしない＝後ろの線テクスチャが透けてカードの中が騒がしくなる。 */ --card:#3A3834; --card-well:#434039; /* カーソルを当てたときの地と影。 🚨 影は「薄くすると無いのと同じ」＝1度 spread -20px / 0.26 で作ったら画面上で全く見えず、 浮きが「色が変わっただけ」になった。**必ず実物で見て決める**（数値だけで決めない）。 */ --card-hi:#454340; --card-shadow:rgba(0,0,0,0.75); /* 🚨 明るい版は カード > 図の枠 の順に明るい（参考画面と同じ）が、暗い版だけ逆＝図の枠がカードより明るい。 暗い地で枠をカードより暗くすると節の地に溶けて「板」が見えなくなり、白い線画も沈むため。 既定は明るい版＝暗い版は比較用。ここを揃えにいくと暗い版の図が読めなくなる。 */ /* 差し色＝RAYUPのロゴのマークそのものの色（logo/rayup-logo-original.svg の .cls-1）。 🚨 「面」には一度も使わない（塗った瞬間、伶さんが「ポップすぎる」と言った 黄色いpillのボタンに戻る）。使うのは文字・細い線だけ。 */ --accent:#E8B023; /* 暗い地に対するコントラストは 7.08:1（新しい地に合わせて再計算・旧8.63:1から下がるが読める）。 明るい地の上では 1.15:1＝完全に読めない＝明るい節では下の --accent-on-light に切り替える。 */ /* ロゴのもう1色（朱）。いまはロゴの中でだけ出る（.hd-logo の白黒化をやめたため）。 */ --accent-2:#E84C22; /* 🎨 2026-08-25 追加：明るい節（#business・#strengths）用のトークン。 田中さん決定＝事業・強みの2節だけ明るい地にする（参考サイトは全高の約30%が明るい節）。 値は参考サイトの明るい節 rgb(200,198,190) をクリーム寄りに補正して算出。 */ --light-ground:#CAC6BA; /* 明るい節の地 */ --light-text:#2E2C28; /* 明るい節の本文・見出し＝旧--groundと同じ値。コントラスト 8.16:1 */ --light-text-dim:#57524A; /* 旧#5C574E。明るい節の補助・キャプション。コントラスト4.54:1（2026-08-25、4.2:1から引き上げ） */ --accent-on-light:#634706; /* 🚨 明るい節での金の唯一の置き換え。コントラスト 5.05:1。 #E8B023 をそのまま明るい地に置くと 1.15:1＝読めない。ラベル・連番・細線は必ずこちら */ --light-card:#E5E3DD; /* 明るい節のカードの地＝--light-ground に白51%（参考画面の実測 rgb(228,227,224) と同じ関係）。 この上でのコントラストは 本文#2E2C28=10.7:1／補助#57524A=6.04:1／金#634706=6.72:1＝節の地の上より上がる */ --light-card-well:#D7D4CB; /* カードの中の図の枠＝白25%（実測 rgb(214,212,207)）。明るさは 地 < 図の枠 < カード */ --light-card-hi:#EFEDE8; /* カーソルを当てたときのカードの地。この上でのコントラストは 本文#2E2C28=11.4:1／補助#57524A=6.46:1／金#634706=7.19:1 ＝ 通常時（10.7／6.04／6.72）より**全部上がる** */ --light-card-shadow:rgba(46,44,40,0.34); --texture-line:#484642; /* 暗い節の線テクスチャの線の色。地(--ground)より26ポイント明るいだけ （参考サイトの実測差と同じ＝rgb(78,79,73) 系 vs 地 rgb(46,46,43) 系）。濃くしない */ --font-en:'Cormorant Garamond','Times New Roman',serif; --font-jp:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif; --ease:cubic-bezier(0.16,1,0.3,1); --wrap:1120px; --pad-x:28px; --hd-h:71px; /* 参考サイトのヘッダー実測 71px */ } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:auto;} /* 🚨 慣性・スムーススクロールは付けない（参考サイトも auto） */ body{ margin:0; background:var(--ground); color:var(--text); font-family:var(--font-jp); font-size:15px; /* 参考サイト本文 15px */ line-height:2; /* 同 30px＝2.0倍 */ letter-spacing:0.05em; /* 同 0.75px */ -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block;border-radius:0;} a{color:inherit;} ul,ol,dl,dd{margin:0;padding:0;list-style:none;} h1,h2,h3,p,figure{margin:0;} .skip-link{position:absolute;left:-9999px;} .skip-link:focus{left:12px;top:12px;background:var(--ground);color:var(--text-hi);padding:10px 16px;z-index:200;} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x);} /* ───────── 開幕の幕（参考サイトは0.5秒未満で消える） ───────── */ .curtain{ position:fixed;inset:0;z-index:100; display:grid;place-items:center; background:var(--ground-deep); opacity:0;visibility:hidden; /* 🚨 素はこれ＝JSが落ちても幕が残らない */ transition:opacity .45s var(--ease),visibility 0s .45s; } .curtain.is-on{opacity:1;visibility:visible;transition:none;} .curtain-stage{display:grid;place-items:center;} /* 🎨 開幕の幕に出る「RAYUP」を金に。出ているのは最初の0.45秒だけ＝ ページの静けさには影響せず、最初の一瞬だけブランド色が立つ。 🚨 ロゴSVGが入ったときは消す（SVGの中に同じ「RAYUP」の文字が入っているため）。 逆に言うと、SVGが読めなかったときの控えでもある。 */ .curtain-mark{ font-family:var(--font-en);font-size:15px;letter-spacing:0.5em;text-indent:0.5em; color:var(--accent); } .curtain-stage.has-logo .curtain-mark{display:none;} /* ───────── 幕の中のロゴのなぞり（いまのRAYUPサイトの開幕と同じ考え方） ───────── * 仕組み：SVGの全pathに pathLength="1" を付けてある＝どの線も「長さ1」に揃う。 * stroke-dasharray:1 … 実線1・すき間1 ＝ 線全体がひと続きの実線1本になる * stroke-dashoffset:1 … まだ1本も引かれていない／0 … 引き終わった * dark.js が 1→0 へ動かす。4本を「1本のペン」が順に進むよう、実長で重みを付けている。 * 🚨 素の状態を dashoffset:1（引かれていない）にしてあるのは、JSが動く前の1フレームに * 線が光って見えるのを防ぐため。 */ .curtain-logo{width:108px;line-height:0;} .curtain-svg{display:block;width:100%;height:auto;} .curtain-svg .il-m{ fill:transparent; stroke:var(--accent);stroke-width:6; /* 表示は 108/480 倍＝画面上およそ 1.35px の細い線 */ stroke-linejoin:round;stroke-linecap:round; stroke-dasharray:1;stroke-dashoffset:1; transition:fill .5s var(--ease),stroke-opacity .5s var(--ease); } /* なぞり終わってから色が入る。🚨 これは幕の中の0.5秒だけ＝本文側の 「金は面に使わない」という決めごとは崩していない（幕は本文ではない）。 */ .curtain-logo.is-filled .il-m{stroke-opacity:0;} .curtain-logo.is-filled .il-y{fill:var(--accent);} .curtain-logo.is-filled .il-o{fill:var(--accent-2);} /* 文字「RAYUP」は線で描かず、なぞり終わってから出す（2026-08-14 田中さん指示・本番と同じ） */ .curtain-svg .il-w{fill:var(--text-hi);opacity:0;transition:opacity .6s var(--ease);} .curtain-logo.is-word .il-w{opacity:1;} /* ───────── 動かない地（参考サイトの固定動画にあたる） ───────── */ .bg-fixed{ position:fixed;inset:0;z-index:-2; background:var(--ground-deep); } .bg-fixed::before, .bg-slide{ content:"";position:absolute;inset:0; background-image:url('/assets/hero-bg-1920.webp'); background-size:cover;background-position:center; /* 🚨 参考サイトの映像は白黒。カラーのまま暗くしても「格式」にはならない＝彩度を落とす 🎨 そのうえで sepia を少しだけ掛け、暖かい黒の地から写真だけ浮かないようにした。 0 にすると青白い灰色になって地と喧嘩する。0.5 を超えると古写真に見える。 */ filter:grayscale(1) sepia(0.26) contrast(1.06) brightness(0.42); } .bg-slide{opacity:0;transition:opacity 2.4s linear;} .bg-slide.is-on{opacity:1;} .bg-slide-2{background-image:url('/assets/hero-bg2-1920.webp');} .bg-slide-3{background-image:url('/assets/hero-bg3-1920.webp');} /* 本文を読ませるための膜。ヒーローの下へ行くほど濃くする */ .bg-fixed::after{ content:"";position:absolute;inset:0; /* 🎨 膜の色も地（--ground #2E2C28）と同じ暖かい黒に揃える。ここだけ無彩色だと写真が灰色に濁る。 2026-08-25、地の明度変更（#1E1C19→#2E2C28）に合わせてこの膜の値も更新した */ background:linear-gradient(to bottom,rgba(46,44,40,0.40) 0%,rgba(46,44,40,0.62) 55%,rgba(46,44,40,0.94) 100%); } /* 粒状のノイズ。参考サイトの映像が持っていた質感を画像を足さずに作る */ .grain{ position:fixed;inset:-120px;z-index:-1;pointer-events:none; opacity:0.30;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); animation:grain 1.1s steps(4) infinite; } @keyframes grain{ 0%{transform:translate(0,0);}25%{transform:translate(-24px,14px);} 50%{transform:translate(18px,-20px);}75%{transform:translate(-14px,-10px);} 100%{transform:translate(0,0);} } /* ───────── 線テクスチャ（水平の細い線・自作） ───────── * 参考＝recruit.coalition-group.jp の実測（notes/20260825-coalition-recruit-shikisai-bunseki.md）。 * 参考サイトは動画だったが、ここでは動画を使わない（転送量・自動再生・スマホの電池）＝ * .grain と同じ作り方（data URI の自作SVG）で、水平線を長さと位置をばらつかせて敷く。 * 線の色は --texture-line（#484642）＝地（--ground）よりRGBで一律26ポイント明るいだけだが、 * 実機では写真の暗い部分の上で効きすぎて壊れた画面に見えたため、色はそのままに * SVG内の各rectの透け具合（0.3）を下げている（地との実効差は約26→約8ポイントに下がる）。 * 🚨 濃くしない＝縞模様に見えると安っぽくなる。タイルは400×400・線幅1px・行間4〜7pxでばらつかせている。 * * 上端・下端に高さ160pxの帯を重ね、地の色から透明へ縦にフェードさせる＝ * テクスチャの端をぼかして「ぬるっと現れて消える」ようにする。 * * 🚨 2026-08-25 修正：.fv::before に置くと .fv の max-width（--wrap）で切れて縦の継ぎ目が * 見えたため、.grain と同じ「画面に固定した1枚の層」（.lines・z-index:-1）に変更した。 * .bg-fixed（写真・z-index:-2）より手前・不透明な地を持つ通常要素より奥に来る＝ * #business・#strengths のような明るい節では自動的に隠れ、暗い節（.fv・#news・#contact） * でだけ見える形になる。幅の問題もこれで消える。 * 🚨 .grain と違い animation と mix-blend-mode は付けない（線は動かすとちらつく）。 */ .lines{ position:fixed;inset:0;z-index:-1;pointer-events:none; background-repeat:no-repeat,no-repeat,repeat; background-position:top left,bottom left,top left; background-size:100% 160px,100% 160px,400px 400px; background-image: linear-gradient(to bottom,var(--ground) 0%,rgba(46,44,40,0) 100%), linear-gradient(to top,var(--ground) 0%,rgba(46,44,40,0) 100%), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect x='134.3' y='2.0' width='74.2' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='-11.0' y='2.0' width='120.2' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='1.7' y='7.0' width='123.9' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='-20' y='11.4' width='351.9' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='196.5' y='17.4' width='208.6' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='97.0' y='21.6' width='230.7' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='325.6' y='27.2' width='138.3' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='146.1' y='27.2' width='73.4' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='40.5' y='32.3' width='396.0' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='41.9' y='36.5' width='127.0' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='98.9' y='42.0' width='244.3' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='135.3' y='46.1' width='61.6' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='155.2' y='51.4' width='275.2' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='98.4' y='55.6' width='255.9' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='319.3' y='59.9' width='80.5' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='30.0' y='65.2' width='392.3' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='-12.2' y='71.6' width='211.6' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='-13.3' y='76.0' width='83.7' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='81.8' y='80.7' width='121.7' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='23.5' y='86.6' width='60.1' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='-20' y='93.4' width='198.2' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='39.4' y='99.1' width='113.7' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='119.0' y='99.1' width='70.3' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='276.9' y='104.3' width='106.7' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='173.5' y='111.3' width='95.9' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='20.9' y='111.3' width='50.3' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='224.7' y='115.4' width='160.6' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='351.1' y='122.0' width='68.8' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='157.9' y='126.8' width='115.7' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='174.6' y='131.3' width='260.7' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='84.4' y='135.6' width='123.5' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='46.8' y='135.6' width='84.0' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='129.5' y='140.6' width='262.4' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='232.1' y='147.0' width='144.8' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='302.4' y='151.5' width='142.3' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='275.9' y='151.5' width='138.2' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='39.4' y='157.3' width='256.7' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='74.4' y='163.2' width='70.6' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='110.0' y='168.3' width='323.2' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='23.2' y='174.0' width='416.1' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='68.2' y='178.2' width='83.8' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='58.7' y='178.2' width='67.2' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='124.6' y='182.3' width='297.1' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='241.2' y='187.0' width='97.5' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='13.9' y='187.0' width='136.0' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='18.1' y='193.0' width='405.7' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='2.6' y='198.3' width='241.7' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='300.3' y='203.2' width='79.9' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='138.3' y='203.2' width='156.6' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='3.6' y='209.0' width='419.8' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='16.2' y='214.3' width='108.3' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='38.5' y='219.2' width='136.8' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='372.1' y='219.2' width='139.2' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='117.4' y='225.6' width='193.2' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='362.5' y='231.7' width='65.4' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='165.3' y='236.4' width='260.1' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='33.3' y='242.2' width='391.3' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='55.0' y='247.7' width='155.7' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='11.1' y='254.4' width='282.8' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='296.9' y='260.6' width='109.8' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='103.4' y='265.4' width='234.1' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='347.1' y='272.4' width='90.5' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='192.7' y='272.4' width='100.2' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='141.7' y='276.7' width='67.1' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='294.5' y='282.0' width='61.5' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='134.1' y='288.2' width='239.9' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='113.5' y='292.7' width='183.9' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='-20' y='298.2' width='358.0' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='50.2' y='302.3' width='154.4' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='87.6' y='308.3' width='252.9' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='-7.5' y='314.6' width='406.7' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='76.7' y='320.3' width='252.1' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='92.3' y='326.9' width='231.9' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='3.5' y='331.9' width='417.8' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='83.8' y='338.0' width='153.1' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='357.3' y='338.0' width='107.1' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='28.6' y='343.7' width='56.5' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='9.0' y='343.7' width='93.1' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='222.6' y='349.5' width='87.8' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='41.8' y='354.8' width='147.6' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='244.1' y='354.8' width='125.9' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='41.8' y='361.4' width='395.5' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='-16.9' y='368.2' width='422.0' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='-3.5' y='373.6' width='436.2' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='92.0' y='379.6' width='224.0' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='70.1' y='383.8' width='134.4' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='188.6' y='389.9' width='67.4' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3Crect x='97.0' y='395.8' width='66.9' height='1' fill='%23484642' fill-opacity='0.3'/%3E%3C/svg%3E"); } /* ───────── ヘッダー（固定・常に透明＝スクロールしても白帯にしない） ───────── */ .hd{ position:fixed;top:0;left:0;right:0;height:var(--hd-h);z-index:50; display:flex;align-items:center;justify-content:space-between; padding:0 var(--pad-x);background:transparent; } .hd-logo{display:flex;align-items:center;gap:10px;text-decoration:none;} /* 🎨 白黒化をやめた。ここがページ上で唯一「RAYUPのロゴの色そのもの」が出る場所。 金 #E8B023 と朱 #E84C22 が22pxの中にだけ入る＝面積が小さいので静けさは壊れない。 */ .hd-logo img{width:22px;height:auto;opacity:0.92;} .hd-logo span{ font-family:var(--font-en);font-size:16px;letter-spacing:0.05em;color:var(--text-hi); } .hd-nav ul{display:flex;gap:34px;} .hd-nav a{ font-family:var(--font-en); font-size:14px; /* 参考サイト実測 14px */ letter-spacing:0.2em; /* 同 2.8px＝0.2em */ color:var(--text);text-decoration:none; transition:color .4s var(--ease); } .hd-nav a:hover{color:var(--accent);} /* 🎨 触ったときだけ金。静止画では出ない */ /* 2026-08-26 追加：開閉ボタン（ハンバーガー）。901px以上では出さない （下の @media (max-width:900px) だけで display:flex にする）。 面は塗らず、3本の線は --text-hi の色だけ＝金は使わない（決めごとどおり）。 */ .hd-burger{ display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px; width:40px;height:40px;padding:0;margin:0;background:transparent;border:0;cursor:pointer; } .hd-burger-bar{ display:block;width:22px;height:2px;background:var(--text-hi); transition:transform .35s var(--ease),opacity .35s var(--ease); } html.nav-open .hd-burger-bar:nth-child(1){transform:translateY(8px) rotate(45deg);} html.nav-open .hd-burger-bar:nth-child(2){opacity:0;} html.nav-open .hd-burger-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);} /* 🚨 2026-08-25 追加：ヘッダーは position:fixed で常に画面上に居るが、色は暗い地基準 （--text／--text-hi）のまま。#business・#strengths のような明るい地（#CAC6BA）が ヘッダーの下に来ると、コントラストが1.0〜1.2:1しか無く文字がほぼ消える（実機で確認済み）。 dark.js が、ヘッダーの高さ位置に明るい節が掛かっている間だけ #hd に .on-light を付け外しする。 🚨 ロゴの画像（.hd-logo img）はここで色を変えない＝RAYUPのロゴそのものの色。 */ .hd.on-light .hd-logo span{color:var(--light-text);} .hd.on-light .hd-nav a{color:#3F3B35;} .hd.on-light .hd-nav a:hover{color:var(--accent-on-light);} .hd.on-light .hd-burger-bar{background:#3F3B35;} /* ───────── ヒーロー ───────── */ .fv{ min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding:calc(var(--hd-h) + 40px) var(--pad-x) 96px; max-width:var(--wrap);margin:0 auto;width:100%;position:relative; } .fv-en{ font-family:var(--font-en); font-size:clamp(46px,5.8vw,84px); /* 参考サイトの最大文字 83.1px に合わせる */ line-height:1.02;letter-spacing:0.01em; /* 🚨 白抜きにしない。ここは「窓」の土台の色＝本文と同じ中間グレー。 2026-08-24、田中さんの選択でこの2語だけ「文字の中に写真が透ける」に変えた （下の「1画面目の巨大英文＝窓」の節）。写真が出せない環境ではこの灰色が残る。 */ color:var(--text); margin-bottom:38px; } .fv-h1{ font-size:clamp(19px,1.95vw,28px);font-weight:400;line-height:2.1; letter-spacing:0.09em;color:var(--text-hi); } .fv-sub{ margin-top:12px;font-size:clamp(14px,1.15vw,17px);line-height:2.1; letter-spacing:0.09em;color:var(--text-dim); } .fv-fields{display:flex;gap:56px;margin-top:56px;flex-wrap:wrap;} .fv-fields li{display:flex;align-items:baseline;gap:14px;} .fv-fields .no{font-family:var(--font-en);font-size:13px;letter-spacing:0.18em;color:var(--accent);} /* 差し色① */ .fv-fields .en{font-family:var(--font-en);font-size:19px;letter-spacing:0.1em;color:var(--text-hi);} .fv-fields .jp{font-size:12px;letter-spacing:0.14em;color:var(--text-dim);} /* 🎨 1画面目の「Scroll」を金に（11px・1箇所） */ .fv-scroll{ position:absolute;left:var(--pad-x);bottom:34px; font-family:var(--font-en);font-size:11px;letter-spacing:0.28em;color:var(--accent); } /* ───────── 節の共通 ───────── */ .sec{padding:clamp(110px,14vw,190px) 0;position:relative;} /* 🎨 節のラベル（( Business ) 等・4箇所）を金に。 既存サイトの決めごと「黄はラベル／連番／進行バーだけ」と同じ使い方（DESIGN.md §5-2）。 */ .lb{ font-family:var(--font-en);font-size:12px;letter-spacing:0.24em; color:var(--accent);margin-bottom:18px; } .hd-en{ font-family:var(--font-en);font-weight:400; font-size:clamp(38px,4.6vw,66px);line-height:1.1;letter-spacing:0.01em; color:var(--text-hi); position:relative;padding-bottom:24px; } /* 🎨 見出しの下の線（4節＝4本）。2026-08-23 田中さん「もう少し入れて」で強め、 2026-08-24「左右に動くようにできない？」で**金が線の上を往復する**形にした。 線は2枚重ね： ①下＝無彩色の髪の毛線（全幅・ずっと同じ）＝線そのものは消えない ②上＝金の光の塊（線の42%幅）＝これが左右にゆっくり往復する 🚨 金は「線」のまま＝面にしない。②は両端が透明に溶けるので、帯には見えない。 */ .hd-en::after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:2px; background: linear-gradient(to right, rgba(232,176,35,0) 0%, rgba(232,176,35,0.32) 20%, var(--accent) 50%, rgba(232,176,35,0.32) 80%, rgba(232,176,35,0) 100%), linear-gradient(to right, rgba(162,157,149,0.26) 0%, rgba(162,157,149,0.16) 52%, rgba(162,157,149,0.05) 100%); background-size:42% 100%,100% 100%; background-repeat:no-repeat; background-position:0% 0,0 0; /* 止まっているときは左端＝これまでと同じ見え方 */ } /* 光が左の外から入ってきて、右の外へ抜ける。抜けたらまた左から入る（一方通行・9秒でひと巡り）。 2026-08-24 田中さん「左から右に行った後は再度左から流れてくるように」で往復をやめた。 🚨 位置の%は「線の幅」ではなく「線の幅 − 光の幅」に対する割合。光は線の42%幅なので 残りは58%。完全に左の外＝-42/58＝-72.42%、完全に右の外＝100/58＝172.42%。 この外まで動かすので、端で光がぶつっと消えたり瞬間移動したりしない。 🚨 速くしない。速い光の流れは「読み込み中のバー」に見えて、格式が下がる。 */ @keyframes hd-sweep{ from{background-position:-72.42% 0,0 0;} to{background-position:172.42% 0,0 0;} } .lead{ margin-top:44px;font-size:clamp(15px,1.35vw,19px);line-height:2.3; letter-spacing:0.08em;color:var(--text); } /* 枠線だけのボタン（参考サイトは面なし・角丸0・枠グレー） 🎨 枠と文字を常時金にした。🚨 background は transparent のまま動かさない＝ ここを塗った瞬間、伶さんが「ポップすぎる」と言った黄色いpillに戻る。 */ .btn{ display:inline-block;margin-top:34px; padding:15px 34px;border:1px solid rgba(232,176,35,0.42);border-radius:0; background:transparent;text-decoration:none; font-family:var(--font-en);font-size:12px;letter-spacing:0.2em;color:var(--accent); transition:border-color .5s var(--ease),color .5s var(--ease); } .btn:hover{border-color:var(--accent);color:#F0C34E;} /* 🎨 触ると枠がはっきりする。面は透明のまま */ /* ───────── 事業 ───────── */ .biz{margin-top:clamp(72px,9vw,128px);} .biz-fig{ /* 参考サイトの写真は 2:1 か 1:1・角丸0・object-fit:cover */ aspect-ratio:2/1;overflow:hidden; } .biz-fig img{ width:100%;height:100%;object-fit:cover; filter:grayscale(1) sepia(0.18) contrast(1.04) brightness(0.86); /* 🎨 事業写真は弱め */ } .biz-txt{margin-top:36px;max-width:640px;} .biz-no{font-family:var(--font-en);font-size:12px;letter-spacing:0.22em;color:var(--accent);} /* 差し色② */ .biz-en{ font-family:var(--font-en);font-weight:400; font-size:clamp(30px,3.4vw,48px);line-height:1.15;color:var(--text-hi);margin-top:6px; } .biz-jp{font-size:13px;letter-spacing:0.16em;color:var(--text-dim);margin-top:8px;} .biz-desc{margin-top:24px;line-height:2.2;letter-spacing:0.07em;} /* ───────── 強み＝3枚のカードを横に並べる ───────── * 2026-08-26 田中さん指示（参考画面＝Coalition 採用サイトの CONTENTS 節）。 * 縦に長く積んでいた3項目を、正方形の図つきのカード3枚にして横に並べた。 * 🚨 田中さんの選択＝「全部入れる」＝説明文・実績表4行・連番をカードの外に出さない。 * 情報を1つも落とさないため、カードの中は狭い。だから実績表は dt を上・dd を下の縦積みにしてある。 * * 寸法・色は参考画面の画素実測から出した比率（先方の画像・書体は1つも持ち帰っていない）： * カードの地 ＝ 節の地に白51%（実測 rgb(200,198,191) → rgb(228,227,224)） * 図の枠 ＝ 節の地に白25%（実測 rgb(214,212,207)） * カードの内余白・カード同士の間 ＝ どちらも16px（実測32px／2倍表示） * 図は正方形＝カードの幅から左右の内余白を引いた幅いっぱい */ .st{margin-top:clamp(48px,5vw,72px);} .st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;} .stc{display:flex;} /* grid の升目・出現演出（.rv）の担当。**背景と余白は持たない** */ /* 🚨 カードの中身を .stc-in で1枚包んである理由＝出現演出（.rv の translateY）と カーソルの浮き（translateY）が同じ要素の transform を奪い合うため。 同じ要素に両方を書くと、出現の1.2秒とカーソルの0.5秒が混ざって戻りが鈍る。 **この入れ子を外さない**（外すと index.html 側もセットで壊れる）。 */ .stc-in{ display:flex;flex-direction:column;width:100%; background:var(--card);padding:16px 16px 20px; /* 🚨 color を**明示的に**持たせてある。書かないと .st-desc・dd は節の color をそのまま受け継ぐため、 下の :hover で --text を差し替えても字の色が変わらない（継承するのは変数ではなく計算後の色）。 値は節と同じなので通常時の見た目は変わらない。 */ color:var(--text); transition:transform 0.5s var(--ease),box-shadow 0.5s var(--ease), background-color 0.9s var(--ease),color 0.9s var(--ease); } /* 継承で色が決まる字は、その要素自身に transition が無いと一瞬で切り替わる（親の transition は伝わらない） */ .stc-in .st-title,.stc-in .st-desc,.stc-in .st-facts dt,.stc-in .st-facts dd, .stc-in .st-more,.stc-in .st-no{transition:color 0.9s var(--ease);} .stc-in .st-facts dt{transition:color 0.9s var(--ease),border-top-color 0.9s var(--ease);} /* ───────── カーソルを当てたときの反転 ───────── * 2026-08-26 田中さん指示（参考画面＝Coalition 採用サイトの CONTENTS 節）。 * カーソルを当てた1枚だけ**地と字が入れ替わる**（明るい節では黒地に白字・暗い節ではその逆）。 * 🚨 図の枠（--card-well）は変えない＝参考画面と同じで、地だけが裏返り図はそのまま残る。 * 🚨 色は 0.9秒かけて変える（田中さん「ゆっくり」）。持ち上げ 0.5秒より遅い＝先に浮いて後から色が追う。 * 🚨 変数をまとめて差し替える方式にしてあるので、**トークンの値を直すとカーソル時も自動で追従する**。 * 個々の色を直書きしないこと。 */ @media (hover:hover){ .stc-in:hover{ transform:translateY(-10px); background:var(--card-hi); /* 2枚重ね＝遠い影（浮いた高さ）と近い影（接している縁）。1枚だとぼやけて浮きに見えない */ box-shadow:0 16px 30px -14px var(--card-shadow),0 3px 8px -6px var(--card-shadow); } /* 明るい節＝カード1枚だけが暗くなる。地の上でのコントラストは 見出し#DED8CC=9.82:1／本文#C9C5BB=8.09:1／補助#9A958A=4.67:1／金#E8B023=7.08:1（暗い節の実績値と同じ） */ :root[data-sec="light"] #strengths .stc-in:hover{ --card-hi:#2E2C28; --text:#C9C5BB; --text-hi:#DED8CC; --text-dim:#9A958A; --accent:#E8B023; --line:rgba(201,197,187,0.16); } /* 暗い節＝逆にカード1枚だけが明るくなる。地の上でのコントラストは 字#2E2C28=10.7:1／補助#57524A=6.04:1／金#634706=6.72:1 🚨 金は #E8B023 のままにすると明るい地の上で 1.15:1＝読めない。必ず #634706 に落とす。 */ :root[data-sec="dark"] #strengths .stc-in:hover{ --card-hi:#E5E3DD; --text:#2E2C28; --text-hi:#2E2C28; --text-dim:#57524A; --accent:#634706; --line:rgba(46,44,40,0.16); } } /* 🚨 暗い版だけ、カードの中の補助の字を明るくする。 カードの地(#3A3834)は節の地(#2E2C28)より明るいため、節向けに作った --text-dim(#9A958A) では カードの上で 4.08:1 まで落ちる。さらにカーソル時は地が #454340 まで明るくなる。 #B5B0A4 なら 通常 5.41:1／カーソル時 4.56:1 で、どちらも 4.5:1 を割らない。 **この値を暗くするとカーソル時だけ読みにくくなる**（通常時の見た目では気づけない）。 */ :root[data-sec="dark"] .stc-in{--text-dim:#B5B0A4;} .stc-fig{margin:0;background:var(--card-well);line-height:0;} .stc-fig img{display:block;width:100%;height:auto;} /* 図は黒い線で描いてある（明るい節が既定）。暗い節に切り替えたときだけ明暗を反転させる。 */ :root[data-sec="dark"] .stc-fig img{filter:invert(1);} .st-title{margin-top:18px;font-size:clamp(17px,1.5vw,21px);font-weight:400;letter-spacing:0.10em;color:var(--text-hi);line-height:1.85;} /* ───────── カード1枚まるごとを押せるようにする（2026-08-27 田中さん指示） ───────── * 「Strengthsの三つを押したらその詳細セクションに飛ぶように」＝01→/works/・02→/members/・03→/export/。 * 🚨 リンクは見出しの字だけに置き、透明な板（::after）をカードいっぱいに広げて当たり判定にする。 * カード全体を で包む書き方にしないのは、中に
（定義リスト）があり、 * 包むと読み上げが「リンクの中の表」になって項目名と中身の対応が伝わりにくくなるため。 * 🚨 板を広げる基準はカードの中身 .stc-in（浮き上がり transform を持つ側）。 * こちらに position:relative を書かないと、板が画面全体に広がる。 * 🚨 押せる合図は既にある「カーソルで浮いて地と字が反転する」演出がそのまま担う＝ * 見た目は1pxも足していない（田中さんの指示は飛び先だけ）。 */ .stc-in{position:relative;} .st-a{color:inherit;text-decoration:none;} .st-a::after{content:"";position:absolute;inset:0;z-index:1;} /* 🚨 z-index:1 が要る。実績の表は出現演出のために `.st-facts dt` が position:relative、 中の が transform を持っており、どちらも「重ね順の上」に上がる。 さらに表は見出しより後ろのDOMなので、板（::after）を素で置くと**表の部分だけ押せない**。 2026-08-27 の実測で、図・説明文・連番は当たるのに表の中央だけ当たらないことを確認して足した。 カードの中に他のリンクは無いので、板が全面を覆って困るものは無い。 */ /* キーボードで辿る人向け。カードの外周に金の枠を出す（マウス操作では出ない） */ .st-a:focus-visible{outline:none;} .st-a:focus-visible::after{outline:2px solid var(--accent);outline-offset:3px;} .st-desc{margin-top:12px;font-size:13px;line-height:2.0;letter-spacing:0.05em;} .st-facts{margin-top:20px;font-size:12px;line-height:1.9;} .st-facts dt{color:var(--text-dim);letter-spacing:0.12em;padding:8px 0 0;border-top:1px solid var(--line);} .st-facts dd{margin:0;padding:0 0 8px;letter-spacing:0.03em;} .st-more{margin-top:12px;font-size:11px;color:var(--text-dim);line-height:1.9;} /* 連番はカードの下端でそろえる。01のカードだけ「ほか、…」の一文があり高さが違うため、 margin-top:auto で余りを上に寄せる＝3枚の番号が同じ高さに並ぶ。 */ .st-no{margin-top:auto;padding-top:18px;font-family:var(--font-en);font-size:13px;letter-spacing:0.22em;color:var(--accent);line-height:1;} /* 🎨 連番＝既存サイトの決めごとと同じ使い方 */ .st-note{margin-top:26px;font-size:12px;color:var(--text-dim);line-height:2;} /* ───────── 横に流れる帯（STRENGTHS ✳ …） ───────── * 参考画面では節の見出しの下に同じ語が横へ流れる帯がある。田中さんの選択＝「入れる」。 * 🚨 中身は .mq-set を2つ並べてあり、-50% 動かして先頭に戻る＝継ぎ目が出ない。 * 片方だけ中身を変えると継ぎ目でガタつく。index.html 側とセットで直すこと。 */ .mq{margin-top:clamp(34px,4vw,54px);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;} .mq-in{display:flex;width:max-content;animation:mq-run 46s linear infinite;} .mq-set{ display:flex;align-items:center;flex:none; font-family:var(--font-en);font-size:clamp(15px,1.4vw,19px);letter-spacing:0.26em; color:var(--text-dim);white-space:nowrap; } .mq-st{flex:none;width:13px;height:13px;margin:0 22px 0 24px;opacity:0.55;} :root[data-sec="dark"] .mq-st{filter:invert(1);} @keyframes mq-run{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}} /* ───────── 明るい節（事業・強み） ───────── * 2026-08-25 田中さん決定＝#business と #strengths の2節だけ明るい地にする * （参考サイトは全高の約30%が明るい節・notes/20260825-coalition-recruit-shikisai-bunseki.md）。 * .fv・#news・#contact は暗い地のまま＝ここでは触らない。 * * 仕組み＝この2節の中だけ --text/--text-hi/--text-dim/--accent/--line を * 明るい節用の値に**上書き**する。CSSカスタムプロパティは子孫へ継承するので、 * .lb・.hd-en・.lead・.biz-*・.st-* など、これらの変数を参照している要素は * 自動的に切り替わる＝セレクタを1つずつ書き直す必要がない（塗り残しを防ぐ狙い）。 * 🚨 ただし『変数を参照していない』ハードコードの色（下の3つ）だけは自動で切り替わらないため、 * 個別に上書きしている：① .hd-en::after の金の帯（rgba(232,176,35,...) 直書き） * ② .btn の枠線（rgba(232,176,35,0.42) 直書き）③ .btn:hover の文字色（#F0C34E 直書き）。 * 🚨 不透明な地を必ず自分で敷く（body直下の .bg-fixed が固定の写真層のため、 * 地が透明だと写真が透けてしまう）。 */ /* 2026-08-26（朝）：既定は「明るい節」に戻した。田中さん指示＝ * 「全部同じ色合いになってしまった。前と同じようにこの色で同じアニメーションにしてみて」 * ＝この2節だけベージュ地に戻し、流れる線の動きはそのまま残す。 * 🚨 既定値は index.html の が持つ（JSより先に色を決めるため）。 * 比較用の暗い版は ?sec=dark で見られる。 * 入れ物としての position/overflow だけは両方の版で必要なので下の行に外出ししてある。 */ #business,#strengths{position:relative;overflow:hidden;background:var(--ground);} :root[data-sec="light"] #business,:root[data-sec="light"] #strengths{ --text:var(--light-text); --text-hi:var(--light-text); /* 明るい節は本文・見出しとも同じ値（参考サイトも二段階のみ） */ --text-dim:var(--light-text-dim); --accent:var(--accent-on-light); /* 🚨 ここを忘れると金のラベル・連番・細線が読めなくなる */ --line:rgba(46,44,40,0.16); /* --lineと同じ組み方（本文色×16%）を明るい節用に作り直した値 */ --card:var(--light-card); --card-well:var(--light-card-well); --card-hi:var(--light-card-hi); --card-shadow:var(--light-card-shadow); background:var(--light-ground); color:var(--light-text); /* 2026-08-25 追加：下の「明るい節の背景演出（比較用）」の層をこの節の中に閉じ込める。 🚨 overflow:hidden を足す前に、この2節の中に position:sticky / position:fixed / background-attachment:fixed を使う要素が無いことを確認済み（grepの結果は報告のとおり）。 */ } /* 節の中身（見出し・本文・写真・カード）を演出の層より前面に出す。 直下の子（.wrap／article.biz.wrap／div.wrap.st）だけに当てれば、その中の要素は 通常の重なり順のままそれより上に描かれる＝既存の入れ子を書き換えずに済む形にした。 */ /* 🚨 :not(.bgtex) が要る。#business>* は ID を含むので .bgtex（クラスだけ）より強く、 除外しないと背景テクスチャの層が position:relative に上書きされて高さ0になり、丸ごと消える。 */ #business>*:not(.bgtex),#strengths>*:not(.bgtex){position:relative;z-index:1;} /* ① 見出し下の金の帯（.hd-en::after は rgba(232,176,35,...) を直書きしているため var(--accent) の上書きだけでは切り替わらない＝丸ごと再定義。線の位置・アニメーションは dark.css 上部の @keyframes hd-sweep をそのまま使う（背景の位置だけを動かす仕組みのため） */ :root[data-sec="light"] #business .hd-en::after,:root[data-sec="light"] #strengths .hd-en::after{ background-image: linear-gradient(to right, rgba(99,71,6,0) 0%, rgba(99,71,6,0.32) 20%, var(--accent) 50%, rgba(99,71,6,0.32) 80%, rgba(99,71,6,0) 100%), linear-gradient(to right, rgba(46,44,40,0.26) 0%, rgba(46,44,40,0.16) 52%, rgba(46,44,40,0.05) 100%); } /* ② ③ ボタンの枠線・hover文字色も直書きのため個別に上書き（#business内のみ＝Consulting/Exportの 「More Details」。#news・#contact のボタンは暗い節のまま＝対象外） */ :root[data-sec="light"] #business .btn{border-color:rgba(99,71,6,0.42);} :root[data-sec="light"] #business .btn:hover{color:#4A3505;} /* 🎨 hoverは--accent-on-lightより濃い金＝白地でも締まる */ /* ───────── 暗い節 ⇄ 明るい節 の継ぎ目（縞の帯） ───────── * 2026-08-25 追加。参考サイト（recruit.coalition-group.jp）の継ぎ目を実測し「寸法だけ」持ち帰った。 * 実測：幅1997pxの画面で 帯210px／ピッチ16.5px／縞の太さ6→12px／濃さ5%→100%／14本。 * ピッチ÷画面幅は参考画像2枚で 0.826% と 0.839% ＝ほぼ一致したため幅1440に正規化し、 * 帯150px・ピッチ11.5px・13本にした。下のSVGはこの数値から自前で生成（相手の素材は不使用）。 * * 🚨 縞は「暗い地に濃い色を乗せる」のではなく「明るい地(--light-ground)を少しずつ増やす」形にしてある。 * 暗い側は .bg-fixed の写真が透けているため、濃い色を直に塗ると写真とズレて横一直線の段差が出る。 * 隙間を透明にして写真をそのまま見せることで、どのスクロール位置でも継ぎ目が出ない。 * 🚨 2026-08-25 夜に2回作り直している。1回目は「縞の太さを最大でもピッチの76%まで」にしたため、 * 明るい節と接する端に 2.8px の暗い隙間が残り、実物では**ベージュの面に黒い線が食い込んだ * 「壊れた画面」**に見えた（数値検証は全項目通っていた＝実物を見るまで出ない）。 * 今の形＝**明るい側の端で太さ＝ピッチ（隙間ゼロのべた塗り）**まで太らせて面と溶かし、 * 細い側は濃さを 0.18 まで落として写真の上で硬い線にならないようにしてある。 * 太さ th = ピッチ×t、濃さ = min(1, 0.18+1.15t)（t=0が暗い側・t=1が明るい側）。 * 🚨 端を「隙間ゼロ」にしないと必ず同じ壊れ方に戻る。 * 🚨 さらに縞の下に暗幕を1枚敷いてある（linear-gradient）。参考サイトの暗い側は**平らな暗色**だが * RAYUPは**写真が透けている**ため、縞と写真のディテールが交互になって画像が切り刻まれて見える。 * 明るい側に近づくほど写真を消すことで、縞が平らな地の上に乗る（＝参考サイトと同じ条件になる）。 * 🚨 .seam-out は .seam-in と同じSVGを上下反転して使う（transform:scaleY(-1)）＝入口と出口で * 縞の粗さがずれない。SVGを2つ持たせないこと。 * 🚨 高さを変えても dark.js 側は比率(SEAM_MID)で見ているため追従する。クラス名を変えたときだけ * dark.js の headOnLight() を直すこと（直さなくてもエラーは出ず、明るい節でヘッダーが消える）。 */ /* 継ぎ目。既定（暗い節）＝参考サイトと同じ160pxのフェード帯1枚だけ（分析メモ §3）。 * 縞の帯は「暗い地→明るい地」を繋ぐために作ったものなので、明るい節を使うとき（?sec=light）だけ出す。 */ .seam{ height:clamp(72px,10.4vw,150px); background-image:linear-gradient(to bottom,rgba(46,44,40,0) 0%,rgba(46,44,40,0.55) 55%,var(--ground) 100%); background-repeat:no-repeat; background-size:100% 100%; pointer-events:none; } :root[data-sec="light"] .seam{ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='150' preserveAspectRatio='none'%3E%3Crect x='0' y='22.12' width='100' height='0.96' fill='%23CAC6BA' fill-opacity='0.276'/%3E%3Crect x='0' y='32.69' width='100' height='1.92' fill='%23CAC6BA' fill-opacity='0.372'/%3E%3Crect x='0' y='43.27' width='100' height='2.88' fill='%23CAC6BA' fill-opacity='0.467'/%3E%3Crect x='0' y='53.85' width='100' height='3.85' fill='%23CAC6BA' fill-opacity='0.563'/%3E%3Crect x='0' y='64.42' width='100' height='4.81' fill='%23CAC6BA' fill-opacity='0.659'/%3E%3Crect x='0' y='75.00' width='100' height='5.77' fill='%23CAC6BA' fill-opacity='0.755'/%3E%3Crect x='0' y='85.58' width='100' height='6.73' fill='%23CAC6BA' fill-opacity='0.851'/%3E%3Crect x='0' y='96.15' width='100' height='7.69' fill='%23CAC6BA' fill-opacity='0.947'/%3E%3Crect x='0' y='106.73' width='100' height='8.65' fill='%23CAC6BA' fill-opacity='1.000'/%3E%3Crect x='0' y='117.31' width='100' height='9.62' fill='%23CAC6BA' fill-opacity='1.000'/%3E%3Crect x='0' y='127.88' width='100' height='10.58' fill='%23CAC6BA' fill-opacity='1.000'/%3E%3Crect x='0' y='138.46' width='100' height='11.54' fill='%23CAC6BA' fill-opacity='1.000'/%3E%3C/svg%3E"), linear-gradient(to bottom, rgba(46,44,40,0) 0%, rgba(46,44,40,0.55) 48%, var(--ground) 100%); background-repeat:no-repeat,no-repeat; background-size:100% 100%,100% 100%; } .seam-out{transform:scaleY(-1);} /* ───────── 暗い節の「流れる横線」テクスチャ（.bgtex） ───────── * 2026-08-26 田中さん「ダサすぎる。ここの色合いやアニメーションを真似て」＝ * 参考サイト recruit.coalition-group.jp のヒーローを画面写真から実測して作り直した。 * * 実測（screenshot 2553px＝表示2000px相当・css px に換算） * 地 rgb(46,46,41) ≒ #2E2E29 ＝ RAYUPの --ground(#2E2C28) とほぼ同じ * 線 rgb(69,69,65) ＝ 地の上に **白(#C9C5BB)を約15%** 乗せた値（α=0.148〜0.164） * → 分析メモ §4「新しい色で塗らず白を5%/15%乗せる」と完全に一致 * ピッチ 8.6〜16.5px ／ 太さ 1〜4px ／ 線ごとに濃さも長さも違う * 中央（画面幅の約30%）は線が0本＝空いている（左右の端ほど密） * * 🚨 **1回目の実装はこれを取り違えて「明るいベージュ地に暗い線」で作り、田中さんに却下された。** * 地と線の明暗が逆＝紙の汚れに見える。線は必ず「暗い地に白を薄く乗せる」側。 * * 構造＝入れ物 .bgtex（節と同じ大きさ・止まっている）＋ 中の 2枚（横に広く・動く）。 * 🚨 マスクを動く層に直接かけてはいけない。transform はマスクごと動かすため、 * 「中央が空いている」帯がテクスチャと一緒に横に流れてしまう。 * 止まっている入れ物側にマスクを置くことでだけ、中央の空きが画面に固定される。 * 🚨 動かすのは transform だけ（background-position は毎フレーム描き直し＝電池を食う）。 * 🚨 の左右のはみ出し（inset の -1400px）を詰めない。詰めると流れ切った瞬間に * タイルの端が見えて縦の切れ目が出る。 */ .bgtex{ position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; /* 中央を薄くして本文の可読性を守る。 🚨 谷の平らな部分（11%〜89%）は**本文の列そのもの**（.wrap＝幅1120px＝1440幅で 160〜1280px＝11.1%〜88.9%）。 ここを1ポイントでも狭めると、列の左端にある 12px の薄い文字（--text-dim #9A958A・ Strengths の「通信」「ヘルスケア」等）に明るい線が重なって読みにくくなる。 実測（谷 30%〜70% のとき）＝本文の列の地は通常43・線が乗ると最大68 → コントラスト 3.47:1（AA 4.5 未満）。 谷を 0.14・11%〜89% にすると線が乗っても地は最大50.5 → **4.53:1**（線が無いときの 4.83:1 とほぼ同じ）。 🚨 濃さ 0.14 も動かさない。0.17 に戻すと上の計算が 4.3:1 に落ちて AA を割る。 */ -webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,0.95) 5%,rgba(0,0,0,0.14) 11%,rgba(0,0,0,0.14) 89%,rgba(0,0,0,0.95) 95%,#000 100%); mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,0.95) 5%,rgba(0,0,0,0.14) 11%,rgba(0,0,0,0.14) 89%,rgba(0,0,0,0.95) 95%,#000 100%); } .bgtex i{position:absolute;inset:-40px -1400px;display:block;background-repeat:repeat;} /* 手前＝細い線・64本・左へ78秒。奥＝太い線・20本・右へ132秒。 逆向き・別の速さで流すと視差が出て「静止画を動かしている」感じにならない。 */ .bgtex i:nth-child(1){ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='301'%3E%3Crect x='-52.1' y='0.0' width='394.8' height='2' fill='%23C9C5BB' fill-opacity='0.104'/%3E%3Crect x='362.5' y='0.0' width='305.5' height='2' fill='%23C9C5BB' fill-opacity='0.090'/%3E%3Crect x='-327.3' y='6.3' width='358.6' height='1' fill='%23C9C5BB' fill-opacity='0.197'/%3E%3Crect x='48.2' y='14.4' width='292.1' height='1' fill='%23C9C5BB' fill-opacity='0.184'/%3E%3Crect x='422.4' y='14.4' width='850.9' height='1' fill='%23C9C5BB' fill-opacity='0.111'/%3E%3Crect x='177.1' y='22.4' width='541.2' height='2' fill='%23C9C5BB' fill-opacity='0.124'/%3E%3Crect x='779.7' y='22.4' width='726.5' height='2' fill='%23C9C5BB' fill-opacity='0.190'/%3E%3Crect x='96.7' y='31.0' width='608.6' height='3' fill='%23C9C5BB' fill-opacity='0.214'/%3E%3Crect x='-402.1' y='37.8' width='969.4' height='2' fill='%23C9C5BB' fill-opacity='0.134'/%3E%3Crect x='-160.7' y='45.7' width='548.6' height='1' fill='%23C9C5BB' fill-opacity='0.184'/%3E%3Crect x='478.8' y='45.7' width='413.3' height='1' fill='%23C9C5BB' fill-opacity='0.153'/%3E%3Crect x='142.3' y='52.9' width='254.7' height='2' fill='%23C9C5BB' fill-opacity='0.197'/%3E%3Crect x='126.2' y='61.2' width='781.0' height='1' fill='%23C9C5BB' fill-opacity='0.084'/%3E%3Crect x='-97.6' y='67.8' width='536.0' height='2' fill='%23C9C5BB' fill-opacity='0.207'/%3E%3Crect x='539.4' y='67.8' width='1136.0' height='2' fill='%23C9C5BB' fill-opacity='0.136'/%3E%3Crect x='-246.7' y='73.5' width='1059.7' height='1' fill='%23C9C5BB' fill-opacity='0.089'/%3E%3Crect x='894.3' y='73.5' width='960.1' height='1' fill='%23C9C5BB' fill-opacity='0.130'/%3E%3Crect x='169.5' y='81.6' width='492.4' height='3' fill='%23C9C5BB' fill-opacity='0.150'/%3E%3Crect x='739.4' y='81.6' width='412.2' height='3' fill='%23C9C5BB' fill-opacity='0.119'/%3E%3Crect x='-186.4' y='88.6' width='780.2' height='2' fill='%23C9C5BB' fill-opacity='0.106'/%3E%3Crect x='-349.2' y='94.3' width='751.3' height='2' fill='%23C9C5BB' fill-opacity='0.159'/%3E%3Crect x='462.5' y='94.3' width='801.5' height='2' fill='%23C9C5BB' fill-opacity='0.178'/%3E%3Crect x='1275.2' y='94.3' width='432.9' height='2' fill='%23C9C5BB' fill-opacity='0.111'/%3E%3Crect x='-268.5' y='102.6' width='955.9' height='3' fill='%23C9C5BB' fill-opacity='0.143'/%3E%3Crect x='144.6' y='111.4' width='1062.3' height='1' fill='%23C9C5BB' fill-opacity='0.095'/%3E%3Crect x='-347.6' y='117.4' width='726.3' height='3' fill='%23C9C5BB' fill-opacity='0.158'/%3E%3Crect x='402.7' y='117.4' width='1056.5' height='3' fill='%23C9C5BB' fill-opacity='0.123'/%3E%3Crect x='132.2' y='123.7' width='683.7' height='3' fill='%23C9C5BB' fill-opacity='0.138'/%3E%3Crect x='925.6' y='123.7' width='297.0' height='3' fill='%23C9C5BB' fill-opacity='0.103'/%3E%3Crect x='-430.4' y='132.1' width='419.7' height='4' fill='%23C9C5BB' fill-opacity='0.096'/%3E%3Crect x='119.1' y='138.2' width='498.6' height='2' fill='%23C9C5BB' fill-opacity='0.192'/%3E%3Crect x='-460.3' y='153.2' width='1053.4' height='1' fill='%23C9C5BB' fill-opacity='0.196'/%3E%3Crect x='653.3' y='153.2' width='1115.2' height='1' fill='%23C9C5BB' fill-opacity='0.214'/%3E%3Crect x='-40.3' y='166.4' width='858.2' height='2' fill='%23C9C5BB' fill-opacity='0.152'/%3E%3Crect x='917.2' y='166.4' width='911.0' height='2' fill='%23C9C5BB' fill-opacity='0.197'/%3E%3Crect x='98.8' y='173.0' width='1011.9' height='1' fill='%23C9C5BB' fill-opacity='0.085'/%3E%3Crect x='1184.3' y='173.0' width='478.0' height='1' fill='%23C9C5BB' fill-opacity='0.146'/%3E%3Crect x='144.3' y='186.3' width='912.1' height='2' fill='%23C9C5BB' fill-opacity='0.199'/%3E%3Crect x='1070.1' y='186.3' width='519.8' height='2' fill='%23C9C5BB' fill-opacity='0.194'/%3E%3Crect x='-40.6' y='193.7' width='410.7' height='1' fill='%23C9C5BB' fill-opacity='0.170'/%3E%3Crect x='440.9' y='193.7' width='713.6' height='1' fill='%23C9C5BB' fill-opacity='0.119'/%3E%3Crect x='-406.0' y='199.5' width='1092.0' height='4' fill='%23C9C5BB' fill-opacity='0.159'/%3E%3Crect x='694.9' y='199.5' width='963.6' height='4' fill='%23C9C5BB' fill-opacity='0.154'/%3E%3Crect x='-134.0' y='206.0' width='431.1' height='1' fill='%23C9C5BB' fill-opacity='0.183'/%3E%3Crect x='345.1' y='206.0' width='1164.9' height='1' fill='%23C9C5BB' fill-opacity='0.214'/%3E%3Crect x='-185.6' y='213.5' width='1182.5' height='2' fill='%23C9C5BB' fill-opacity='0.176'/%3E%3Crect x='-482.1' y='220.5' width='785.5' height='3' fill='%23C9C5BB' fill-opacity='0.205'/%3E%3Crect x='-77.1' y='227.5' width='368.8' height='2' fill='%23C9C5BB' fill-opacity='0.204'/%3E%3Crect x='335.5' y='227.5' width='1293.5' height='2' fill='%23C9C5BB' fill-opacity='0.095'/%3E%3Crect x='121.0' y='235.6' width='296.8' height='3' fill='%23C9C5BB' fill-opacity='0.123'/%3E%3Crect x='462.0' y='235.6' width='670.3' height='3' fill='%23C9C5BB' fill-opacity='0.123'/%3E%3Crect x='121.4' y='242.1' width='848.4' height='2' fill='%23C9C5BB' fill-opacity='0.140'/%3E%3Crect x='-486.3' y='248.3' width='284.9' height='1' fill='%23C9C5BB' fill-opacity='0.112'/%3E%3Crect x='-164.7' y='248.3' width='754.4' height='1' fill='%23C9C5BB' fill-opacity='0.104'/%3E%3Crect x='674.1' y='248.3' width='1262.2' height='1' fill='%23C9C5BB' fill-opacity='0.106'/%3E%3Crect x='-368.0' y='256.1' width='521.6' height='2' fill='%23C9C5BB' fill-opacity='0.081'/%3E%3Crect x='-166.6' y='264.0' width='1225.2' height='2' fill='%23C9C5BB' fill-opacity='0.184'/%3E%3Crect x='1106.4' y='264.0' width='395.8' height='2' fill='%23C9C5BB' fill-opacity='0.184'/%3E%3Crect x='-248.4' y='272.5' width='410.6' height='2' fill='%23C9C5BB' fill-opacity='0.189'/%3E%3Crect x='271.9' y='272.5' width='235.8' height='2' fill='%23C9C5BB' fill-opacity='0.180'/%3E%3Crect x='-100.1' y='279.2' width='555.2' height='1' fill='%23C9C5BB' fill-opacity='0.127'/%3E%3Crect x='553.1' y='279.2' width='1221.9' height='1' fill='%23C9C5BB' fill-opacity='0.206'/%3E%3Crect x='-118.2' y='287.2' width='754.7' height='3' fill='%23C9C5BB' fill-opacity='0.179'/%3E%3Crect x='155.1' y='294.2' width='807.7' height='1' fill='%23C9C5BB' fill-opacity='0.182'/%3E%3C/svg%3E"); background-size:1400px 301px; animation:bg-tex-near 78s linear infinite; } .bgtex i:nth-child(2){ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='255'%3E%3Crect x='141.0' y='0.0' width='831.4' height='3' fill='%23C9C5BB' fill-opacity='0.064'/%3E%3Crect x='51.2' y='15.8' width='681.6' height='3' fill='%23C9C5BB' fill-opacity='0.064'/%3E%3Crect x='-201.7' y='30.9' width='396.3' height='5' fill='%23C9C5BB' fill-opacity='0.045'/%3E%3Crect x='295.9' y='30.9' width='717.5' height='5' fill='%23C9C5BB' fill-opacity='0.041'/%3E%3Crect x='-56.5' y='46.2' width='954.4' height='3' fill='%23C9C5BB' fill-opacity='0.075'/%3E%3Crect x='975.0' y='46.2' width='399.8' height='3' fill='%23C9C5BB' fill-opacity='0.104'/%3E%3Crect x='-34.7' y='64.2' width='326.9' height='3' fill='%23C9C5BB' fill-opacity='0.074'/%3E%3Crect x='16.5' y='78.2' width='892.0' height='3' fill='%23C9C5BB' fill-opacity='0.065'/%3E%3Crect x='960.2' y='78.2' width='525.4' height='3' fill='%23C9C5BB' fill-opacity='0.047'/%3E%3Crect x='47.2' y='93.2' width='303.7' height='3' fill='%23C9C5BB' fill-opacity='0.079'/%3E%3Crect x='-308.3' y='107.4' width='440.6' height='3' fill='%23C9C5BB' fill-opacity='0.083'/%3E%3Crect x='145.2' y='122.8' width='573.3' height='2' fill='%23C9C5BB' fill-opacity='0.094'/%3E%3Crect x='-51.2' y='136.6' width='1007.7' height='4' fill='%23C9C5BB' fill-opacity='0.088'/%3E%3Crect x='-314.2' y='152.3' width='730.3' height='3' fill='%23C9C5BB' fill-opacity='0.061'/%3E%3Crect x='-5.4' y='169.9' width='428.3' height='3' fill='%23C9C5BB' fill-opacity='0.058'/%3E%3Crect x='-208.0' y='185.4' width='696.5' height='5' fill='%23C9C5BB' fill-opacity='0.057'/%3E%3Crect x='-178.2' y='201.3' width='970.3' height='4' fill='%23C9C5BB' fill-opacity='0.082'/%3E%3Crect x='56.5' y='214.4' width='1004.6' height='2' fill='%23C9C5BB' fill-opacity='0.083'/%3E%3Crect x='-315.1' y='231.0' width='807.9' height='2' fill='%23C9C5BB' fill-opacity='0.075'/%3E%3Crect x='-104.0' y='249.5' width='634.0' height='2' fill='%23C9C5BB' fill-opacity='0.071'/%3E%3C/svg%3E"); background-size:1000px 255px; animation:bg-tex-far 132s linear infinite; } @keyframes bg-tex-near{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-1400px,0,0);} /* タイル1枚分ちょうど＝繋ぎ目が出ない */ } @keyframes bg-tex-far{ from{transform:translate3d(0,0,0);} to{transform:translate3d(1000px,0,0);} /* 逆方向・タイル1枚分 */ } /* スマホは奥の層を止める（動く層2枚は電池を食う。見た目の差は小さい） */ @media (max-width:700px){ .bgtex i:nth-child(2){display:none;} } /* ───────── 明るい節（既定）用の線 ───────── * 2026-08-26 田中さん「全部同じ色合いになってしまった。前と同じようにこの色で同じアニメーションに」 * ＝#business・#strengths は明るいベージュ地に戻し、**動きはそのまま**にする。 * 🚨 図形（x/y/幅/高さ・本数・速さ・向き）は暗い版と1つも変えていない＝色と濃さだけの差し替え。 * 線の色は実測から逆算した： * 暗い版 地 rgb(46,44,40) に #C9C5BB を α で乗せる → 明るさの上がり幅 = 155α（中央値 +24） * 明るい版 地 rgb(202,198,186) に #FFF9EA を α' で乗せる → 上がり幅 = 53α' * 上がり幅をそろえて α' = α × 2.925。#FFF9EA は「地を明るくしただけの色」＝地の暖かみを保つ値。 * 🚨 線は必ず地より**明るい**側。暗い線にすると紙の汚れに見える（2026-08-26 に一度却下された形）。 * 🚨 明るい地では線が乗るほど地が明るくなる＝**暗い文字とのコントラストは上がる**（下がらない）。 * 暗い版とは逆なので、可読性の心配をする向きが反対であることに注意。 */ :root[data-sec="light"] .bgtex i:nth-child(1){background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='301'%3E%3Crect x='-52.1' y='0.0' width='394.8' height='2' fill='%23FFF9EA' fill-opacity='0.304'/%3E%3Crect x='362.5' y='0.0' width='305.5' height='2' fill='%23FFF9EA' fill-opacity='0.263'/%3E%3Crect x='-327.3' y='6.3' width='358.6' height='1' fill='%23FFF9EA' fill-opacity='0.576'/%3E%3Crect x='48.2' y='14.4' width='292.1' height='1' fill='%23FFF9EA' fill-opacity='0.538'/%3E%3Crect x='422.4' y='14.4' width='850.9' height='1' fill='%23FFF9EA' fill-opacity='0.325'/%3E%3Crect x='177.1' y='22.4' width='541.2' height='2' fill='%23FFF9EA' fill-opacity='0.363'/%3E%3Crect x='779.7' y='22.4' width='726.5' height='2' fill='%23FFF9EA' fill-opacity='0.556'/%3E%3Crect x='96.7' y='31.0' width='608.6' height='3' fill='%23FFF9EA' fill-opacity='0.626'/%3E%3Crect x='-402.1' y='37.8' width='969.4' height='2' fill='%23FFF9EA' fill-opacity='0.392'/%3E%3Crect x='-160.7' y='45.7' width='548.6' height='1' fill='%23FFF9EA' fill-opacity='0.538'/%3E%3Crect x='478.8' y='45.7' width='413.3' height='1' fill='%23FFF9EA' fill-opacity='0.447'/%3E%3Crect x='142.3' y='52.9' width='254.7' height='2' fill='%23FFF9EA' fill-opacity='0.576'/%3E%3Crect x='126.2' y='61.2' width='781.0' height='1' fill='%23FFF9EA' fill-opacity='0.246'/%3E%3Crect x='-97.6' y='67.8' width='536.0' height='2' fill='%23FFF9EA' fill-opacity='0.605'/%3E%3Crect x='539.4' y='67.8' width='1136.0' height='2' fill='%23FFF9EA' fill-opacity='0.398'/%3E%3Crect x='-246.7' y='73.5' width='1059.7' height='1' fill='%23FFF9EA' fill-opacity='0.260'/%3E%3Crect x='894.3' y='73.5' width='960.1' height='1' fill='%23FFF9EA' fill-opacity='0.380'/%3E%3Crect x='169.5' y='81.6' width='492.4' height='3' fill='%23FFF9EA' fill-opacity='0.439'/%3E%3Crect x='739.4' y='81.6' width='412.2' height='3' fill='%23FFF9EA' fill-opacity='0.348'/%3E%3Crect x='-186.4' y='88.6' width='780.2' height='2' fill='%23FFF9EA' fill-opacity='0.310'/%3E%3Crect x='-349.2' y='94.3' width='751.3' height='2' fill='%23FFF9EA' fill-opacity='0.465'/%3E%3Crect x='462.5' y='94.3' width='801.5' height='2' fill='%23FFF9EA' fill-opacity='0.521'/%3E%3Crect x='1275.2' y='94.3' width='432.9' height='2' fill='%23FFF9EA' fill-opacity='0.325'/%3E%3Crect x='-268.5' y='102.6' width='955.9' height='3' fill='%23FFF9EA' fill-opacity='0.418'/%3E%3Crect x='144.6' y='111.4' width='1062.3' height='1' fill='%23FFF9EA' fill-opacity='0.278'/%3E%3Crect x='-347.6' y='117.4' width='726.3' height='3' fill='%23FFF9EA' fill-opacity='0.462'/%3E%3Crect x='402.7' y='117.4' width='1056.5' height='3' fill='%23FFF9EA' fill-opacity='0.360'/%3E%3Crect x='132.2' y='123.7' width='683.7' height='3' fill='%23FFF9EA' fill-opacity='0.404'/%3E%3Crect x='925.6' y='123.7' width='297.0' height='3' fill='%23FFF9EA' fill-opacity='0.301'/%3E%3Crect x='-430.4' y='132.1' width='419.7' height='4' fill='%23FFF9EA' fill-opacity='0.281'/%3E%3Crect x='119.1' y='138.2' width='498.6' height='2' fill='%23FFF9EA' fill-opacity='0.562'/%3E%3Crect x='-460.3' y='153.2' width='1053.4' height='1' fill='%23FFF9EA' fill-opacity='0.573'/%3E%3Crect x='653.3' y='153.2' width='1115.2' height='1' fill='%23FFF9EA' fill-opacity='0.626'/%3E%3Crect x='-40.3' y='166.4' width='858.2' height='2' fill='%23FFF9EA' fill-opacity='0.445'/%3E%3Crect x='917.2' y='166.4' width='911.0' height='2' fill='%23FFF9EA' fill-opacity='0.576'/%3E%3Crect x='98.8' y='173.0' width='1011.9' height='1' fill='%23FFF9EA' fill-opacity='0.249'/%3E%3Crect x='1184.3' y='173.0' width='478.0' height='1' fill='%23FFF9EA' fill-opacity='0.427'/%3E%3Crect x='144.3' y='186.3' width='912.1' height='2' fill='%23FFF9EA' fill-opacity='0.582'/%3E%3Crect x='1070.1' y='186.3' width='519.8' height='2' fill='%23FFF9EA' fill-opacity='0.567'/%3E%3Crect x='-40.6' y='193.7' width='410.7' height='1' fill='%23FFF9EA' fill-opacity='0.497'/%3E%3Crect x='440.9' y='193.7' width='713.6' height='1' fill='%23FFF9EA' fill-opacity='0.348'/%3E%3Crect x='-406.0' y='199.5' width='1092.0' height='4' fill='%23FFF9EA' fill-opacity='0.465'/%3E%3Crect x='694.9' y='199.5' width='963.6' height='4' fill='%23FFF9EA' fill-opacity='0.450'/%3E%3Crect x='-134.0' y='206.0' width='431.1' height='1' fill='%23FFF9EA' fill-opacity='0.535'/%3E%3Crect x='345.1' y='206.0' width='1164.9' height='1' fill='%23FFF9EA' fill-opacity='0.626'/%3E%3Crect x='-185.6' y='213.5' width='1182.5' height='2' fill='%23FFF9EA' fill-opacity='0.515'/%3E%3Crect x='-482.1' y='220.5' width='785.5' height='3' fill='%23FFF9EA' fill-opacity='0.600'/%3E%3Crect x='-77.1' y='227.5' width='368.8' height='2' fill='%23FFF9EA' fill-opacity='0.597'/%3E%3Crect x='335.5' y='227.5' width='1293.5' height='2' fill='%23FFF9EA' fill-opacity='0.278'/%3E%3Crect x='121.0' y='235.6' width='296.8' height='3' fill='%23FFF9EA' fill-opacity='0.360'/%3E%3Crect x='462.0' y='235.6' width='670.3' height='3' fill='%23FFF9EA' fill-opacity='0.360'/%3E%3Crect x='121.4' y='242.1' width='848.4' height='2' fill='%23FFF9EA' fill-opacity='0.409'/%3E%3Crect x='-486.3' y='248.3' width='284.9' height='1' fill='%23FFF9EA' fill-opacity='0.328'/%3E%3Crect x='-164.7' y='248.3' width='754.4' height='1' fill='%23FFF9EA' fill-opacity='0.304'/%3E%3Crect x='674.1' y='248.3' width='1262.2' height='1' fill='%23FFF9EA' fill-opacity='0.310'/%3E%3Crect x='-368.0' y='256.1' width='521.6' height='2' fill='%23FFF9EA' fill-opacity='0.237'/%3E%3Crect x='-166.6' y='264.0' width='1225.2' height='2' fill='%23FFF9EA' fill-opacity='0.538'/%3E%3Crect x='1106.4' y='264.0' width='395.8' height='2' fill='%23FFF9EA' fill-opacity='0.538'/%3E%3Crect x='-248.4' y='272.5' width='410.6' height='2' fill='%23FFF9EA' fill-opacity='0.553'/%3E%3Crect x='271.9' y='272.5' width='235.8' height='2' fill='%23FFF9EA' fill-opacity='0.526'/%3E%3Crect x='-100.1' y='279.2' width='555.2' height='1' fill='%23FFF9EA' fill-opacity='0.371'/%3E%3Crect x='553.1' y='279.2' width='1221.9' height='1' fill='%23FFF9EA' fill-opacity='0.602'/%3E%3Crect x='-118.2' y='287.2' width='754.7' height='3' fill='%23FFF9EA' fill-opacity='0.523'/%3E%3Crect x='155.1' y='294.2' width='807.7' height='1' fill='%23FFF9EA' fill-opacity='0.532'/%3E%3C/svg%3E");} :root[data-sec="light"] .bgtex i:nth-child(2){background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='255'%3E%3Crect x='141.0' y='0.0' width='831.4' height='3' fill='%23FFF9EA' fill-opacity='0.187'/%3E%3Crect x='51.2' y='15.8' width='681.6' height='3' fill='%23FFF9EA' fill-opacity='0.187'/%3E%3Crect x='-201.7' y='30.9' width='396.3' height='5' fill='%23FFF9EA' fill-opacity='0.132'/%3E%3Crect x='295.9' y='30.9' width='717.5' height='5' fill='%23FFF9EA' fill-opacity='0.120'/%3E%3Crect x='-56.5' y='46.2' width='954.4' height='3' fill='%23FFF9EA' fill-opacity='0.219'/%3E%3Crect x='975.0' y='46.2' width='399.8' height='3' fill='%23FFF9EA' fill-opacity='0.304'/%3E%3Crect x='-34.7' y='64.2' width='326.9' height='3' fill='%23FFF9EA' fill-opacity='0.216'/%3E%3Crect x='16.5' y='78.2' width='892.0' height='3' fill='%23FFF9EA' fill-opacity='0.190'/%3E%3Crect x='960.2' y='78.2' width='525.4' height='3' fill='%23FFF9EA' fill-opacity='0.137'/%3E%3Crect x='47.2' y='93.2' width='303.7' height='3' fill='%23FFF9EA' fill-opacity='0.231'/%3E%3Crect x='-308.3' y='107.4' width='440.6' height='3' fill='%23FFF9EA' fill-opacity='0.243'/%3E%3Crect x='145.2' y='122.8' width='573.3' height='2' fill='%23FFF9EA' fill-opacity='0.275'/%3E%3Crect x='-51.2' y='136.6' width='1007.7' height='4' fill='%23FFF9EA' fill-opacity='0.257'/%3E%3Crect x='-314.2' y='152.3' width='730.3' height='3' fill='%23FFF9EA' fill-opacity='0.178'/%3E%3Crect x='-5.4' y='169.9' width='428.3' height='3' fill='%23FFF9EA' fill-opacity='0.170'/%3E%3Crect x='-208.0' y='185.4' width='696.5' height='5' fill='%23FFF9EA' fill-opacity='0.167'/%3E%3Crect x='-178.2' y='201.3' width='970.3' height='4' fill='%23FFF9EA' fill-opacity='0.240'/%3E%3Crect x='56.5' y='214.4' width='1004.6' height='2' fill='%23FFF9EA' fill-opacity='0.243'/%3E%3Crect x='-315.1' y='231.0' width='807.9' height='2' fill='%23FFF9EA' fill-opacity='0.219'/%3E%3Crect x='-104.0' y='249.5' width='634.0' height='2' fill='%23FFF9EA' fill-opacity='0.208'/%3E%3C/svg%3E");} /* ───────── お知らせ ───────── */ .nw{margin-top:clamp(52px,6vw,84px);} /* 日付 ｜ 写真 ｜ 本文 の3列。2026-08-26 田中さん指示で写真を足した。 🚨 写真2枚（壱岐市・NTT）は**掲載許諾が未確認**＝check_publish_ready.py が本番で止める。 受賞の1件だけ写真が無く、自作の線画を暫定で置いてある（index.html 側のコメント参照）。 */ .nw-item{ display:grid;grid-template-columns:132px 260px 1fr;gap:0 24px;align-items:start; padding:30px 0;border-top:1px solid var(--line); } /* 読み込み前でも穴が開かないよう、枠に地の色を敷いておく */ .nw-media{margin:0;line-height:0;background:var(--card-well);overflow:hidden;} .nw-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;} /* 自作の線画だけ白黒を反転させる（元は黒線。暗い地では白線にする）。写真には掛けない */ .nw-media img[src$=".svg"]{filter:invert(1);} .nw-item:last-child{border-bottom:1px solid var(--line);} .nw-item time{font-family:var(--font-en);font-size:13px;letter-spacing:0.16em;color:var(--accent);line-height:2.2;} /* 🎨 */ .nw-body h3{font-size:15px;font-weight:400;line-height:2.1;letter-spacing:0.07em;} .nw-body h3 a{color:var(--text-hi);text-decoration:none;transition:color .4s var(--ease);} .nw-body h3 a:hover{color:var(--accent);} /* 🎨 */ .nw-body p{margin-top:8px;font-size:13px;color:var(--text-dim);line-height:2;} /* ───────── お問い合わせ ───────── */ .sec-contact{padding-bottom:clamp(130px,16vw,220px);} .ct-tag{margin-top:38px;font-size:13px;letter-spacing:0.18em;color:var(--text-dim);line-height:2.2;} .ct-lead{margin-top:22px;font-size:clamp(20px,2.4vw,34px);line-height:1.95;letter-spacing:0.1em;color:var(--text-hi);} .ct-desc{margin-top:20px;max-width:620px;line-height:2.2;} /* ── お問い合わせの角丸の帯（2026-08-25 田中さん「こんな感じのレイアウトも入れたい」）── 参考サイト（Coalition）の画面写真から「寸法」だけを実測して作り直したもの。 相手の画像・SVG・書体は1つも使っていない。 実測（幅1997pxの画面写真）→ 幅1440換算： 帯の高さ 158px＝画面幅の7.9%（1440で約114px） 枠線 1px・明るい地の約13%の濃さ（--line と同じ組み方） 角 半径 約29px（1440換算 約21px）→ 28px を採用 ピル 142×27px（1440換算 約102×19.5px）・面は --text-hi 相当 英字 字高28px（1440換算 約20px＝font-size 約29px） 🚨 角は「角ばった四角 − 内側の角丸」の差＝くさび形。 普通の border-radius 付き1px枠にすると上下の線が角で曲がってしまい別物になる （参考の線は端まで真っすぐで、角だけが太る）。 🚨 そのため枠は border ではなく背景8枚で描いてある ＝角のくさび4枚＋直線4本。重ねると濃さが倍になるので、 直線は上下左右とも 28px ずつ内側に寄せて、くさびと重ならないようにしてある。 🚨 くさびの色 %23C9C5BB / 0.16 は --line の実値。data URI には変数を書けないので --line を変えたらこの4枚も手で合わせる（ずれると角だけ色が違う帯になる）。 */ .ct-band{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px; margin:clamp(56px,7vw,92px) var(--pad-x) 0; min-height:clamp(96px,7.9vw,132px); padding:22px 20px; text-decoration:none; background-color:transparent; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cmask id='ma'%3E%3Crect width='28' height='28' fill='%23fff'/%3E%3Ccircle cx='28' cy='28' r='28' fill='%23000'/%3E%3C/mask%3E%3Crect width='28' height='28' fill='%23C9C5BB' fill-opacity='0.16' mask='url(%23ma)'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cmask id='mb'%3E%3Crect width='28' height='28' fill='%23fff'/%3E%3Ccircle cx='0' cy='28' r='28' fill='%23000'/%3E%3C/mask%3E%3Crect width='28' height='28' fill='%23C9C5BB' fill-opacity='0.16' mask='url(%23mb)'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cmask id='mc'%3E%3Crect width='28' height='28' fill='%23fff'/%3E%3Ccircle cx='28' cy='0' r='28' fill='%23000'/%3E%3C/mask%3E%3Crect width='28' height='28' fill='%23C9C5BB' fill-opacity='0.16' mask='url(%23mc)'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cmask id='md'%3E%3Crect width='28' height='28' fill='%23fff'/%3E%3Ccircle cx='0' cy='0' r='28' fill='%23000'/%3E%3C/mask%3E%3Crect width='28' height='28' fill='%23C9C5BB' fill-opacity='0.16' mask='url(%23md)'/%3E%3C/svg%3E"), linear-gradient(var(--line),var(--line)), linear-gradient(var(--line),var(--line)), linear-gradient(var(--line),var(--line)), linear-gradient(var(--line),var(--line)); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat; background-size: 28px 28px,28px 28px,28px 28px,28px 28px, calc(100% - 56px) 1px,calc(100% - 56px) 1px, 1px calc(100% - 56px),1px calc(100% - 56px); background-position: left top,right top,left bottom,right bottom, 28px top,28px bottom, left 28px,right 28px; transition:background-color .5s var(--ease); } .ct-band:hover{background-color:rgba(201,197,187,0.05);} /* 🎨 参考サイトの「新しい色を作らず白を5%乗せる」に合わせた */ /* ───────── カーソルを当てたら枠が金で浮き出る ───────── * 2026-08-26 田中さん指示「もっとわかりやすい色で、その枠が出るようにして」。 * 🚨 同じ形の枠をもう1枚（金色）重ねて、透明→不透明で出す方式。 * background-image は色を transition できないので、上の枠の色を直接変えるとパチッと切り替わる。 * 🚨 これは「線」であって「面」ではない＝金を使ってよい唯一の形（面に塗ると * 伶さんが「ポップすぎる」と言った黄色いpillのボタンに戻る）。pill は金にしない。 * 🚨 くさび4枚の色 %23E8B023 は --accent の実値の直書き。data URI には変数を書けないので * --accent を変えたらここも手で合わせる（上の --line 版と同じ制約）。 * 🚨 角は「面」ではなく **1pxの弧**（半径28と27の円の差＝リング）で描く。 * 下の --line 版は正方形から円を抜いた“面”だが、あれは不透明度0.16だから線に見えているだけで、 * 同じ形のまま不透明な金にすると**角だけ太い塊**になる（実物で見て発覚）。 * 直線側は 1px なので、角も 1px の弧にして初めて太さが揃う。 */ .ct-band{position:relative;} .ct-band::after{ content:'';position:absolute;inset:0;pointer-events:none; opacity:0;transition:opacity .5s var(--ease); background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cmask id='na'%3E%3Ccircle cx='28' cy='28' r='28' fill='%23fff'/%3E%3Ccircle cx='28' cy='28' r='27' fill='%23000'/%3E%3C/mask%3E%3Crect width='28' height='28' fill='%23E8B023' mask='url(%23na)'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cmask id='nb'%3E%3Ccircle cx='0' cy='28' r='28' fill='%23fff'/%3E%3Ccircle cx='0' cy='28' r='27' fill='%23000'/%3E%3C/mask%3E%3Crect width='28' height='28' fill='%23E8B023' mask='url(%23nb)'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cmask id='nc'%3E%3Ccircle cx='28' cy='0' r='28' fill='%23fff'/%3E%3Ccircle cx='28' cy='0' r='27' fill='%23000'/%3E%3C/mask%3E%3Crect width='28' height='28' fill='%23E8B023' mask='url(%23nc)'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cmask id='nd'%3E%3Ccircle cx='0' cy='0' r='28' fill='%23fff'/%3E%3Ccircle cx='0' cy='0' r='27' fill='%23000'/%3E%3C/mask%3E%3Crect width='28' height='28' fill='%23E8B023' mask='url(%23nd)'/%3E%3C/svg%3E"), linear-gradient(var(--accent),var(--accent)), linear-gradient(var(--accent),var(--accent)), linear-gradient(var(--accent),var(--accent)), linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat; background-size: 28px 28px,28px 28px,28px 28px,28px 28px, calc(100% - 56px) 1px,calc(100% - 56px) 1px, 1px calc(100% - 56px),1px calc(100% - 56px); background-position: left top,right top,left bottom,right bottom, 28px top,28px bottom, left 28px,right 28px; } .ct-band:hover::after{opacity:1;} .ct-band-row{display:flex;align-items:center;gap:20px;} .ct-band-en{ font-family:var(--font-en);font-weight:400; font-size:clamp(22px,2vw,29px);letter-spacing:0.08em;line-height:1; color:var(--text-hi); } .ct-band-pill{ flex:none;width:102px;height:20px;border-radius:10px; background-color:var(--text-hi); background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8'%3E%3Cpath d='M0 4H18M14.5 1 18 4l-3.5 3' fill='none' stroke='%232E2C28' stroke-width='1'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center; transition:transform .5s var(--ease); } .ct-band:hover .ct-band-pill{transform:translateX(7px);} .ct-band-jp{font-size:12px;letter-spacing:0.18em;line-height:1;color:var(--text-dim);} /* ───────── フッター ───────── */ /* 🎨 本文とフッターの境目に金の細線。左端だけ金で、右へ行くほど無彩色に溶ける */ .ft{background:var(--ground-deep);padding:64px 0 52px;position:relative;} .ft::before{ /* 🚨 1px だと地も上も暗いので画面上で見えたか判別できなかった＝見出しの線と同じ2pxに揃えた */ content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(to right, var(--accent) 0%,rgba(232,176,35,0.35) 14%, rgba(162,157,149,0.14) 46%,rgba(162,157,149,0) 100%); } .ft nav ul{display:flex;flex-wrap:wrap;gap:14px 28px;} .ft nav a{font-size:12px;letter-spacing:0.1em;color:var(--text-dim);text-decoration:none;transition:color .4s var(--ease);} .ft nav a:hover{color:var(--text);} .ft-addr{margin-top:34px;font-style:normal;font-size:12px;line-height:2.1;color:var(--text-dim);letter-spacing:0.06em;} .ft-co{display:block;color:var(--accent);letter-spacing:0.14em;margin-bottom:4px;} /* 🎨 社名 */ .ft-addr a{color:var(--text-dim);text-decoration:none;} .ft-c{margin-top:28px;font-family:var(--font-en);font-size:11px;letter-spacing:0.14em;color:#5A5A5A;} /* ───────── 動き（基本の1つ＋大きい英語だけの2つ） ───────── 参考サイト（details.co.jp）の登場演出は opacity 0→1 ＋ translateY(80px→0) の1種類のみ。 本文・数字・写真はいまもこの1種類だけで出す。 🚨 2026-08-24 田中さんの指示で、**大きい英語の見出しに限って**行マスクと下線引きを足した （下の A・B）。増やしてよいのはここまで＝本文や数字にまで別の動きを付けない。 増やした瞬間にこの版の狙い（引き算）が壊れ、「ポップすぎる」側に戻る。 */ .js .rv{opacity:0;transform:translateY(80px);} .js .rv.is-in{ opacity:1;transform:translateY(0); transition:opacity 1.2s var(--ease),transform 1.2s var(--ease); } /* 🎨 2026-08-24 田中さん「文字のアニメーションを増やしてみて」で足した2つ目の動き。 * A＝行マスク：見えない箱（overflow:hidden）の下から、文字が一行ずつ滑り出る。 * 対象は**大きい英語だけ**＝1画面目の OUR / MISSION と、各節の見出し4本。 * 🚨 1字ずつには刻まない（参考サイトに無く、賑やかになってポップ側に振れる。 * お兄さんの「ポップすぎる」という指摘に逆戻りしないための線引き）。 * B＝見出しの下の金の線を左から引く（下に別記）。 * 🚨 素の状態＝普通に読める。隠すのは `.js` が付いているときだけ（JSが落ちた画面で * 見出しが消えないようにする＝既存の .rv と同じ考え方）。 */ .lnm .ln{ display:block;overflow:hidden; /* 文字の上下が箱で切れないよう、はみ出す分だけ広げて同じ分を詰め戻す ＝見た目の高さは変わらない（下の金の線の位置もずれない） */ padding:0.08em 0 0.14em;margin:-0.08em 0 -0.14em; } .lnm .ln>span{display:block;} /* 親（.rv）自体は動かさない＝80px上げる動きと二重にならない。動くのは中の行だけ */ .js .rv.lnm{opacity:1;transform:none;} .js .lnm .ln>span{transform:translateY(110%);} .js .lnm.is-in .ln>span{transform:translateY(0);transition:transform 1.1s var(--ease);} /* 2行あるとき（OUR / MISSION）は2行目だけ遅らせる＝順番を付けるだけで種類は増やさない */ .js .lnm.is-in .ln:nth-child(2)>span{transition-delay:0.11s;} /* ───────── Strengths だけの出方＝「罫線が引かれてから字が入る」 ───────── * 2026-08-26 田中さん「Strengthsの部分の文字の出方を変えてほしい。Businessから何も変わらないのでつまらない」 * ＝Business と同じ「下からふわっと」1種類だけだと、節が変わったことが伝わらない。 * * 選んだ形＝実績表の横罫が左→右に引かれ、引き終わったところにその行の文字が入る。01→02→03 の * 各行は少しずつ遅れて始まる。**新しい動きの語彙を増やしていない**（見出し下の金の線を左から引く * 動き＝.hd-en::after と同じ「線を引く」の応用）。1字ずつには刻まない＝ポップ側へ戻さないための線引きは維持。 * * 🚨 罫線と文字を別々に動かすため、index.html の #strengths の dt/dd の中身は で包んである。 * 包まないと dt ごと動いて罫線（::before）も一緒に流れる。**片方だけ戻さない**。 * 🚨 2026-08-26 カード化に伴い、罫線は dt の1本（行の全幅）だけになった。 * 以前は dt(104px)+dd(残り) の2本を継いで1本に見せていたが、カードの中では * dt が上・dd が下の縦積みになり、行の罫線は dt の上辺だけになったため。 * → dd::before は無い。**dd に線を足すと1行に2本引かれる**。 * 🚨 線が引かれ始めるのはカードが出てから＝0.55秒待つ。カード自体は .rv で1.2秒かけて出るので、 * 0にすると「まだ薄いカードの中で線が走る」状態になり何をしているか読めない。 * 🚨 素の状態（JSなし）＝罫線も文字も普通に出ている。隠すのは .js が付いているときだけ。 */ /* ① 表そのものは動かさない（カード .stc.rv がまとめて動かすので二重にしない＝中の行だけ動かす） */ .js #strengths .st-facts.rv{opacity:1;transform:none;} /* ② 罫線＝元の border-top は場所取りとして残し、色だけ透明に。同じ位置に引ける線を1本重ねる */ .js #strengths .st-facts dt{position:relative;border-top-color:transparent;} .js #strengths .st-facts dt::before{ content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line); transform:scaleX(0);transform-origin:left center; transition:background-color 0.9s var(--ease); } /* linear で引く。ease だと引き終わりが間延びして、線でなく影が伸びたように見える */ .js #strengths .st-facts.is-in dt::before{transform:scaleX(1);transition:transform 0.40s linear 0.55s,background-color 0.9s var(--ease) 0s;} /* ③ 文字＝その行の線を引き終えてから入る（0.55 + 0.40 ＝ 0.95 の少し後） */ .js #strengths .st-facts dt>span, .js #strengths .st-facts dd>span{display:block;opacity:0;transform:translateY(10px);} .js #strengths .st-facts.is-in dt>span, .js #strengths .st-facts.is-in dd>span{ opacity:1;transform:translateY(0); transition:opacity 0.5s var(--ease) 1.00s,transform 0.5s var(--ease) 1.00s; } /* ④ 行の順送り＝2行目以降を 0.14秒ずつ遅らせる（線も文字も同じだけずらす） */ .js #strengths .st-facts.is-in dt:nth-of-type(2)::before{transition-delay:0.69s,0s;} .js #strengths .st-facts.is-in dt:nth-of-type(3)::before{transition-delay:0.83s,0s;} .js #strengths .st-facts.is-in dt:nth-of-type(4)::before{transition-delay:0.97s,0s;} .js #strengths .st-facts.is-in dt:nth-of-type(2)>span, .js #strengths .st-facts.is-in dd:nth-of-type(2)>span{transition-delay:1.14s;} .js #strengths .st-facts.is-in dt:nth-of-type(3)>span, .js #strengths .st-facts.is-in dd:nth-of-type(3)>span{transition-delay:1.28s;} .js #strengths .st-facts.is-in dt:nth-of-type(4)>span, .js #strengths .st-facts.is-in dd:nth-of-type(4)>span{transition-delay:1.42s;} /* ⑤ カード3枚は左から順に出す。3枚は横に並んでいて同時に画面に入るため、 ずらさないと3枚が一斉に動いて「読む順番」が消える。動きの種類は増やさない＝.rv のまま */ .js #strengths .st-grid .stc:nth-child(2).rv.is-in{transition-delay:0.12s;} .js #strengths .st-grid .stc:nth-child(3).rv.is-in{transition-delay:0.24s;} /* ───────── 1画面目の巨大英文＝「窓」 ───────── * 2026-08-24 田中さんの選択。OUR / MISSION の文字の中だけ背景写真が明るく透ける。 * 周りの写真は暗いまま・文字の中だけ明るい＝背景が12.4秒ごとに入れ替わると * 文字の中身も一緒に変わる。 * 🚨 「巨大英文は中間グレーで写真に溶かす」という当初の方針を、この2語だけ上書きしている。 * * 仕組み＝同じ語を重ねて焼く（index.html で OUR / MISSION を4回ずつ書いているのはこのため） * .wd-t … 土台の灰色の文字。写真が出せない・古いブラウザではこれだけが残る * .wd-p1 … 背景写真1枚目を文字の形に切り抜いた層。開幕で1.4秒かけて浮かび上がる * .wd-p2 / .wd-p3 … 2枚目・3枚目。背景の入れ替えと同じ間・同じ2.4秒で入れ替わる（dark.js） * * 🚨 この4層とその親に transform を掛けない。transform が付くと * background-attachment:fixed の基準が「画面」から「その箱」に変わり、 * 窓の中の写真が周りの写真とずれる＝窓に見えなくなる。 * 行マスク（下から滑り出る）をこの2語に使えないのはこの理由。 * 🚨 明るさも filter で作らない（filter も同じく fixed の基準を壊す）。 * 背景レイヤー同士の重ね方で作る＝白い薄膜を screen で重ねて暗部を持ち上げ、 * 写真は luminosity で明るさだけ使い、色みは下に敷いた暖かい灰色に合わせる * （＝周りと同じ白黒＋わずかな sepia に揃う。ここだけカラーにしない）。 */ .fv-win .ln{display:block;} .fv-win .wd{position:relative;display:inline-block;} .fv-win .wd-p{display:none;} /* 対応していないブラウザでは層を出さない＝土台の灰色だけ */ @supports ((-webkit-background-clip:text) or (background-clip:text)) and (background-blend-mode:luminosity){ .fv-win .wd-p{ display:block;position:absolute;left:0; /* 🚨 上下に 0.14em ぶん箱を広げている（top を上げた分だけ内側に戻すので文字は動かない）。 切り抜きは「文字の形」と「この箱」の重なりなので、箱が文字より低いと 大文字の頭が薄く欠ける。書体を変えても欠けないよう余裕を持たせる。 */ top:-0.14em;padding:0.14em 0; background-image: linear-gradient(rgba(0,0,0,0.14),rgba(0,0,0,0.14)), linear-gradient(rgba(255,255,255,0.36),rgba(255,255,255,0.36)), var(--fv-photo), linear-gradient(#8B8175,#8B8175); /* 上から：わずかに暗くする（白飛びを止める）／白い薄膜（暗部を持ち上げる）／ 写真は明るさだけ使う／色みは下の暖かい灰色に合わせる。 この2枚の膜で写真の明暗を「文字が必ず読める帯」に収めている＝ 明るい写真でも白一色にならず、暗い写真（3枚目）でも文字が消えない。 */ background-blend-mode:multiply,screen,luminosity,normal; background-size:cover;background-position:center; background-attachment:fixed; /* 🚨 窓の要。周りの写真と同じ位置・同じ大きさで写る */ -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .fv-win .wd-p1{--fv-photo:url('/assets/hero-bg-1920.webp');} .fv-win .wd-p2{--fv-photo:url('/assets/hero-bg2-1920.webp');} .fv-win .wd-p3{--fv-photo:url('/assets/hero-bg3-1920.webp');} /* 2.4s は .bg-slide と必ず同じ値にする（ずれると窓と周りが別々に切り替わる） */ .fv-win .wd-p2,.fv-win .wd-p3{opacity:0;transition:opacity 2.4s linear;} .fv-win .wd-p2.is-on,.fv-win .wd-p3.is-on{opacity:1;} /* 🚨 スマホ幅では画面固定をやめる。iOS Safari の background-attachment:fixed は 当てにできない（写真の大きさの基準がページ全体になり、文字の中が一色に潰れる）。 ここでは文字の塊に写真を収める＝周りとの位置合わせは無くなるが、確実に写真が出る。 */ @media (max-width:900px){ .fv-win .wd-p{background-attachment:scroll;} } /* 開幕の動き＝灰色の文字から写真の窓へ1.4秒かけて変わる */ .js .fv-win .wd-p1{opacity:0;} .js .fv-win.is-in .wd-p1{opacity:1;transition:opacity 1.4s var(--ease) 0.25s;} } /* 親は動かさない＝80px上がる動きは付けない（上の🚨のとおり transform が窓を壊す） */ .js .rv.fv-win{opacity:1;transform:none;} /* B＝節見出しの下の金の線を、一瞬で出すのをやめて左から引く。 開幕でロゴの輪郭をなぞるのと同じ所作にそろえる＝動きの種類は増えても気配は1つ。 文字が出きったころに引き始める（0.35秒待つ）。 */ .js .hd-en.rv::after{transform:scaleX(0);transform-origin:left center;} .js .hd-en.rv.is-in::after{ transform:scaleX(1);transition:transform 0.9s var(--ease) 0.35s; /* 線を引き終えてから流し始める（0.35+0.9＝1.25秒後）。一方通行＝左から右へ繰り返す。 🚨 `backwards` は消さない。これが無いと**待っている1.25秒のあいだだけ**上の `background-position:0%`（＝金が線の左寄りに居る）が出てしまい、1周目だけ 「金が途中まで進んで止まって、消えてから、また左から流れてくる」ように見える。 2周目以降は正しいので気づきにくい（2026-08-24 田中さん指摘）。 */ animation:hd-sweep 9s linear 1.25s infinite backwards; } /* 🚨 隠すのは `.js` が付いているときだけ＝JSが落ちた画面では本文がそのまま読める （js-on.js が head で に印を付けている） */ /* ───────── 狭い画面 ───────── */ @media (max-width:900px){ :root{--pad-x:20px;} .hd-burger{display:flex;} /* 901px以上では出さない（上の既定は display:none） */ /* 2026-08-26 追加：ナビを「開閉パネル」に。項目・aria-current の二重管理を避けるため、 新しいメニューは作らず既存の #hdNav（.hd-nav）をそのまま使う。 閉じているときは display:none ではなく opacity/visibility で隠す＝開閉にアニメーションを付けられる （visibility:hidden はフォーカス・読み上げからも外れるので、display:none と同じ安全さを保つ）。 🚨 #hd（ID）で括っているのは、下層の .hd-nav-lower ul の gap 指定（1006行目より後にある共有例外）に 後勝ちで負けないため（ID の詳細度は class の組み合わせに常に勝つ）。 */ #hd .hd-nav{ display:block;position:fixed;top:var(--hd-h);left:0;right:0;bottom:0; background:var(--ground);overflow-y:auto;z-index:49; padding:8px var(--pad-x) 48px; opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-12px); transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s; } html.nav-open #hd .hd-nav{ opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0); transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s; } #hd .hd-nav ul{display:flex;flex-direction:column;gap:0;} #hd .hd-nav li{border-bottom:1px solid var(--line);} #hd .hd-nav li:first-child{border-top:1px solid var(--line);} #hd .hd-nav a{display:block;padding:18px 2px;font-size:16px;letter-spacing:0.14em;} /* 現在地の金の下線（会社案内と同じ・面は塗らない）。縦積みの行の中に収まる位置へ調整。 */ #hd .hd-nav a[aria-current="page"]::after{left:2px;right:2px;bottom:10px;} html.nav-open{overflow:hidden;} /* 開いている間は背面のスクロールを止める */ .fv-fields{gap:28px;flex-direction:column;} .biz-fig{aspect-ratio:3/2;} .st-grid{grid-template-columns:1fr;} /* カード3枚を縦に積む（横1枚では図も文字も小さくなりすぎる） */ .stc-in{padding:14px 14px 18px;} .st-no{margin-top:16px;} /* 縦積みでは下端をそろえる必要がない＝auto をやめる */ .mq-st{margin:0 16px 0 18px;} .nw-item{grid-template-columns:1fr;gap:6px;} .nw-media{margin:6px 0 4px;} /* 縦積み＝日付の下に写真、その下に本文 */ } /* ───────── 動きを減らす設定 ───────── */ @media (prefers-reduced-motion:reduce){ /* 2026-08-26 追加：開閉ナビのアニメーションだけ止める（開閉そのものは効く＝ opacity/visibility の切り替えは残る。transition を外して瞬時にするだけ）。 */ #hd .hd-nav,html.nav-open #hd .hd-nav{transition:none;} .hd-burger-bar{transition:none;} .rv{opacity:1;transform:none;transition:none;} /* 窓は「動き」ではなく見た目そのものなので消さない。出すのを一瞬にするだけ */ .js .fv-win .wd-p1,.js .fv-win.is-in .wd-p1{opacity:1;transition:none;} .fv-win .wd-p2,.fv-win .wd-p3{transition:none;} .js .lnm .ln>span, .js .lnm.is-in .ln>span{transform:none;transition:none;} .js .hd-en.rv::after, .js .hd-en.rv.is-in::after{transform:none;transition:none;animation:none;} /* Strengths の「罫線を引く／文字が入る」も止める＝最初から引かれていて読める状態にする */ .js #strengths .st-facts dt::before, .js #strengths .st-facts.is-in dt::before{transform:none;transition:none;} .js #strengths .st-facts dt>span, .js #strengths .st-facts dd>span, .js #strengths .st-facts.is-in dt>span, .js #strengths .st-facts.is-in dd>span{opacity:1;transform:none;transition:none;} .js #strengths .st-grid .stc:nth-child(2).rv.is-in, .js #strengths .st-grid .stc:nth-child(3).rv.is-in{transition-delay:0s;} .mq-in{animation:none;} /* 横に流れる帯も止める（先頭で静止した状態で読める） */ /* カーソルの反応は消さない＝「今どれを見ているか」の手がかりなので、動く分（持ち上げ）だけ止める */ .stc-in{transition:background-color 0.01s,color 0.01s,box-shadow 0.01s;} .stc-in .st-title,.stc-in .st-desc,.stc-in .st-facts dt,.stc-in .st-facts dd, .stc-in .st-more,.stc-in .st-no{transition:none;} .stc-in:hover{transform:none;} .grain{animation:none;} .bg-slide{transition:none;} .ct-band:hover .ct-band-pill{transform:none;transition:none;} .ct-band::after{transition:none;} /* 枠は出す（色の手がかりは残す）＝出方だけ即時にする */ .curtain{display:none;} /* 背景のテクスチャも止める（動くのは .bgtex の中の 2枚だけ）。 */ .bgtex i{animation:none;} } /* ══════════════════════════════════════════════════════════════════════════ * 下層ページ（1枚目＝会社案内 /about/）。2026-08-26 追記。 * * 🚨 ここから下は **下層ページ専用**。すべて body.lw-page の中でだけ効くように書く * （唯一の例外＝.hd-nav-lower と aria-current。どちらもトップの index.html に * 存在しない目印なので、トップの見た目は1pxも変わらない）。 * 🚨 上の行は1行も書き換えていない。追記だけ。 * * 参考＝recruit.coalition-group.jp の下層ページの実測（先方の画像・書体は1つも持ち帰って * いない。持ち帰ったのは数値だけ）。移したのは次の6点： * ① 下層には写真を1枚も置かない ② 巨大な英字＋小さな日本語見出し * ③ 番号ラベル 14px／欧文セリフ／字間0.28px（＝0.02em） * ④ 日本語小見出し 16px／明朝／字間 -0.48px（＝-0.03em）／行送り 16px * ⑤ 本文 16px／行送り 32px（2.0）／字間 0.8px（＝0.05em）／ * 幅は版面の33.33%で右に寄せる（390px幅では右寄せをやめて全幅・14px／行送り24.5px） * ⑥ 繰り返しカードは padding 16px 16px 24px・間隔16px・角丸なし * 配色はトップと完全に同一（下層で色を変えない）。金は線にだけ使い、面には塗らない。 * ══════════════════════════════════════════════════════════════════════════ */ /* 版面の33.33%。参考サイトは1440px幅で本文の幅が459px・左端が949px＝右の余白に揃えていた。 ここは版面（--wrap 1120px から左右の余白を引いた幅）の33.33%として同じ関係を作る。 */ body.lw-page{--lw-narrow:calc((min(var(--wrap),100vw) - var(--pad-x) * 2) * 0.3333);} /* ── ヘッダー（トップと同じ .hd をそのまま使う。下層は項目が8つに増えるぶんだけ間隔を可変に） ── */ .hd-nav-lower ul{gap:clamp(16px,2.4vw,34px);} /* 現在地の印。面を塗らず、金の細い下線だけ（1px）。 */ .hd-nav a[aria-current="page"]{color:var(--text-hi);position:relative;} .hd-nav a[aria-current="page"]::after{ content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px; background:var(--accent);opacity:0.9; } /* ── パンくず（全ページ共通部品。動かさない＝ここは .rv を付けない） ── */ .lw-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 9px;} .lw-crumb li{font-family:var(--font-jp);font-size:11px;letter-spacing:0.12em;line-height:2;color:var(--text-dim);} .lw-crumb li+li::before{content:"/";margin-right:9px;color:rgba(201,197,187,0.32);} .lw-crumb a{color:var(--text-dim);text-decoration:none;transition:color .4s var(--ease);} .lw-crumb a:hover{color:var(--accent);} .lw-crumb [aria-current="page"]{color:var(--text);} /* ── ヒーロー ── 参考サイトの実測＝高さ688px／上の余白132px（PC 1440）、449px／114px（390）。 */ .lw-fv{ width:100%;max-width:var(--wrap);margin:0 auto; padding:calc(var(--hd-h) + 61px) var(--pad-x) clamp(24px,2.2vw,32px); min-height:clamp(430px,47.8vw,688px); display:flex;flex-direction:column; } .lw-no{ margin-top:clamp(18px,1.8vw,26px); font-family:var(--font-en);font-size:14px;letter-spacing:0.02em;line-height:1; color:var(--accent); } .lw-h1{font-weight:400;margin-top:clamp(12px,1.4vw,20px);} /* 巨大英字。参考サイトは表示幅の約3分の2を占める大きさ（PCで960px幅）。 🚨 うちは画像にせずテキストで組む＝検索と読み上げに残すため。 読み上げが二重にならないよう、この span だけ HTML 側で aria-hidden にしている。 */ .lw-h1-en{ display:block; font-family:var(--font-en);font-weight:400; font-size:clamp(100px,15.5vw,220px); line-height:0.96;letter-spacing:0.01em; color:var(--text-hi); } .lw-h1-jp{ display:block;margin-top:clamp(12px,1.25vw,18px); font-size:16px;font-weight:400;letter-spacing:-0.03em;line-height:1; color:var(--text); } .lw-lead{ margin-top:clamp(26px,3vw,44px);margin-left:auto; width:var(--lw-narrow); font-size:16px;line-height:2;letter-spacing:0.05em;color:var(--text); } /* ── 本文の節。見出しは左・中身は右（参考サイトの版面） ── */ .lw-sec{ display:grid; grid-template-columns:clamp(150px,17%,200px) minmax(0,1fr); gap:0 clamp(24px,3.6vw,48px); padding-top:clamp(58px,7.2vw,110px); } .lw-sec:first-of-type{padding-top:clamp(14px,1.6vw,24px);} .lw-h2{ grid-column:1;position:relative;padding-top:19px; font-size:16px;font-weight:400;letter-spacing:-0.03em;line-height:1.9; color:var(--text-hi); } /* 見出しの上の短い金の線（金は線にだけ使う） */ .lw-h2::before{content:"";position:absolute;left:0;top:0;width:26px;height:1px;background:var(--accent);} .lw-sec-body{grid-column:2;} /* 版面の33.33%で右に寄せる（文章だけの節に使う） */ .lw-narrow{width:var(--lw-narrow);margin-left:auto;} .lw-p{font-size:16px;line-height:2;letter-spacing:0.05em;color:var(--text);} .lw-p+.lw-p{margin-top:1.7em;} /* 原稿の 。🚨 太字にしない＝この書体は400しか無く、太字にすると機械が 線を太らせた偽物の字になる。強さは大きさと明るさで出す。 */ .lw-page strong{font-weight:400;} .lw-strong{ font-size:clamp(17px,1.5vw,20px);line-height:2.05;letter-spacing:0.08em; color:var(--text-hi); } .lw-strong+.lw-strong{margin-top:0.5em;} .lw-strong+.lw-p{margin-top:1.9em;} .lw-sec-body>.lw-strong+.lw-cards{margin-top:clamp(30px,3.6vw,52px);} /* 本文中のリンク。下線は金の細い線だけ（面を塗らない） */ .lw-sec-body a{ color:var(--text-hi);text-decoration:none; border-bottom:1px solid rgba(232,176,35,0.5); transition:color .4s var(--ease),border-color .4s var(--ease); } .lw-sec-body a:hover{color:#F0C34E;border-bottom-color:var(--accent);} /* ── 繰り返しカード（参考サイト実測＝padding 16px 16px 24px・間隔16px・角丸なし） ── */ .lw-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;} .lw-cards.is-3{grid-template-columns:repeat(3,minmax(0,1fr));} .lw-card{ display:flex;flex-direction:column; background:var(--card);padding:16px 16px 24px; min-height:clamp(190px,19vw,240px); color:var(--text); } .lw-card-no{font-family:var(--font-en);font-size:13px;letter-spacing:0.22em;line-height:1;color:var(--accent);} .lw-card-t{margin-top:16px;font-size:clamp(17px,1.5vw,20px);font-weight:400;letter-spacing:0.09em;line-height:1.85;color:var(--text-hi);} .lw-card-d{margin-top:12px;font-size:13px;line-height:2;letter-spacing:0.05em;} /* ── 会社概要（項目と内容） ── */ .lw-facts{ display:grid;grid-template-columns:clamp(92px,13%,150px) minmax(0,1fr); column-gap:clamp(18px,2.8vw,40px); } .lw-facts dt{ grid-column:1;border-top:1px solid var(--line);padding:15px 0 16px; font-size:13px;letter-spacing:0.12em;line-height:1.9;color:var(--text-dim); } .lw-facts dd{ grid-column:2;border-top:1px solid var(--line);padding:15px 0 16px;margin:0; font-size:15px;letter-spacing:0.05em;line-height:1.9;color:var(--text); } /* ── お問い合わせ（帯 .ct-band はトップの部品をそのまま使う） ── */ .lw-contact{padding:clamp(84px,10.4vw,156px) 0 clamp(96px,11.6vw,176px);} .lw-ct-t{font-size:clamp(20px,2.4vw,34px);line-height:1.95;letter-spacing:0.1em;color:var(--text-hi);} .lw-ct-d{margin-top:20px;max-width:620px;font-size:15px;line-height:2.2;letter-spacing:0.05em;} /* ── 現れ方。トップと同じ .rv → .is-in（dark.js は書き換えない）。 ヒーローの中だけ、順番が付くように遅らせる（動きの種類は増やさない）。 ── */ .js .lw-page .lw-h1-jp.rv.is-in{transition-delay:0.30s;} .js .lw-page .lw-lead.rv.is-in{transition-delay:0.42s;} .js .lw-page .lw-h1-en.lnm.is-in .ln>span{transition-delay:0.08s;} .js .lw-page .lw-cards .lw-card:nth-child(2).rv.is-in{transition-delay:0.12s;} .js .lw-page .lw-cards .lw-card:nth-child(3).rv.is-in{transition-delay:0.24s;} @media (max-width:900px){ /* 参考サイトの390px幅の実測＝本文14px／行送り24.5px／幅は100%（右寄せをやめる） */ .lw-page .lw-sec{grid-template-columns:minmax(0,1fr);} .lw-page .lw-h2{grid-column:1;margin-bottom:20px;} .lw-page .lw-sec-body{grid-column:1;} .lw-page .lw-narrow,.lw-page .lw-lead{width:100%;margin-left:0;} .lw-page .lw-lead,.lw-page .lw-p{font-size:14px;line-height:1.75;letter-spacing:0.057em;} .lw-page .lw-fv{padding-top:calc(var(--hd-h) + 43px);} .lw-page .lw-cards,.lw-page .lw-cards.is-3{grid-template-columns:minmax(0,1fr);} .lw-page .lw-facts{grid-template-columns:minmax(0,1fr);} /* 🚨 PC用の「1列目/2列目」指定が残っていると勝手に2列へ戻り、項目名が1文字ずつ縦に折れる。 スマホでは項目名も値も同じ1列目に置いて縦に積む。 */ .lw-page .lw-facts dt{grid-column:1;padding:14px 0 0;} .lw-page .lw-facts dd{grid-column:1;border-top:0;padding:2px 0 15px;} } @media (prefers-reduced-motion:reduce){ .js .lw-page .lw-h1-jp.rv.is-in, .js .lw-page .lw-lead.rv.is-in, .js .lw-page .lw-cards .lw-card:nth-child(2).rv.is-in, .js .lw-page .lw-cards .lw-card:nth-child(3).rv.is-in{transition-delay:0s;} .js .lw-page .lw-h1-en.lnm.is-in .ln>span{transition-delay:0s;transition:none;} } /* ══════════════════════════════════════════════════════════════════════════ * 会社案内 /about/ の版面の組み替え（2026-08-26 夕）。 * * 🚨 ここも **追記だけ**。上の行は1行も書き換えていない（トップの見た目を1pxも変えないため）。 * そのため「トップと共通の規則にセレクタを足す」代わりに、 * 同じ中身の規則を .sec-lit 用にもう1つ書いている（既存の行に手を入れないための形）。 * 🚨 写真は1枚も使わない／金は線にだけ使い面には塗らない／角丸は 0。 * * 参考＝recruit.coalition-group.jp・work-job の実測（PC 1440×900 / SP 390×844）。 * 数値だけを持ち帰っており、先方の画像・SVG・書体は1つも使っていない。 * ══════════════════════════════════════════════════════════════════════════ */ /* ══ 修正5（2026-08-26 夕）「ミッション」の見出しだけ出ないことがある ═══════ * 原因（推測ではなく実測）： * .lw-sec は display:grid で align-items が既定の stretch のため、 * 見出し

が**行の高さいっぱい＝451.4px に引き伸ばされていた**（実測）。 * 出現演出の IntersectionObserver は threshold:0.01（面積比1%）・ * rootMargin 下 -12%（1440×900 では実効の下端＝792px）。 * 画面に入り始めた瞬間、見えている高さは見出しも本文も同じ約8px だが、 * ・本文

（高さ約40px）→ 8/40 ＝ 0.20 ＝ 余裕で発火 * ・見出し（高さ451.4px） → 8/451.4＝ 0.0177＝ しきい値 0.01 のすぐ上 * ＝見出しだけが発火するかしないかの境目に乗っていた（だから本文は出て見出しは出ない）。 * SP(390)は1列なので見出しの高さが 49.4px しかなく、この現象は起きない（実測どおり）。 * 直し方：引き伸ばしをやめて中身の高さに戻す＝面積比が本文と同じ桁になり、必ず一緒に出る。 * 🚨 見出しは元々ボックスの上端に描かれていたので、**見た目は変わらない**（高さだけが変わる）。 * 🚨 .lw-sec は下層ページ専用（トップの index.html に .lw- は1つも無い）＝トップに影響しない。 */ .lw-page .lw-sec{align-items:start;} /* ── A-1 ヒーローを画面いっぱいの入れ物にする ── 柱（.lw-pil）と縞と明るい地を画面の端まで届かせるため、下層の入れ物を作り替える。 🚨 .lw-fv 自身の行は書き換えず、より強いセレクタで上書きしている。 */ .lw-page .lw-fv{max-width:none;padding-left:0;padding-right:0;} .lw-page .lw-fv-in{width:100%;max-width:none;margin:0;padding:0 var(--pad-x);} /* 🚨 ヒーローの中身だけ版面（1120px）から外して画面幅いっぱいにする。 理由＝参考の実測③④⑤は全部「画面幅に対する割合」で、版面1120pxのままだと 同時に満たせない（英字66.7%＝960pxを1064pxの版面に入れると、右下の日本語ラベルの 居場所が4pxしか残らず必ずぶつかる）。枠（.lw-rule）は既に画面幅いっぱいなので、 中身だけ内側に188px引っ込んでいる方が不整合だった。本文（.wrap）は1120pxのまま。 */ /* 導入文は「入れ物の33.33%を右寄せ」のまま＝入れ物が広がったぶんだけ実測⑤に寄る */ .lw-page .lw-fv .lw-lead{width:33.3333%;} /* ── A-1 ヒーロー上部の細い罫線の枠（実測①）── 上辺＝1px・両端に 1px×16px の短い縦線。border ではなく3本の細い面で描く。 🚨 色：実測は rgb(200,198,190)。新しい色は作らず、いちばん近い既存トークン --text（#C9C5BB＝rgb(201,197,187)）をそのまま使う。差は (+1,−1,−3)＝目では区別できない。 左右の余白は参考が 32px、うちは版面の --pad-x＝28px に合わせる（版面の決めごとを優先）。 */ .lw-page .lw-rule{position:relative;height:1px;margin:0 var(--pad-x);background:var(--text);} .lw-page .lw-rule i{position:absolute;top:1px;width:1px;height:16px;background:var(--text);} .lw-page .lw-rule i:first-child{left:0;} .lw-page .lw-rule i:last-child{right:0;} /* 🚨 縦棒は罫線から下へ 16px 垂れている。パンくずをそのまま置くと「ホーム」の 「ホ」に食い込む（実測：縦棒の下端 153px に対しパンくずの上端 137px＝16px重なる）。 縦棒の下端よりさらに 12px 下げる＝16+12＝28px。SPは縦棒が 8px なので 20px。 */ .lw-page .lw-crumb{margin-top:28px;} /* ── A-2 番号ラベルの手前の 6×6px の四角（実測②）── 🚨 四角の色は **金にしない**。金は「線」にだけ使う決めごとがあり、6×6の四角は 小さくても「面」だから（塗った瞬間に、伶さんが却下した黄色い面の系統に戻る）。 参考サイトも四角とラベルは地の文字色で揃えている＝実測どおり --text にした。 ラベル「( 01 )」の金はそのまま残す＝下層の連番（.lw-card-no・.st-no）と揃った 既存の見た目を壊さないため。 */ .lw-page .lw-no{position:relative;padding-left:18px;} .lw-page .lw-no::before{ content:"";position:absolute;left:0;top:calc(50% - 3px); width:6px;height:6px;background:var(--text); } /* ── A-3 巨大英字の大きさ（2026-08-26 夕に再調整）── 🚨 最初に渡された「画面幅の66.7%」は参考サイトの `WORK & JOBS`（11文字）の値で、 `ABOUT`（5文字）に同じ割合を当てると1文字が巨大になりすぎる＝間を取って 54〜56%。 実測：font-size 198.72px のとき字の実描画幅 594.7px（画面幅の41.3%） ＝1px あたり 2.9927px → 55% ＝ 792px には 264.6px 必要 → 18.4vw。 ※ .lnm .ln>span は display:block なので、字の幅は Range で測らないと 入れ物の幅（＝版面）が返る。最初に 73.9% と出たのはこの取り違え。 */ .lw-page .lw-h1-en{ font-size:clamp(90px,18.4vw,265px); /* ── 修正4b（2026-08-26 夜）重なり24pxを実際に効かせる ── * 🚨 原因＝隣り合う余白の相殺。中の .lnm .ln は * `padding:0.08em 0 0.14em; margin:-0.08em 0 -0.14em`（dark.css:815）を持ち、 * .lw-h1-en 自身には下の padding/border が無いので、**子の -0.14em がそのまま * .lw-h1-en の下余白として外へ抜ける**。そこへ .lw-h1-jp の margin-top:-24px が * 隣り合うと、負どうしの相殺は「より負の側」が勝つため -0.14em(=-37.09px) が採用され、 * **-24px は一度も効いていなかった**（実測 37.09375px ＝ 0.14 × 264.96 と完全一致）。 * → display:flow-root で .lw-h1-en を独立した整形文脈にし、子の余白が外へ抜けるのを止める。 * これで .lw-h1-jp の -24px がそのまま重なり量になる。 * 🚨 ただし上側の -0.08em も同時に抜けなくなり、英字が 0.08em(=21.2px) 下がってしまう。 * 元の位置を保つため同じ -0.08em を自分の上余白として持ち直す（em なので字の大きさに追随）。 */ display:flow-root; margin-top:-0.08em; } /* ── A-4 日本語ラベルを巨大英字の右下へ（実測④）── 右寄せ／丸い印 24px・間隔 12px／英字の下端に 24px 食い込ませる。 🚨 印（星）の素材は黒で描いてあるので、暗い地の上では白黒を反転させる （トップの .mq-st が :root[data-sec="dark"] のときだけ反転しているのと同じ理屈。 このページは data-sec="light" だが、ヒーローは暗い地なので個別に反転する）。 */ .lw-page .lw-h1-jp{ display:flex;align-items:center;justify-content:flex-end;gap:12px; margin-top:-24px;position:relative;z-index:1; } .lw-page .lw-h1-st{width:24px;height:24px;flex:none;filter:invert(1);opacity:0.82;} /* 英字に食い込ませたぶん、導入文までの間隔を戻す（実測⑤の位置関係を保つ） */ .lw-page .lw-lead{margin-top:clamp(44px,4.6vw,66px);} /* ══ B バリューの節（柱つき・明るい地のカード面） ══════════════════════════ */ /* 🚨 この節だけ .wrap の外に出しているので、次の .wrap の1つ目の節が 「:first-of-type＝上の余白を詰める」に当たってしまう。元の余白に戻す。 */ .lw-page .lw-wrap2 .lw-sec:first-of-type{padding-top:clamp(58px,7.2vw,110px);} .lw-page .lw-val{width:100%;padding-top:clamp(58px,7.2vw,110px);} /* 流れる帯（VALUE）は画面いっぱい・暗い地の上。中身の作りはトップの .mq をそのまま使う。 🚨 星は黒い素材なので暗い地では反転させる（上のヒーローと同じ理由）。 */ .lw-page .lw-val>.mq{margin-top:0;} .lw-page .lw-val .mq-st{filter:invert(1);} /* 柱と本体を同じ1マスに重ねる。柱は左33.3%、本体は画面いっぱい。 🚨 align-items:start が要る。既定の stretch だと柱がマスの高さいっぱいに伸びて position:sticky が動かなくなる（貼りつかない）。 */ .lw-page .lw-val-grid{display:grid;grid-template-columns:33.3333% minmax(0,1fr);align-items:start;} .lw-page .lw-val-main{grid-area:1 / 1 / 2 / 3;position:relative;z-index:1;} .lw-page .lw-pil{ grid-area:1 / 1 / 2 / 2;z-index:2; position:sticky; /* 🚨 top は 0 ではなくヘッダーの高さ。0 にすると柱がヘッダーの真下に潜り込み、 ヘッダーの左3分の1だけ暗い柱・右3分の2が明るい地という状態になって、 ヘッダーの文字色をどちらに合わせても片方が読めなくなる。 */ top:var(--hd-h); height:clamp(460px,74vh,760px); padding:clamp(34px,3.6vw,52px) clamp(22px,2.6vw,38px); display:flex;flex-direction:column;justify-content:flex-start; } /* 柱の飾り＝地よりわずかに明るい面（--card）＋地の質感＋右端の金の細い線。写真は使わない。 */ .lw-page .lw-pil-deco{position:absolute;inset:0;background:var(--card);overflow:hidden;} /* 🚨 金は「線」だけ＝1px の縦線。面には塗らない。 */ .lw-page .lw-pil-deco::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--accent);opacity:0.9;} /* 質感はトップの .bgtex をそのまま流用する。 🚨 このページは data-sec="light" なので .bgtex には「明るい地用」の線（#FFF9EA・濃いα）が 当たる。暗い柱の上ではそのままだと線が強すぎるため、入れ物ごと薄める（0.18）。 🚨 2026-08-26 夕・実物の画面写真で却下：ここは「質感」ではなく **バーコードの柄**に見えた。 原因＝下の .bgtex は本来 mask-image で中央の線を 0.14 まで薄めているのに、 その mask を none にしたせいで線が原寸のまま出た（線の濃さ 0.626 × 0.18 ＝ 0.113 ＝地 rgb(58,56,52) が最大 rgb(80,78,73) まで動く＝22段階の差＝線が1本ずつ数えられる）。 濃さを 0.06 まで落としても 7段階残り、平らな面の上では縞として数えられてしまう。 → **線の層はやめて、粒（.grain と同じ feTurbulence）だけにした**。 粒は乱数なので「1本ずつ数えられる」形が原理的に生じない。 */ .lw-page .lw-pil-deco .bgtex{display:none;} /* 柱の粒。.grain（画面全体・position:fixed・z-index:-1）は柱の面の下に隠れて届かないため、 柱の中にもう1枚だけ敷く。動かさない＝柱は貼りついて止まっているので、 粒が動くと「柱だけ揺れている」ように見える。 */ .lw-page .lw-pil-deco::before{ content:"";position:absolute;inset:0;pointer-events:none; opacity:0.34;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } .lw-page .lw-pil-body{position:relative;z-index:1;} .lw-page .lw-pil-body .lw-strong{margin-top:clamp(22px,2.6vw,38px);} /* 縞の境界と明るい地は画面いっぱいに敷く（柱はその上に重なる）。 */ .lw-page .lw-val-main .seam{width:100%;} /* カードは右の3分の2に置く＝左の余白を「柱の幅＋みぞ」にする。 実測⑩＝1440px幅でカードの列は 557.8〜1362px（柱480px＋みぞ約78px）。 */ .lw-page .lw-lit{ padding:clamp(30px,4.2vw,60px) clamp(24px,5.4vw,78px) clamp(52px,6.6vw,96px) calc(33.3333% + clamp(24px,5.4vw,78px)); } /* 実測⑩＝2列・隙間は横15.6px 縦16.0px・角丸0。日付とタグは原稿に無いので作らない。 */ .lw-page .lw-val-cards{gap:16px 15.6px;} .lw-page .lw-val-cards .lw-card{min-height:clamp(198px,20vw,278px);padding:clamp(20px,2vw,28px) clamp(20px,2vw,28px) clamp(26px,2.4vw,34px);} /* 実測⑩＝見出し 28px（明朝）。 */ .lw-page .lw-val-cards .lw-card-t{font-size:clamp(20px,2.1vw,28px);line-height:1.6;letter-spacing:0.06em;} .lw-page .lw-val-cards .lw-card-d{margin-top:14px;font-size:14px;} /* ══ C 明るい節の目印 .sec-lit ═══════════════════════════════════════════ * 🚨 中身はトップの :root[data-sec="light"] #business,#strengths と**同じ**。 * 既存の行を1文字も書き換えない方針のため、セレクタを足す代わりに複製している。 * 片方だけ直すと必ずずれる＝直すときは両方直すこと。 */ :root[data-sec="light"] .sec-lit{ --text:var(--light-text); --text-hi:var(--light-text); --text-dim:var(--light-text-dim); --accent:var(--accent-on-light); /* 🚨 忘れると金の連番が明るい地で 1.15:1＝読めなくなる */ --line:rgba(46,44,40,0.16); --card:var(--light-card); --card-well:var(--light-card-well); --card-hi:var(--light-card-hi); --card-shadow:var(--light-card-shadow); background:var(--light-ground); color:var(--light-text); } /* 現在地の金の下線は rgba を直書きせず var(--accent) を見ているが、ヘッダーは .sec-lit の外にあるため明るい地に切り替わらない。明るい地に掛かっている間だけ濃い金にする。 🚨 トップの index.html には aria-current が無い＝トップの見た目は変わらない。 */ .hd.on-light .hd-nav a[aria-current="page"]::after{background:var(--accent-on-light);} /* ══ 修正1（2026-08-26 夕）ヘッダーの後ろの地 ═══════════════════════════ * 🚨 ヘッダーは透明のまま固定されているので、スクロールすると本文と流れる帯が * メニュー・ロゴに重なって**どちらも読めない**（実物の画面写真で確認）。 * 🚨 **body.lw-page に限定**している＝トップページ（body にこのクラスが無い）には * 1pxも影響しない。JS 側は両方のページで is-stuck を付けるが、効くのは下層だけ。 * ・一番上（scrollY<=2）では今までどおり透明＝第一印象は変えない * ・下端は硬い線で切らず、地の色そのままの透明へ落として消す * ・明るい節では .on-light が付くので、地も明るい方へ差し替える */ body.lw-page .hd::before{ content:"";position:absolute;left:0;right:0;top:0; height:calc(var(--hd-h) + 30px); z-index:-1;pointer-events:none; opacity:0;transition:opacity .32s var(--ease); background:linear-gradient(to bottom, rgba(46,44,40,1) 0%, rgba(46,44,40,1) 68%, rgba(46,44,40,0) 100%); } body.lw-page .hd.is-stuck::before{opacity:1;} body.lw-page .hd.is-stuck.on-light::before{ background:linear-gradient(to bottom, rgba(202,198,186,1) 0%, rgba(202,198,186,1) 68%, rgba(202,198,186,0) 100%); } /* ══ SP（幅900px未満）══════════════════════════════════════════════════ */ @media (max-width:900px){ /* 実測③＝巨大英字は画面幅の 76.3% */ .lw-page .lw-h1-en{font-size:15.8vw;} /* 実測④のSP＝右寄せをやめて英字の直下に左寄せ・12px 下・重ねない・14px */ .lw-page .lw-h1-jp{justify-content:flex-start;margin-top:12px;font-size:14px;} .lw-page .lw-lead{margin-top:clamp(26px,3vw,44px);} /* 🚨 上で足した .lw-page .lw-fv .lw-lead{width:33.3333%} はクラス3つ＝ 既存の .lw-page .lw-lead{width:100%}（クラス2つ）より強い。 打ち消さないとスマホで導入文だけ画面の1/3の幅に痩せて読めなくなる。 */ .lw-page .lw-fv .lw-lead{width:100%;} /* 実測①のSP＝縦線は 8px */ .lw-page .lw-rule i{height:8px;} .lw-page .lw-crumb{margin-top:20px;} /* 実測②のSP＝ラベルは13px（四角は6×6のまま） */ .lw-page .lw-no{font-size:13px;} /* 🚨 柱は「飾りだけ」を消す。中の見出しと標語はカードの上に普通に置いて残す ＝原稿が画面から消えない形にする。 */ .lw-page .lw-val-grid{grid-template-columns:minmax(0,1fr);} .lw-page .lw-val-main{grid-area:auto;} .lw-page .lw-pil{ grid-area:auto;position:static;z-index:auto; height:auto;padding:0 var(--pad-x) clamp(26px,5vw,38px); } .lw-page .lw-pil-deco{display:none;} .lw-page .lw-lit{padding:clamp(26px,6vw,40px) var(--pad-x) clamp(40px,9vw,60px);} /* 実測⑩のSP＝1列・見出し20px（1列は既存の .lw-page .lw-cards の指定がそのまま効く） */ .lw-page .lw-val-cards{gap:16px;} .lw-page .lw-val-cards .lw-card{min-height:0;} .lw-page .lw-val-cards .lw-card-t{font-size:20px;} } /* ══════════════════════════════════════════════════════════════════════ B. 参考サイトの写しから離す調整（2026-08-26 夜・田中さんの選択で確定） 「ベースはこれでいい／少し真似すぎているのでブラッシュアップして少し変えて」 🚨 ここも下層専用（.lw-page / .lw-mis）＝トップの index.html には .lw- が1つも無い。 🚨 既存の行は1つも消していない。すべて後ろからの上書きで足している。 ══════════════════════════════════════════════════════════════════════ */ /* ── B-1 ミッションの節だけ版面を広く・標語を大きく ── 田中さんの指摘＝「ミッションの文字が小さすぎない？」（実測 20px・幅354.6px。 同じ画面の巨大英字 ABOUT は265px）。原因は参考サイトが本文をすべて版面の 33.33% に揃えているのをそのまま持ってきたこと。 🚨 直し方として「幅も一緒に広げる」を選んでいる＝節ごとに版面が変わることで 参考サイトの「全部33%で揃える」均一さが崩れ、写しに見えなくなる。 幅＝版面(1064px)の 0.5263 ＝ 560px。標語は 32px（560px幅で1行16.7文字）。 🚨 字を大きくしたぶん字間と行間は詰める（20px用の 0.08em/2.05 のままだと散る）。 */ .lw-mis{width:calc((min(var(--wrap),100vw) - var(--pad-x) * 2) * 0.5263);} .lw-mis .lw-strong{font-size:clamp(24px,2.4vw,32px);line-height:1.75;letter-spacing:0.045em;} .lw-mis .lw-strong+.lw-strong{margin-top:0.42em;} .lw-mis .lw-strong+.lw-p{margin-top:2.1em;} /* ── B-2 番号の書き方を変える ── 参考サイトの「( 01 )」＋手前の 6×6px の四角をやめ、数字のうしろに金の細い線を 伸ばす形にする。🚨 金は線にだけ使う（面には塗らない）＝この線は 1px の線。 四角は display:none で消し、A-2 の指定自体は履歴として残している。 */ .lw-page .lw-no{display:flex;align-items:center;gap:12px;padding-left:0;} .lw-page .lw-no::before{display:none;} .lw-page .lw-no::after{ content:"";flex:none;height:1px;width:clamp(56px,7vw,104px); background:var(--accent);opacity:0.9; } /* ── B-3 見出しの金の線を横から縦へ ── 参考サイトは見出しの上に短い横線。うちは見出しの左に立つ 1px の縦線にする。 🚨 線を上に置く必要がなくなるので padding-top:19px を 4px まで詰める （.lw-sec は align-items:start＝見出しの字の上端が本文の1行目に近づく）。 */ .lw-page .lw-h2{padding-top:4px;padding-left:15px;} .lw-page .lw-h2::before{top:0.42em;left:0;width:1px;height:1.05em;} /* ── B-4 ヒーロー上の罫線の縦線を「下向き」から「上向き」へ ── 参考サイトは罫線から下へ 16px 垂れる。うちは上へ 16px 伸ばす＝形が逆になる。 🚨 副次的な効果＝縦線がパンくずの上から退くので、A-1 で 28px（＝16+12）まで 広げていた隙間を 14px に戻せる（ヒーローの頭が締まる）。 罫線の上には 61px の余白があるので、16px 伸ばしてもヘッダーには当たらない。 */ .lw-page .lw-rule i{top:-16px;} .lw-page .lw-crumb{margin-top:14px;} /* ── B-5 スマホ（900px以下）での上書き ── */ @media (max-width:900px){ /* 幅は画面いっぱいに戻す（.lw-page .lw-narrow の 100% と同じ扱い） */ .lw-page .lw-mis{width:100%;margin-left:0;} .lw-page .lw-mis .lw-strong{font-size:clamp(20px,5.6vw,24px);line-height:1.7;} /* SPは縦線が 8px（既存の A-1 の上書き）なので、上向きの分も 8px にする */ .lw-page .lw-rule i{top:-8px;} .lw-page .lw-crumb{margin-top:12px;} } /* ══════════════════════════════════════════════════════════════════════ C. 節の見出しを強くする（2026-08-26 夜・田中さんの指摘と選択で確定） 「ミッション、バリュー、会社概要の目次が目立ちにくく見えづらいので もう少し工夫してセッションごとにわかるように」 → ①節の頭に細い区切り線 ②見出しに番号と金の英字ラベル ③日本語を16px→24px 🚨 英字（MISSION / VALUE / COMPANY / BUSINESS / CO-FOUNDED）は **装飾として新しく足した語＝原稿ではない**。読み上げからは aria-hidden で外し、 h2 が読み上げる内容は日本語のまま1文字も変えていない。 ══════════════════════════════════════════════════════════════════════ */ /* ── C-1 節の区切り線（版面1064pxいっぱいの1px）── 🚨 線の「上」にも余白が要るので、これまで padding-top にまとめて入れていた 110px を margin(66px)＋padding(44px) に分け直す＝節と節の間隔の合計は変えない。 🚨 色は新しく作らず --text を 20% で薄めるだけ（参考サイトと同じ「白を乗せる」流儀）。 */ .lw-page .lw-sec, .lw-page .lw-sec:first-of-type, .lw-page .lw-wrap2 .lw-sec:first-of-type{ position:relative; margin-top:clamp(30px,4.2vw,66px); padding-top:clamp(28px,3vw,44px); } .lw-page .lw-sec::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:var(--text);opacity:0.20; } /* ヒーローの真下（ミッション）だけは、すぐ上にヒーローの罫線があるので間隔を詰める */ .lw-page .lw-sec-first{margin-top:clamp(8px,1.2vw,18px);} /* ── C-2 見出しの中身＝〔番号＋金の線＋英字〕/〔日本語24px〕── */ /* 英字ラベルが最長の CO-FOUNDED（10文字）でも収まるよう左の列を広げる （本文は margin-left:auto の右寄せ＝列を広げても本文の位置は動かない） */ .lw-page .lw-sec{grid-template-columns:clamp(170px,20%,232px) minmax(0,1fr);} .lw-page .lw-h2{ padding-top:0;padding-left:0; font-size:clamp(20px,1.9vw,24px);line-height:1.45;letter-spacing:0.02em; } /* B-3 で立てた金の縦線は、番号ラベルに役目を渡したので消す（指定自体は履歴として残す） */ .lw-page .lw-h2::before{display:none;} .lw-h2-tag{ display:flex;align-items:center; margin-bottom:clamp(10px,1.1vw,16px); font-family:var(--font-en);font-size:12px;letter-spacing:0.16em;line-height:1; color:var(--accent);white-space:nowrap; } .lw-h2-tag i{font-style:normal;letter-spacing:0.02em;} .lw-h2-tag i::after{ content:"";display:inline-block;vertical-align:middle; width:clamp(16px,1.8vw,26px);height:1px;margin:0 10px; background:var(--accent);opacity:0.9; } .lw-h2-jp{display:block;word-break:auto-phrase;} /* ── C-3 スマホ（900px以下）── */ @media (max-width:900px){ /* 🚨 1カラムに畳み直す（2026-08-26 続き⑥で修正）。 1209行目に同じ指定があるが、上の C-2（1568行目・メディアクエリの外）が あとから書かれているため、同じ強さの指定は後勝ちで2カラムのまま残っていた。 結果、幅390pxで本文が左の170pxの列に押し込まれ、画面の右半分が空いていた。 数値の検査（はみ出し0・折り返し位置）には出ず、スクリーンショットを開いて発見。 */ .lw-page .lw-sec{grid-template-columns:minmax(0,1fr);} /* 1カラムに畳まれるので、番号ラベルと日本語の間だけ少し詰める */ .lw-h2-tag{margin-bottom:9px;} .lw-page .lw-h2{margin-bottom:18px;} } /* ══════════════════════════════════════════════════════════════════════ D. Consulting / Export / Works で新たに出た2つの原稿パターン （2026-08-26・実装担当追記）。会社案内（About）には無かった構成のため、 続き⑤の型だけでは足りず、最小限だけ追加した。新しい色は作らず、 既存の --text／--text-hi／--accent と、他の節で使っている数値 （.lw-card-t の書体サイズ、.lw-h2 の金の短い線）をそのまま流用している。 ① 素の箇条書き（`::: numbered` `::: facts` ではない `- ` 行） ＝ 90行目のグローバルリセット list-style:none でマーカーと行間が 消えたままだったので、それだけを足す。マーカーは面を塗らず 1px の短い線（.lw-h2::before と同じ意匠）。 ② h3（小見出し＝Exportの「よくあるご質問」、Worksの実績グルーピング） ＝ 会社案内には独立した h3 が無い（.lw-card-t は番号カード専用）ので、 1つだけ新しいクラスを足す。数値は .lw-card-t と同じにして、 新しい大きさ・行間は作っていない。 ══════════════════════════════════════════════════════════════════════ */ /* ── D-1 素の箇条書き（Consulting §1／Export §3／Works §2・§3） ── */ .lw-ul{display:flex;flex-direction:column;gap:14px;} .lw-ul li{position:relative;padding-left:20px;font-size:16px;line-height:2;letter-spacing:0.05em;color:var(--text);} .lw-ul li::before{content:"";position:absolute;left:0;top:0.95em;width:6px;height:1px;background:var(--accent);opacity:0.9;} /* リストの中の だけは、太さでなく明るさで先頭語を立たせる（Worksの実績見出し語のため） */ .lw-ul strong{font-weight:400;color:var(--text-hi);} .lw-sec-body>.lw-ul+.lw-p{margin-top:1.9em;} .lw-sec-body>.lw-p+.lw-ul{margin-top:1.7em;} /* ── D-2 h3 小見出し（Export §4「よくあるご質問」／Works §1の実績グルーピング） ＝ .lw-card-t と同じ書体サイズ・字間・色を流用（新しい数値は作っていない） ── */ .lw-h3{ margin-top:clamp(28px,3vw,44px);margin-bottom:14px; font-size:clamp(17px,1.5vw,20px);font-weight:400;letter-spacing:0.09em;line-height:1.85; color:var(--text-hi); } .lw-sec-body>.lw-h3:first-child{margin-top:0;} /* ── D-3 スマホ（900px以下）── */ @media (max-width:900px){ .lw-ul li{font-size:14px;line-height:1.75;letter-spacing:0.057em;} .lw-h3{font-size:17px;margin-top:clamp(22px,5vw,30px);} } /* ══════════════════════════════════════════════════════════════════════ E. Members / Contact で新たに出た2つの部品（2026-08-26・実装担当追記）。 新しい色は作らず、既存の --text／--text-hi／--accent／--line と 「白を数%乗せる」だけで組んでいる。角は丸めない・金は面に塗らない。 ══════════════════════════════════════════════════════════════════════ */ /* ── E-1 代表の肖像写真（Members §1 PROFILE）。 角丸なし・細い枠線1px・背景は敷かず地の質感をそのまま透かす。 ── */ .lw-portrait{width:240px;margin:0 0 clamp(28px,3.2vw,44px);} .lw-portrait img{display:block;width:100%;height:auto;border:1px solid var(--line);} @media (max-width:900px){ /* スマホで本文を圧迫しないよう縮小 */ .lw-portrait{width:148px;margin:0 0 24px;} } /* ── E-3 本文の中に置く写真（2026-08-27 田中さん指示「この二つの写真を載せて」）。 肖像用の .lw-portrait が 240px 固定なのに対し、こちらは置いた列の幅いっぱいに広げる。 🚨 意匠は .lw-portrait と揃える＝角は丸めない・枠線は1pxの --line・背景は敷かない。 新しい色・新しい飾りは足していない。 🚨 .lw-photo-wide は「節の版面いっぱい」に広げる指定（2026-08-27 田中さん指摘 「MEMBERSの写真が小さい。バランスも悪い」への対応）。本文の列（右2/3・約803px）に 収めると左が空いて釣り合わないため、見出しの列もまたいで 1064px まで広げる。 🚨 使うときは figure を .lw-sec-body の**外**（.lw-sec の直下）に置くこと。 .lw-sec-body の中に入れたままだと grid-column が効かず、列の中に留まる。 ── */ .lw-photo{margin:0 0 clamp(28px,3.2vw,44px);} .lw-photo img{display:block;width:100%;height:auto;border:1px solid var(--line);} .lw-photo-wide{grid-column:1 / -1;margin-top:clamp(20px,2.4vw,34px);} /* 本文の列（803px）いっぱいだと大きすぎるときの一段小さい幅（2026-08-27 田中さん指示 「登壇写真をもう少し小さく」）。列の左端に揃え、右に少し余白を残す。 */ .lw-photo-m{width:min(100%,640px);} @media (max-width:900px){ .lw-photo{margin:0 0 24px;} .lw-photo-wide{margin-top:0;} } /* ── E-4 代表プロフィール（Members 01 PROFILE）を「写真＋本文の2列」にする （2026-08-27 田中さん指摘「最初のメンバー紹介の写真」が小さい・釣り合わない）。 それまでは 240px の写真を本文の上に積んでいたため、写真の右に約560pxの空白が残っていた。 🚨 本文3段落は

でひとまとめにしてから並べる。 段落をばらばらのまま横に並べると、段落の数だけ段（グリッドの行）ができ、 写真の高さが**1段目だけ**を押し広げて、1段落目と2段落目のあいだに約300pxの穴が空く。 🚨 grid-row:1/-1 は効かない（-1 は「明示した段の終わり」を指すが、ここは段を明示して いないため 1 段目のままになる）。2026-08-27 に実物を見て気づいた＝寸法の数値だけを 測る検査では、段落の箱が伸びているだけなので「隙間 27px」と正常に見えてしまう。 🚨 写真の元データは 640×853 しか無い＝表示幅を340pxより広げると粗くなる。 もっと大きくするなら伶さんから元の画像をもらうこと。 ── */ .lw-profile{ display:grid; grid-template-columns:clamp(220px,42%,340px) minmax(0,1fr); gap:0 clamp(28px,3vw,44px); } .lw-profile>.lw-portrait{grid-column:1;align-self:start;width:100%;margin:0;} .lw-profile>.lw-profile-text{grid-column:2;} @media (max-width:900px){ /* スマホは1列に戻す。写真は本文の上・画面の6割の幅（従来の148pxより大きく） */ .lw-profile{grid-template-columns:minmax(0,1fr);} .lw-profile>.lw-portrait{grid-column:1;width:60%;margin:0 0 24px;} .lw-profile>.lw-profile-text{grid-column:1;} } /* ── E-2 お問い合わせフォーム（Contact）。原稿のクラス名 contact-form／ form-note／form-row／form-row-checkbox／required をそのまま使い、 .lw-page の中に閉じ込める（トップページには影響しない）。 ── */ /* ヒーロー直後・.lw-sec ではない最初の文章の間隔 （.lw-sec:first-of-type の上余白 clamp(14px,1.6vw,24px) と同じ値を明示）。 .wrap の直下の先頭が

になっているのは Contact だけなので、 既存ページの見た目には影響しない。 */ .lw-page .wrap>.lw-p:first-child{padding-top:clamp(14px,1.6vw,24px);} .lw-page .contact-form{max-width:640px;margin-top:clamp(36px,4.4vw,64px);} .lw-page .form-note{ margin-bottom:clamp(24px,2.8vw,36px); font-size:13px;line-height:1.9;letter-spacing:0.04em;color:var(--text-dim); } .lw-page .form-row{margin-top:24px;} .lw-page .form-row:first-of-type{margin-top:0;} .lw-page .form-row label{ display:block;margin-bottom:10px; font-size:13px;letter-spacing:0.08em;color:var(--text-hi); } .lw-page .required{ margin-left:8px; font-size:11px;letter-spacing:0.1em;color:var(--accent); } .lw-page .form-row input[type="text"], .lw-page .form-row input[type="email"], .lw-page .form-row input[type="tel"], .lw-page .form-row select, .lw-page .form-row textarea{ width:100%;padding:13px 14px; font-family:inherit;font-size:16px;line-height:1.6;color:var(--text-hi); background-color:rgba(201,197,187,0.06); border:1px solid var(--line);border-radius:0; transition:border-color .3s var(--ease),background-color .3s var(--ease); } .lw-page .form-row textarea{resize:vertical;min-height:140px;} .lw-page .form-row select{ appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9C5BB' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center; padding-right:36px; } .lw-page .form-row input::placeholder, .lw-page .form-row textarea::placeholder{color:var(--text-dim);} .lw-page .form-row input:focus, .lw-page .form-row select:focus, .lw-page .form-row textarea:focus{ outline:none;border-color:var(--accent);background-color:rgba(201,197,187,0.09); } .lw-page .form-row-checkbox label{ display:flex;align-items:flex-start;gap:10px;cursor:pointer; font-size:13px;line-height:1.8;letter-spacing:0.04em;color:var(--text); } /* 🚨 2026-08-26 検品で発見＝ここは元々 accent-color だけで色を当てていたが、 ブラウザ標準のチェックボックスは未チェックのとき background-color も border も 無視して「白い四角」を描く（accent-color が効くのはチェック後の塗りだけ）。 暗い地の中でページ唯一の真っ白な塊になり、他の入力欄（薄い地＋細い線）と まったく揃っていなかった。画像を開いて初めて分かった＝数値の検査には出ない。 appearance:none で標準の描画を止め、他の入力欄と同じ意匠で描き直す。 角は丸めない・金は小さい印だけ（レ点）＝この版の決めごとどおり。 */ .lw-page .form-row-checkbox input[type="checkbox"]{ appearance:none;-webkit-appearance:none; flex:none;width:16px;height:16px;margin:2px 0 0;position:relative; background-color:rgba(201,197,187,0.06); border:1px solid var(--line); transition:border-color .4s var(--ease),background-color .4s var(--ease); } /* 🚨 :not(:checked) が要る。この指定（クラス等4・要素2）は下の :checked（クラス等4・要素1） より強いため、付けないとチェック済みの金の枠がマウスを乗せた瞬間に灰色へ戻る。 2026-08-26 に実測で確認（クリック直後の borderColor が rgb(154,149,138)）。 */ .lw-page .form-row-checkbox label:hover input[type="checkbox"]:not(:checked){border-color:var(--text-dim);} .lw-page .form-row-checkbox input[type="checkbox"]:checked{ background-color:rgba(232,176,35,0.10);border-color:var(--accent); } /* レ点＝正方形の左と下の辺だけを残して45度回す（画像を使わない） */ .lw-page .form-row-checkbox input[type="checkbox"]:checked::after{ content:"";position:absolute;left:4px;top:1px;width:5px;height:9px; border:solid var(--accent);border-width:0 1.5px 1.5px 0; transform:rotate(45deg); } .lw-page .form-row-checkbox input[type="checkbox"]:focus-visible{ outline:1px solid var(--accent);outline-offset:2px; } .lw-page .form-row-checkbox a{ color:var(--text-hi);text-decoration:none; border-bottom:1px solid rgba(232,176,35,0.5); transition:color .4s var(--ease),border-color .4s var(--ease); } .lw-page .form-row-checkbox a:hover{color:#F0C34E;border-bottom-color:var(--accent);} /* 送信ボタン＝.ct-band（お問い合わせ帯）と同じ意匠に寄せた簡略版。 枠線1px・面は塗らない・カーソルを当てると .ct-band の hover と同じ 「白を5%乗せる」＋枠を金にする。 */ .lw-page .contact-form button[type="submit"]{ display:inline-flex;align-items:center;gap:14px; margin-top:clamp(28px,3.2vw,44px);padding:16px 28px; font-family:var(--font-en);font-size:14px;letter-spacing:0.12em; color:var(--text-hi);background-color:transparent; border:1px solid var(--line);cursor:pointer; transition:background-color .4s var(--ease),border-color .4s var(--ease); } .lw-page .contact-form button[type="submit"]::after{ content:"→";color:var(--accent);transition:transform .4s var(--ease); } .lw-page .contact-form button[type="submit"]:hover{ background-color:rgba(201,197,187,0.05);border-color:var(--accent); } .lw-page .contact-form button[type="submit"]:hover::after{transform:translateX(4px);} /* ── E-3 スマホ（900px以下）。入力欄は16px以上を明示＝iOSの自動拡大を防ぐ ── */ @media (max-width:900px){ .lw-page .contact-form{max-width:100%;} .lw-page .form-row input,.lw-page .form-row select,.lw-page .form-row textarea{font-size:16px;} .lw-page .contact-form button[type="submit"]{width:100%;justify-content:center;} } /* ── E-4 末尾に「お問い合わせ帯」が無いページの下余白（2026-08-26・検品で発見）── .lw-contact は padding-bottom clamp(96px,11.6vw,176px) を持っており、 これが「最後の本文とフッターの金の線の間隔」を作っていた。帯を置かない お問い合わせ・404・送信完了の3ページだけ、その余白ごと失われていた。 実測（スクリーンショットの画素）＝帯があるページ 97〜168px に対し、 この3ページは 6〜9px。線が最後の一行に接して見える。 数値の検査（はみ出し0・横スクロール0・原稿との一致）には一切出ず、 画像を開いて初めて分かった。 帯があるページでは main の最後の子が .lw-contact なので、この指定は当たらない。 */ .lw-page main>.wrap:last-child{padding-bottom:clamp(96px,11.6vw,176px);} /* ══════════════════════════════════════════════════════════════════════ F. News / Insights の一覧・記事ページ（検討中の別案「暗い地の格式版」の 下層ページ追加分・2026-08-26 追記）。 🚨 写真は1枚も使わない（3件とも掲載許諾が未確認のため、原稿の image は無視）。 🚨 英字ラベル（01 PHONE のような節見出し）は News／Insights には付けない 決めごと＝見出しは既存の .lw-h2 をそのまま使い、.lw-h2-tag は使わない。 新しい色は作らず、既存の --text／--text-hi／--text-dim／--accent／--line と、 すでに .lw-sec-body a で使われている rgba(232,176,35,0.5)（＝--accentを 50%不透明度にしたもの）をそのまま使い回す。角丸は0。金は線と小さい文字にだけ使う。 ══════════════════════════════════════════════════════════════════════ */ /* ── F-1 リンクの共通の見た目（.lw-sec-body a と同じ意匠を使い回す） ── */ .lw-page .lw-nw-body h2 a, .lw-page .lw-art-back, .lw-page .lw-art-ext, .lw-page .lw-nw-ext{ color:var(--text-hi);text-decoration:none; border-bottom:1px solid rgba(232,176,35,0.5); transition:color .4s var(--ease),border-color .4s var(--ease); } /* 🚨 マウスを乗せた時の色は #F0C34E＝既存の .lw-sec-body a:hover（dark.css内に前から ある値）と同じにする。ここだけ var(--accent) にすると、同じページの中で リンクの光り方が2種類になる（新しい色ではなく、既にある色に揃えるための指定）。 */ .lw-page .lw-nw-body h2 a:hover, .lw-page .lw-art-back:hover, .lw-page .lw-art-ext:hover, .lw-page .lw-nw-ext:hover{color:#F0C34E;border-bottom-color:var(--accent);} /* ── F-2 お知らせ一覧（日付｜本文の2列。写真は置かない） ── */ .lw-page .lw-nw{margin-top:clamp(10px,1.2vw,18px);} .lw-page .lw-nw-item{ display:grid;grid-template-columns:132px minmax(0,1fr); gap:0 clamp(20px,2.8vw,40px); padding:clamp(26px,3vw,40px) 0; border-top:1px solid var(--line); } .lw-page .lw-nw-item:last-child{border-bottom:1px solid var(--line);} .lw-page .lw-nw-item time{ display:block;padding-top:2px; font-family:var(--font-en);font-size:13px;letter-spacing:0.06em;color:var(--accent); } /* 🚨 word-break:auto-phrase を付ける理由＝これが無いと幅390で 「壱岐市エンゲージメントパートナー協定」が「…パー／トナー…」と語の途中で 折れる（実物のスクリーンショットで確認・数値の検査には出ない）。 他の見出し（.lw-h2-jp・.lw-art-h1）にも同じ指定が入っており、揃えるための1行。 */ .lw-page .lw-nw-body h2{ font-family:var(--font-jp);font-size:16px;font-weight:400;letter-spacing:0.02em;line-height:1.9; word-break:auto-phrase; } .lw-page .lw-nw-body p{margin-top:10px;font-size:14px;line-height:2;letter-spacing:0.05em;color:var(--text-dim);} .lw-page .lw-nw-ext{display:inline-block;margin-top:12px;font-size:13px;} @media (max-width:900px){ .lw-page .lw-nw-item{grid-template-columns:minmax(0,1fr);gap:6px 0;} } /* ── F-3 記事ページのヒーロー（入れ物 .lw-fv はそのまま・中身だけ差し替え）。 巨大英字が無いぶん、空白が余らないよう高さの下限を外す（.lw-fv-art）。 ── */ .lw-page .lw-fv-art{min-height:auto;padding-bottom:clamp(40px,4.8vw,64px);} .lw-page .lw-art-date{ margin-top:clamp(18px,1.8vw,26px); font-family:var(--font-en);font-size:13px;letter-spacing:0.1em;color:var(--accent); } .lw-page .lw-art-h1{ margin-top:clamp(14px,1.6vw,22px); font-family:var(--font-jp);font-weight:400; font-size:clamp(30px,4.2vw,58px);line-height:1.5;letter-spacing:0.02em; color:var(--text-hi);word-break:auto-phrase; } /* ── F-4 下書きの印。小さい文字＋細い枠だけ（金は面に塗らない） ── */ .lw-page .lw-draft-badge{ display:inline-block; margin-top:clamp(14px,1.6vw,24px);margin-bottom:clamp(20px,2.4vw,28px); padding:6px 14px; font-family:var(--font-jp);font-size:12px;letter-spacing:0.05em;color:var(--accent); border:1px solid var(--accent); } /* ── F-5 記事内の引用（原稿の `>` ）。面は塗らず、左に金の細い線だけ。 ── */ .lw-page .lw-sec-body blockquote{ margin:0.4em 0 0;padding:0.1em 0 0.1em 22px; border-left:1px solid var(--accent); font-size:15px;line-height:2;letter-spacing:0.05em;color:var(--text-dim); } .lw-page .lw-sec-body>blockquote+p, .lw-page .lw-sec-body>p+blockquote{margin-top:1.7em;} @media (max-width:900px){ .lw-page .lw-art-h1{font-size:clamp(24px,7vw,32px);} } /* ══ G. 長い英単語のヒーロー（2026-08-26・検品で発見した右端切れの修正）══════ 🚨 .lw-h1-en の clamp(90px,18.4vw,265px) は「5〜8文字の語」で版面に収まるよう 決めた値（実測＝MEMBERS 7文字で 1078.8px／版面 1384px の78%）。 CONSULTING は10文字あり、同じ大きさだと約1560px＝版面を180pxはみ出して 右端で切れる。PRIVACY POLICY は間に空白があるので2行に折り返して切れない。 → 空白の無い長い語にだけ、この修飾クラスを足して小さくする。 倍率は 220/265＝0.83（10文字×0.58em＋字間0.01em×9 ≒ 5.7em が版面の92%に収まる大きさ）。 🚨 新しい語を足すときは文字数を数えて、8文字を超え空白が無いならこのクラスを付ける。 */ .lw-page .lw-h1-en-long{font-size:clamp(74px,15.3vw,220px);} @media (max-width:900px){ .lw-page .lw-h1-en-long{font-size:13vw;} } /* ══════════════════════════════════════════════════════════════════════ H. 記事ページの節見出し（2026-08-26 追記）。 🚨 記事ページの

は英字ラベル（.lw-h2-tag）も .lw-h2-jp も使わず、 日本語をそのまま入れている。そのため .lw-h2-jp に付いている word-break:auto-phrase が効かず、幅の狭い左の柱で 「受賞理由（主催者／コメント）」のように語の途中で折れていた。 共有の .lw-h2 は既に確定した他のページでも使っているため触らず、 記事ページの見出しにだけ付ける専用クラスにしている。 ══════════════════════════════════════════════════════════════════════ */ .lw-page .lw-h2-plain{word-break:auto-phrase;} /* ── H-2 記事の末尾のリンク（「出典を見る」「一覧に戻る」）──────────── 🚨 ここは class の無い

だったため .lw-p の上余白が当たらず、 幅390で本文の最終行にくっついて本文の続きに見えていた （スクリーンショットを開いて初めて分かった／数値の検査には出ない）。 横に並べ、行が折り返しても間隔が保たれるようにする。 */ .lw-page .lw-art-links{ display:flex;flex-wrap:wrap; gap:clamp(14px,1.6vw,22px) clamp(20px,2.4vw,32px); margin-top:clamp(40px,4.8vw,64px); } /* ── H-3 記事の節見出しの文字サイズ（2026-08-26 追記）──────────────── 🚨 auto-phrase を付けても、**1文節そのものが列より広い**と語の途中で折れる。 実測（canvas measureText・書体到着後）＝ 幅1440：「（主催者コメント）」220.32px ＞ 見出しの列 212.80px（+7.52 はみ出し） 幅 920：同じ文字列 183.60px ＞ 列 172.80px（+10.80 はみ出し） 幅1200・1000は収まっていた（-3.49 / -5.20）。 🚨 幅920は共有の clamp の**下限20pxに既に達している**ため、上限だけ下げても 直らない。上限と下限の両方を1段下げる必要がある。 記事の見出しは原稿（Markdown）の文言そのままで、長さを選べない。そのため 節見出し（英字ラベル付き・こちらは文言をこちらで決められる）とは別の値にする。 この値で収まるのは **1文節あたり全角9字まで**（22pxで212.80/22.44＝9.4字・ 18pxで172.80/18.36＝9.4字）。24pxのままだと8字までだった。 ※本文の列の位置（左448.8px・幅803.2px）は変わらない＝他のページと揃ったまま。 */ .lw-page .lw-h2-plain{font-size:clamp(18px,1.9vw,22px);}