Arrange

アレンジパーツ

htmlの子孫要素のどこかに.p-mvがあるとき、ヘッダーの背景が透明で、スクロールしたら背景色がつくようになる。

BMライブラリーパーツはこちら

BMパーツアレンジ：ol、ul

classなし

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

.--dots

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

.--decimal

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

.--checked .before-accent

.before-〇〇、.after-〇〇で疑似要素の色を変えられる。（例外あり。）

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

.--decimal .--circle

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

.--asterisk

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

.--line

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

BMパーツアレンジ：table

.lib-table__01

SP時立て並びになるので、SP時横スクロールで見せたくないときに使える。
ただし見出しセル1つのみかつtheadなしの時に使える。（縦並びになった時におかしくなる。）
.--evenつけると偶数行に背景色に--LGRYがつく
一番最初のthに.w-25を入れると幅が統一されるのでおすすめ。

.lib-table__02

SP時横スクロールになる。
デフォで横幅が統一されている。内容によって幅変える場合はstyle="table-layout: auto;"をつける。
.--evenつけると偶数行に背景色に--LGRYがつく

.--border（.--evenあり）

テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス

	テキストテキストテキストテキスト	テキストテキストテキストテキスト
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト

.--border-bottom（.--evenなし）

テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス

style="table-layout: auto;"あり

	テキストテキストテキストテキスト	テキストテキストテキストテキスト
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト

.--border-bottom-main（.--evenなし）

テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス

	テキストテキストテキストテキスト	テキストテキストテキストテキスト
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト

.--gry（.--evenあり）

style="table-layout: auto;"あり

	テキストテキストテキストテキスト	テキストテキストテキストテキスト
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキスト

.lib-table__03

プレーンなtable
.--paddingでカスタムCSSで余白入れられる（style="--cell-padding: .5em;"）
tableかtbodyにmargin-inline: calc(var(--cell-padding) * -1);で左右の端がそろう。

テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス
テキストテキストテキストテキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス

font-size

fs-5xs あのイーハトーヴォのなんちゃらかんちゃら。

fs-4xs あのイーハトーヴォのなんちゃらかんちゃら。

fs-3xs あのイーハトーヴォのなんちゃらかんちゃら。

fs-xxs あのイーハトーヴォのなんちゃらかんちゃら。

fs-xs あのイーハトーヴォのなんちゃらかんちゃら。

fs-sm あのイーハトーヴォのなんちゃらかんちゃら。

fs-base あのイーハトーヴォのなんちゃらかんちゃら。

fs-md あのイーハトーヴォのなんちゃらかんちゃら。

fs-lg あのイーハトーヴォのなんちゃらかんちゃら。

fs-xl あのイーハトーヴォのなんちゃらかんちゃら。

fs-xxl あのイーハトーヴォのなんちゃらかんちゃら。

fs-3xl あのイーハトーヴォのなんちゃらかんちゃら。

fs-4xl あのイーハトーヴォのなんちゃらかんちゃら。

fs-5xl あのイーハトーヴォのなんちゃらかんちゃら。

fs-6xl あのイーハトーヴォのなんちゃらかんちゃら。

fs-7xl あのイーハトーヴォのなんちゃらかんちゃら。

line-height

hl-xxs あのイーハトーヴォのなんちゃらかんちゃら。

hl-xs あのイーハトーヴォのなんちゃらかんちゃら。

hl-sm あのイーハトーヴォのなんちゃらかんちゃら。

hl-base あのイーハトーヴォのなんちゃらかんちゃら。

hl-md あのイーハトーヴォのなんちゃらかんちゃら。

hl-lg あのイーハトーヴォのなんちゃらかんちゃら。

hl-xl あのイーハトーヴォのなんちゃらかんちゃら。

タイポグラフィ

.vertical-rl

あのイーハトーヴォの
なんちゃらかんちゃら。

.text-hukuro / .text-hukuro-wht

