@charset "UTF-8"; /* ========================================================= 青谷工業 採用ページ 独自スタイル （common/css/common.css の後に読み込む＝上書きする前提） ========================================================= */ /* ===== 1. デザイン変数 ===== */ :root{ --accent: #00afaf; --accent-dark: #068a8a; --accent-light: #e5f4f4; --ink: #222222; /* インタビュー見出し帯などの濃色 */ --text: #1f2727; --muted: #5c6a6a; --line: #d9e6e6; /* Adobe Fonts：DNP 秀英角ゴシック金 Std（M=500 / B=600） */ --font-jp: "dnp-shuei-gothic-kin-std", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; --container: 1120px; --container-narrow: 760px; } /* ===== 2. 共通の上書き ===== */ body{ font-family: var(--font-jp); color: var(--text); font-size: 16px; font-weight: 500; /* 本文＝M */ line-height: 1.9; -webkit-font-smoothing: antialiased; } .rc img{ width: 100%; height: auto; display: block; } .rc{ overflow: hidden; } /* overflow-xだけ指定すると仕様上overflow-yが自動でautoになり、 意図しない二重スクロールバーの原因になるため、両軸hiddenにする */ /* ヘッダーのロゴ（親サイト共通CSSの幅指定をそのまま使う） */ .logo a{ display: block; } /* ===== 3. 汎用パーツ ===== */ .rc-container{ width: 92%; max-width: var(--container); margin-inline: auto; } .rc-container--narrow{ max-width: var(--container-narrow); } .section{ padding: 64px 0; } .section--gray{ background: var(--accent-light); } .section__head{ text-align: center; margin-bottom: 40px; } .section__title{ font-size: clamp(22px, 5.2vw, 34px); font-weight: 600; /* 見出し＝B */ line-height: 1.5; } /* 見出し下の破線 */ .section__title--dotted{ display: inline-block; padding-bottom: 14px; position: relative; } .section__title--dotted::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 2px dashed var(--accent); } .section__desc{ margin-top: 18px; line-height: 1.9; font-size: 15px; } .sp-only{ display: none; } /* 「TOP」はSPメニューにだけ残す（PCはヘッダーが常に見えているわけではなく、 固定表示にもならないため、そこにいる状態でしか押せず意味をなさない）。 .gnav ul li{display:inline-block}（PC専用）より詳細度を上げて確実に上書きする。 */ #gnav .gnavList li.gnav-sp-only{ display: none; } /* 外部サイトへのリンク：下線＋右斜め上矢印で外部リンクだとわかるようにする。 PC/SPで自体のdisplay（inline-block／block）を変えたくないので、 中に入れたspanだけをinline-flexにして文字にぴったり沿った下線と矢印にする。 */ .gnavList a.ext-link span{ display: inline-flex; align-items: center; gap: 3px; border-bottom: 1px solid currentColor; padding-bottom: 2px; line-height: 1.2; } .gnavList a.ext-link span::after{ content: "↗"; font-size: .85em; } /* ===== 4. ヒーロー ===== 構成は「完成済みメイン画像1枚」＋「コピー帯2本を重ねる」だけ（01準拠）。 画像は分割・加工せず、そのまま1枚で使用。 */ .hero{ padding-top: 24px; overflow: hidden; } /* 下からスライドインする.hero__frameが、アニメーション中だけ一時的にスクロール領域を広げてしまうのを防ぐ */ .hero .rc-container{ width: 100%; max-width: none; padding-inline: 0; } .hero__frame{ position: relative; width: 100%; max-width: 1500px; margin-inline: auto; } /* メイン画像：完成素材をそのまま。比率維持・トリミングなし。左右に少し余白 */ .hero .hero__img{ display: block; width: 94%; height: auto; aspect-ratio: 1336 / 851; /* SPでは下の @media で hero-sp.jpg の比率に上書き */ margin: 0 auto; border-radius: 4%; /* px固定だとPC(横幅大)とSP(横幅小)でアールの見た目の大きさが揃わないため、%指定で画像サイズに比例させる */ } /* コピー帯：画像の上に重ねる。左端は枠の左端（＝画面左）まで、右端はSVG形状の斜めカット。 位置は画像のやや下寄り、左寄せ、2本の間に余白 */ .hero__catch{ position: absolute; left: 0; bottom: 12%; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: clamp(210px, 35%, 540px); } .hero__catch img{ width: 100%; height: auto; display: block; } .hero__catch img:last-child{ width: 89.7%; } /* 「ここから始めよう。」は少し短い */ .hero__catch--sp{ display: none; } /* SP用の縦帯は SP のみ表示 */ /* ===== 5. リード文 ===== */ .lead{ text-align: center; padding: 56px 0 0; } /* 下側paddingは0にし、ノウハウとの余白はknowhow側のpadding-topだけで作る（ヒーロー→リードと同じ幅に揃える） */ .lead__title{ color: var(--accent); font-weight: 600; font-size: clamp(21px, 5vw, 30px); margin-bottom: .9em; } .lead__text{ line-height: 2.1; font-size: 15px; } /* ===== 6. ノウハウ ===== */ #knowhow{ padding-top: 40px; } /* リード文からの余白をヒーロー→リードと同じ幅にする（.section の64pxを上書き。line-height分を差し引いた実測値） */ .knowhow .section__head{ margin-bottom: 48px; } .khblock{ display: flex; flex-direction: column; gap: 20px; margin-bottom: 44px; } .khblock:last-child{ margin-bottom: 0; } .khblock__body{ flex: 1; min-width: 0; } /* アイコンとサブコピーを横並び＋下線 */ .khblock__head{ display: flex; align-items: center; gap: 14px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--accent); } .khblock__icon{ margin: 0; flex-shrink: 0; } .khblock__icon img{ width: 40px; height: auto; } .khblock__title{ color: var(--accent); font-weight: 600; font-size: clamp(17px, 4.2vw, 22px); line-height: 1.45; margin: 0; } .khblock__text{ line-height: 2; font-size: 15px; } .khblock__text p{ margin: 0 0 1.4em; } .khblock__text p:last-child{ margin-bottom: 0; } /* 写真：スマホは素直に縦積み（元画像の比率のまま・切り抜かない） */ .khblock__photos{ display: flex; flex-direction: column; gap: 10px; } .khblock__photos .ph{ width: 100%; height: auto; display: block; } /* ===== 7. 業務紹介 ===== ベース（〜1023px・スマホ／タブレット）：円環グラフィック＋6アイコンを縦一列に。 800px以上は下の @media (min-width: 800px) で「円環＋6アイコンの固定図解」に切り替わる。 サブタイトルと内容の間、セクション終わりの余白は他セクションより詰めて30pxに固定。 */ .work.section{ padding-bottom: 30px; } .work .section__head{ margin-bottom: 30px; } .work__circle{ margin: 0 auto 32px; max-width: 240px; } .work__circle img{ width: 100%; height: auto; } .work__list{ display: flex; flex-direction: column; gap: 34px; } .work__item{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } .work__photo{ width: 150px; } .work__photo img{ width: 100%; height: auto; } /* 円形＋外周の色枠は素材側に含まれる */ .work__name{ display: inline-block; color: #333; font-weight: 600; font-size: 16pt; padding-bottom: 7px; border-bottom: 2px dotted var(--seg, var(--accent)); margin-bottom: 10px; } .work__text{ font-size: 8pt; line-height: 1.9; max-width: 22em; margin-inline: auto; } .work__text br{ display: none; } /* PC放射レイアウト以外では自然折り返し */ /* 業務名まわりの点線色（各セグメントの色） */ .work__item--r:nth-of-type(1){ --seg: #7c9eca; } /* レーザー加工 */ .work__item--r:nth-of-type(2){ --seg: #80c790; } /* 板金加工 */ .work__item--r:nth-of-type(3){ --seg: #de8b73; } /* プレス加工 */ .work__item--l:nth-of-type(4){ --seg: #e1c277; } /* パイプ加工 */ .work__item--l:nth-of-type(5){ --seg: #e39cd9; } /* 切削加工 */ .work__item--l:nth-of-type(6){ --seg: #8080ba; } /* 溶接加工 */ /* ===== 8. 先輩社員インタビュー ===== */ .iv-list{ display: grid; gap: 26px; } .iv{ position: relative; background: #fff; border: 1px solid var(--accent); padding-bottom: 72px; /* 下部の「開閉バー」ぶんを確保（写真の高さを変えない） */ } .iv__head{ display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; /* スマホでタップした瞬間に出る灰色〜黒のハイライトを消す */ } /* 写真：LP・展開時ともに同じ大きさを保つ（aspect-ratio 固定） */ .iv__photo{ position: relative; flex-shrink: 0; } .iv__photo > img{ width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: left center; display: block; } /* 幅が縮む時に右側から削れるよう、写真の左端を基準にする */ /* 役職・氏名・勤続年数：写真の右側にそろえて、やや上・帯は大きめ */ .iv__tag{ position: absolute; right: 0; bottom: 24%; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.5; text-align: right; padding: 12px 22px; } .iv__tag em{ display: block; font-style: normal; font-weight: 500; font-size: 12px; margin-top: 3px; } .iv__summary{ display: flex; flex-direction: column; justify-content: center; padding: 22px; gap: 12px; } .iv__title{ color: var(--accent); font-weight: 600; font-size: clamp(17px, 3.8vw, 21px); line-height: 1.6; } .iv__excerpt{ color: var(--text); font-size: 13px; line-height: 1.95; } .iv__more{ position: absolute; left: 0; right: 0; bottom: 0; height: 72px; display: flex; align-items: flex-start; justify-content: center; padding-top: 16px; background: var(--accent-light); color: var(--accent-dark); font-size: 13px; font-weight: 600; } /* 二重の山形（閉：下向き ▽▽ ／開：上向き △△） */ .iv__more::before, .iv__more::after{ content: ""; position: absolute; left: 50%; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateX(-50%) rotate(45deg); } .iv__more::before{ bottom: 22px; } .iv__more::after{ bottom: 13px; } .iv.is-open .iv__more{ font-size: 0; } .iv.is-open .iv__more::before{ bottom: 13px; transform: translateX(-50%) rotate(-135deg); } .iv.is-open .iv__more::after{ bottom: 22px; transform: translateX(-50%) rotate(-135deg); } /* パネル（サクッと開閉：フェードなし） */ .iv__panel{ padding: 24px 22px 44px; } /* ボタン（上:8→24px）・閉じるボタン（下:30→44px）と本文の間の余白をSPで広げる */ .iv__panel[hidden]{ display: none; } /* 展開後：写真1枚＋質問2つの「帯」を積み重ねる。 SPは常に「質問2つ → 写真1枚」の順（写真が2枚続かないように） */ .iv__band{ display: flex; flex-direction: column; } .iv__band--pq{ flex-direction: column-reverse; } .iv__qgroup{ display: block; } .iv__qa{ margin: 26px 0; } .iv__qa--full{ margin: 26px 0 0; } /* 質問の帯は文の長さに合わせる（全幅にしない） */ .iv__q{ display: inline-block; max-width: 100%; align-self: flex-start; background: #ededed; color: var(--text); font-weight: 600; font-size: 15px; line-height: 1.5; padding: 10px 18px; border-radius: 6px; margin: 0 0 14px; } .iv__qa p{ font-size: 14px; line-height: 2; margin: 0 0 1em; padding-left: 18px; } .iv__qa p:last-child{ margin-bottom: 0; } /* 詳細内の写真：角丸＋ずれ影は画像素材に含まれるため、CSSでは加工しない */ .iv__pic{ position: relative; margin: 22px 0; } .iv__pic img{ display: block; width: 100%; height: auto; } /* ===== 9. 求人について ===== */ .reqtable{ width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); box-sizing: border-box; } .reqtable th, .reqtable td{ box-sizing: border-box; text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.9; overflow-wrap: break-word; } .reqtable tr:last-child th, .reqtable tr:last-child td{ border-bottom: 0; } .reqtable th{ width: 130px; white-space: nowrap; background: var(--accent-light); color: var(--accent-dark); font-weight: 600; } .jobsites{ margin-top: 40px; text-align: center; } .jobsites__lead{ font-weight: 600; margin-bottom: 16px; } .jobsites__list{ display: flex; flex-direction: column; align-items: center; gap: 12px; } .jobsites__btn{ display: flex; align-items: center; justify-content: center; width: auto; min-width: 140px; max-width: 100%; padding: 13px 22px; border-radius: 999px; background: var(--accent); border: 2px solid var(--accent); color: #fff; font-weight: 600; font-size: 16px; letter-spacing: .06em; transition: background-color .25s ease, color .25s ease; } /* マウスオーバー：下地色→白背景＋枠線＋文字色の反転（リンク未設定のボタンも同じ動きにする）。 hover:hover でマウス操作の端末に限定し、スマホのタップ後に反転表示が 残り続ける（sticky hover）のを防ぐ＝タップを離せばPCと同じく元に戻る。 */ @media (hover: hover){ .jobsites__btn:hover{ background: #fff; color: var(--accent); } } /* URL未設定のボタンも、リンク設定済みのIndeedと同じ見た目（teal）で表示する。 aria-disabled属性自体はアクセシビリティ上残すが、グレーアウトは行わない。 */ .jobsites__btn[aria-disabled="true"]{ cursor: default; } /* ===== 10. フッター ===== */ #footer{ background: var(--accent-light); } #footer .copyright{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 34px 20px; } #footer .copyright p{ margin: 0; width: auto; } /* common.cssの .copyright p{width:24%} を打ち消す（意図しない幅制限でロゴがはみ出していたため） */ .flogo{ display: inline-block; height: 24px; } /* PCのフッターロゴを1.5倍に拡大（16px→24px） */ .flogo__img{ display: block; width: auto; height: 100%; } #footer .copyright small{ display: block; font-size: 12px; color: var(--muted); min-width: 0; overflow-wrap: break-word; } /* ========================================================= 11. PC（751px 以上／親サイトと統一） ========================================================= */ @media print, screen and (min-width: 751px){ .section{ padding: 96px 0; } .section__head{ margin-bottom: 56px; } .section__desc{ font-size: 16px; } /* ヒーロー（PC）：画像はそのまま1枚、帯2本を左下寄りに重ねる（01準拠） */ .hero{ padding-top: 32px; } .hero__catch{ left: 0; bottom: 14%; width: min(35%, 540px); gap: 18px; } .lead{ padding: 88px 0 0; } /* 下側paddingは0にし、ノウハウとの余白はknowhow側のpadding-topだけで作る */ .lead__text{ font-size: 16px; } #knowhow{ padding-top: 68px; } /* リード文からの余白をヒーロー→リードと同じ幅にする（line-height分を差し引いた実測値） */ /* ノウハウ（PC）：写真コラージュ＋テキストを左右に交互。 写真は列の端まで広げ、大小・上下ずらし・重なりでリズムをつける（PDF準拠）。 全体は3枚のカードではなく、1本の縦長ビジュアルとして連続させる。 */ .knowhow .section__head{ margin-bottom: 60px; } .khblock{ flex-direction: row; align-items: center; /* 写真群に対してテキストを上下中央ぞろえ（インタビューページと同様） */ justify-content: space-between; gap: 5%; margin-bottom: 20px; } .khblock--reverse{ flex-direction: row-reverse; } .khblock__body{ flex: 0 0 39%; } .khblock__text{ font-size: 15px; } /* コラージュ本体。写真は元画像の比率のまま（トリミング・拡大なし）。 幅だけ指定し、高さは自動。位置は絶対配置でずらす。 */ .khblock__photos{ flex: 0 0 54%; position: relative; display: block; } .khblock__photos .ph{ position: absolute; height: auto; } /* object-fit なし＝切り抜かない */ /* ① 未経験からでもプロになれる：内側(左)に中2枚を縦積み／外側(右)に縦長を少し重ねる。 デザインPDF（260902_青谷工業さまサイトデザイン.pdf）から実測した比率。 */ .khblock--a .khblock__photos{ flex-basis: 46%; aspect-ratio: 100 / 107; } .khblock--a .ph1{ width: 50%; left: -14%; top: 8%; z-index: 1; } /* 教育を受ける社員（左に寄せる） */ .khblock--a .ph3{ width: 50%; left: -14%; bottom: 0; z-index: 1; } /* 加工作業をする社員（左に寄せる） */ .khblock--a .ph2{ width: 60%; right: 0; top: 0; z-index: 2; } /* 図面を確認する社員（縦長・30%拡大） */ /* ② 社内一貫生産：打ち合わせ写真(2人が向かい合う)を前面に少しはみ出して重ねる。 工場の写真は打ち合わせ写真と一部重なる位置に（全面ではない）。デザインPDFから実測。 */ .khblock--b .khblock__photos{ aspect-ratio: 100 / 80; } .khblock--b .ph1{ width: 64%; left: -4%; top: 2%; z-index: 2; } /* 打ち合わせをする社員 */ .khblock--b .ph2{ width: 36%; right: 0; top: 0; z-index: 1; } /* 部品を扱う社員（棚） */ .khblock--b .ph3{ width: 42%; left: 46%; bottom: 0; z-index: 3; } /* 工場の様子（最前面） */ /* ③ 技術はひとつずつ：縦長を左、右に2枚を縦積み。左の高さは右2枚の合計に位置を合わせる */ .khblock--c .khblock__photos{ aspect-ratio: 100 / 110.2; } .khblock--c .ph1{ width: 52%; left: -5%; top: 0; z-index: 1; } /* 溶接作業（縦長・左に寄せて右2枚と余白） */ .khblock--c .ph2{ width: 50%; right: 0; top: 0; z-index: 1; transform: translateY(-20px); } /* ライン作業（左より20px上へ） */ .khblock--c .ph3{ width: 50%; right: 0; bottom: 0; z-index: 1; transform: translateY(-40px); } /* 切削作業（さらに20px上へ） */ /* ============================================================ 業務紹介（PC・800px以上） ------------------------------------------------------------ 「中央の円環＋周囲6アイコン」は1枚の固定図解として扱う。 .work__diagram をラッパーとし、円環・6アイコンはすべてその中で position: absolute ＋ 固定の left / top（%）で配置する。 ラッパーは aspect-ratio で縦横比を固定し、width は 「1440px基準（=1120px）を上限に、それ未満は画面幅なりに縮む」だけ。 → 個々のアイコンを画面幅で再配置することは一切せず、 図解全体（円環＋6アイコン＋文章）が同じ比率で拡大縮小するだけになる （800px〜1440pxのどの幅でも構図は同じ。縮むのは画像・文字のサイズのみ）。 800px未満はこのブロックが適用されず、上のスマホ用縦並びに切り替わる。 ============================================================ */ @media (min-width: 800px){ .work__diagram{ position: relative; width: min(1120px, 100%); aspect-ratio: 1120 / 630; margin-inline: auto; container-type: inline-size; /* 文字サイズもラッパー幅に連動させるため */ font-size: max(8px, 1.15cqw); /* 800px幅でも早期に下限へ張り付かないよう、文字も一緒に縮む */ } .work__list{ display: contents; } /*