あのイーハトーヴォのなんちゃらかんちゃら。

.text-stroke / .text-stroke-wht

あのイーハトーヴォのなんちゃらかんちゃら。

.text-shadow / .text-shadow-wht

あのイーハトーヴォのなんちゃらかんちゃら。

.decoration-break

あのイーハトーヴォの
なんちゃらかんちゃら。

mark

あのイーハトーヴォのなんちゃらかんちゃら。

.text-grad

あのイーハトーヴォのなんちゃらかんちゃら。

.u-aspect

CSS変数で特定のアスペクト比にできる。またブレークポイントごとにアスペクト比を変えられる。

class="thumb _w-100 u-aspect" style="--aspect: 2/3; --aspect-sm: 3/4; --aspect-md: 1/1; --aspect-lg: 16/9; --aspect-xl: 21/9; --aspect-xxl: 2.51/1;"

.u-spacing

u-spacing-2_5

u-spacing-5

u-spacing-10

u-spacing-15

u-spacing-20

u-spacing-30

u-spacing-40

u-spacing-50

u-spacing-60

u-spacing-70

u-spacing-80

CSS変数で特定の余白にできる。またブレークポイントごとにアスペクト比を変えられる。

class="u-spacing" style="--spacing: var(--s--10); --spacing-sm: var(--s--20); --spacing-md: var(--s--30); --spacing-lg: var(--s--40); --spacing-xl: var(--s--50); --spacing-xxl: var(--s--60);"

変数で--s-2_5（2px）～--s-80（272px）まで指定されているので、何か大きさを指定するときはこの変数使って指定するといい感じかも。

.u-rounded

CSS変数で特定の大きさの角丸にできる。またブレークポイントごとに角丸の大きさを変えられる。

class="thumb _w-100 u-rounded" style="--round: .625rem; --round-sm: 1rem; --round-md: 1.5rem; --round-lg: 2rem; --round-xl: 3rem; --round-xxl: calc(infinity * 1rem);"

.u-l-over-50vw-lg .u-r-over-50vw-lg

2カラムのうち片方をコンテンツ幅からはみ出させる。

はみ出させたい側の.colにつける。
横幅の計算の都合上、基本gx-0にする。（.col同士の余白は.gx-〇で調整せず、.p-〇で調整する。）
各ブレークポイントごとにあり。（.u-l-over-50vw-md .u-r-over-50vw-xxlとか。）

キャプション

タイトルタイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト

テキストが入ります

キャプション

タイトルタイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト

テキストが入ります

.c-icon / .c-icon-text

アイコンフォントや画像とテキストのレイアウト。

.c-icon

デフォでアスペクト比1/1、object-fit: contain;がつく。（.--coverでobject-fit: cover;にできる。）
ブレークポイント毎にアイコンのサイズを指定できる。

.c-icon-text

.c-iconとテキストをいい感じに並べる。
.--r、.--lでアイコンを端に配置する。
余白は.gap-〇で調整する。

c-icon-text

c-icon-text --r

c-icon-text --l

c-icon --cover

c-icon-text --r

c-icon-text --l

class="c-icon --cover" style="--icon-size: 3em; --icon-size-sm: 4em; --icon-size-md: 5em; --icon-size-lg: 6em; --icon-size-xl-: 7em; --icon-size-xxl: 8em;"

レイアウト

キャプション

.l-overlap

z-indexで重ね順を指定。
.thumbに.z-0、
.lib-card__txtareaに.z-1

キャプション

.l-overlap

BMの管理画面ではこう見える。

キャプション

.l-center

上下左右中央

キャプション

.l-v-center

上下中央

.p-bg

背景に画像や図形を設定するときに必要なCSSが入る。

background-size: cover;、background-position: center;、background-repeat: no-repeat;が入ってる。background-imageを指定するだけでいい。
position: relative;、z-index: 1;が入ってるので、疑似要素や要素をposition: absolute;にして配置できる。
できればimgタグをposition: absolute;にするほうが、BMの管理画面で差し替えやすい。
疑似要素（::before、::after）には、position: absolute;、inset: 0;、z-index: -1;など必要なプロパティが入っている。
各色（--MAIN、--LMAIN、--ACC、--LACC、--OTH、--LOTH、--DEF、--GRY、--LGRY、--DGRY、--WHT、--bl、--gred-01～--grad-03-rev）のフィルターがかけられる。
imgタグをposition: absolute;にしてフィルターをかける場合は、.--imgもつける。（疑似要素がz-index: 1;になってフィルターが画像の上にくるようになる。）
フィルターの濃さは、CSSカスタム変数で調整できる。（--bg-opacity: 0.3;がデフォ。style="--bg-opacty: 0.5;"のようにstyle属性をつけて上書きする。）
乗算にする場合は、.--multiplyをつける。（style="--bg-opacty: 1;"がおすすめ。）
ぼかしをかけるときは、.--blurをつける。濃さの管理は--blur: 0.5rem;（.thumbがfont-size: 0;になっているので、remで指定するのがおすすめ。）

class="p-bg --img --bl" style="--bg-opacity: 0.5;"

タイトル

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト

詳細を見る

class="p-bg --img --wh" style="--bg-opacity: 0.5;"

タイトル

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト

詳細を見る

class="p-bg --img --main" style="--bg-opacity: 0.5;"

タイトル

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト

詳細を見る

class="p-bg --img --main --multiply" style="--bg-opacity: 1;"

タイトル

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト

詳細を見る

class="p-bg --img --accent --multiply" style="--bg-opacity: 1;"

タイトル

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト

詳細を見る

class="p-bg --img --other --multiply" style="--bg-opacity: 1;"

タイトル

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト

詳細を見る

class="p-bg --img --grad-01 --multiply" style="--bg-opacity: 1;"

タイトル

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト

詳細を見る

class="p-bg --img --grad-03-rev --multiply" style="--bg-opacity: 1;"

タイトル

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト

詳細を見る

class="p-bg --img --grad-02-rev --blur" style="--bg-opacity: .5; --blur: .75rem;"

タイトル

テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト

詳細を見る

.c-hover

他アレンジパーツ

キャプション

上下スライダー（CSS）

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキスト

text loop animation

テキストループアニメーション（CSS）
text loop animation

テキストループアニメーション（CSS）

Change
Challenge
Create

画像ループアニメーション（CSS）

loading="eager"つけたほうがいい。（画像が出てこない状態にならない。）
スライドの枚数 ÷ 表示させたい枚数 × 100vw をCSSで指定する。

採用情報を見る

People

人を知る

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

未経験から長く安心して働ける、
丁寧なものづくりの職場

2017年入社制御組立部

M・Nさん

人間関係の良さと
自分のペースで働ける環境が気に入っています

2016年入社事務部

S・Kさん

周囲と支え合いながら、
高い技術と思いやりを未来へつなぐ会社

2021年入社制御基盤部

Y・Yさん

お客様の生産スケジュールに
貢献できた瞬間が大きな喜びに

2010年入社サービス部

I・Mさん

人を知る

施工までの流れ

Flow

Step1

施工のお問い合わせ

まずはお気軽に、フォームから
お問い合わせください。
施工内容を確認させていただきます。

Step2

お見積り提示

ご要望に適した製品や目的等を
検討した上でお見積りを提示致します

Step3

ご契約

希望内容の確認をさせていただいた上、
契約とさせていただきます。

※入居中の場合、現地調査をさせていただいた上で
最終見積もりを提示し、問題ない場合契約となります。

Step4

入金の確認

施工日時や詳細を確定する前に
お振込みの確認をさせていただきます。

Step5

日時確定

施工日時や内容の確定、
当日の流れや注意事項の確認を
させていただきます。

Step6

施工・納品

立会いにて、施工箇所の確認を
させていただきます。
作業中は外出いただいても構いません。
問題ない場合対応完了となります。

ディスカッション

グループの中には、食品容器を作っているメーカーがあります。紙容器とアルミ容器の両方を一貫して作っているメーカーは多くありません。技術力の高さが優位性になっていると感じますね。

電子材料の分野でも、グループの技術力は高く評価されています。特にコンデンサー用の電極材料は、容量や耐熱性などの性能面でお客様の製品づくりに貢献できていると感じます。また毎年のように新しい材料が生まれていて、営業と開発の担当者が連携しながら市場性を検討しています。スピード感のある動きもグループ全体の強さにつながっていると思います。

名前そのものに信頼がありますよね。仕入れ先からの信用も厚く、取引もしやすい。営業の立場にある私にとっても心強いです。

そうですね。グループ全体に安定した基盤があることで、取引先との関係も築きやすいですし、新しい素材の提案もスムーズに進められます。

こんなところに Pt1

Location

SP時もPC時も図の上に配置するタイプ。

配置するものが画像など、親要素や画面幅の大きさによって可変する場合はこちらのタイプ。

こんなところに Pt2

Location

SP時に図の下にボタンが並ぶタイプ。

図の上にテキストを配置すると、SP時に文字サイズが大きくなり崩れるため、下に並べる。

歩道橋

01

歩道橋

街中に建つ歩道橋は、常に雨風にさらされています。
橋の主要な構造材だけでなく、階段や手すりといった細部にもめっき加工が施されています。
これにより、錆びによる強度低下を防ぎ、私たちが安全に利用できる状態を保っています。
人々の生活動線を支える、身近で重要な事例です。
鉄塔

02

鉄塔

鉄塔は、山間部や海岸沿いなど、非常に厳しい自然環境の中に建っています。
これらの高所に設置される巨大な構造物が錆びて倒壊すれば、電力供給がストップするなど社会的な影響は甚大です。
溶融亜鉛めっきは、塗替えが困難な鉄塔に長期的な防錆性能を与え、安定した電力ネットワークを維持しています。
ビーム

03

ビーム

線路脇の信号機や電柱、電車の架線（パンタグラフ）を支える梁（ビーム）にも、めっき技術が不可欠です。
電車の運行は秒単位の正確さが求められるため、設備の故障は許されません。
防食性に優れためっきは、重要な鉄道インフラの信頼性を高め、毎日の定時運行を影から支えています。
ガードレール

04

ガードレール

毎日、車や風雨にさらされるガードレール。
もし錆びてしまうと、景観を損なうだけでなく、衝突時の強度が低下し、人命に関わる危険性があります。
亜鉛めっき（溶融亜鉛めっきなど）を施すことで、過酷な環境下でも長期間にわたり、美観と安全性を維持しています。
私たちの日々の安心を、めっき技術が支えています。
道路

05

道路

私たちが毎日利用する道路の下には、見えないところで多くの鉄製品が使われています。
たとえば、道路を支える側溝の蓋やマンホール、あるいはトンネルの鉄骨などです。
これらは雨水や泥、振動に常にさらされます。
耐久性と防食性を高めるためのめっき加工は、日本の道路インフラを強固に保つ上で欠かせない技術です。
建物

06

建物

一般の建物でも、見えないところにめっき加工が施された鉄骨やボルトが数多く使用されています。
例えば、工場の屋根や壁、ビルの空調設備などです。
特に結露や湿気が多い場所で、めっきは建築物の寿命を延ばし、安全性を保ちます。
安心できる空間づくりに、めっきは貢献しているのです。
橋梁

07

橋梁

橋梁は、河川や海の上など、特に湿度が高く、塩害の影響を受けやすい場所にあります。
橋梁の構造部材が錆びてしまうと、大規模な補修が必要となり、通行止めなど大きな影響が出ます。
非常に厚い溶融亜鉛めっきや、耐候性の高い特殊なめっき処理により、何十年もの間、安全な交通を確保し続けています。