/*!
* components.css — 共通コンポーネント
* ボタン / ヘッダー / フッター / フローティングCTA / パンくず / ページネーション / 写真プレースホルダー
*/
/* ============ 写真プレースホルダー（カンプ用・本番では画像に差替え）============ */
.ph {
position: relative;
background: repeating-linear-gradient(135deg, #F5EBD2, #F5EBD2 10px, #EFE0BE 10px, #EFE0BE 11px);
border: 2px dashed var(--ink2);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--font-display);
color: var(--ink2);
overflow: hidden;
flex-direction: column;
gap: 6px;
padding: 14px;
}
.ph::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(38, 36, 31, .12) 50%, transparent calc(50% + 0.5px));
}
.ph::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom left, transparent calc(50% - 0.5px), rgba(38, 36, 31, .12) 50%, transparent calc(50% + 0.5px));
}
.ph > * {
position: relative;
z-index: 1;
}
.ph .ph-icon { font-size: 28px; line-height: 1; }
.ph .ph-type {
display: inline-block;
background: var(--ink);
color: var(--paper);
font-size: 10px;
padding: 2px 8px;
border-radius: 3px;
letter-spacing: .05em;
}
.ph .ph-desc {
font-size: 12px;
color: var(--ink);
background: rgba(255, 255, 255, .92);
padding: 4px 10px;
border: 1.2px solid var(--ink2);
border-radius: 4px;
max-width: 90%;
line-height: 1.4;
}
/* ============ ボタン ============ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: var(--font-display);
font-size: var(--fs-sm);
padding: 9px 16px;
border: var(--bd-w) solid var(--ink);
box-shadow: 3px 3px 0 var(--ink);
background: var(--paper);
color: var(--ink);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: transform .15s, box-shadow .15s;
}
.btn:hover {
transform: translate(-1px, -1px);
box-shadow: 4px 4px 0 var(--ink);
text-decoration: none;
}
.btn:active {
transform: translate(1px, 1px);
box-shadow: 1px 1px 0 var(--ink);
}
/* 4 ボタン共通の色ルール（PC ヘッダー / スマホメニュー両方で統一）
line: 緑 / tel: アンバー / contact: 濃インク / primary: オレンジ
色被りを避けるため、お問い合わせは「フォーム送信系」の落ち着いた濃インクに */
.btn--line,
.btn.line {
background: var(--line-green);
color: #fff;
}
.btn--tel,
.btn.tel {
/* 電話相談ボタン：他の CTA（詳細を見る／検索／応募する＝オレンジ）と被らないよう
電話専用の温かいアンバー色（--tel-yellow #FFD25C）を採用。テキストは濃インクで視認性確保。 */
background: var(--tel-yellow);
color: var(--ink);
}
.btn--tel:hover,
.btn.tel:hover {
color: var(--ink);
}
.btn--contact,
.btn.contact {
/* お問い合わせ：電話アンバーと色被りしないよう、フォーム系の落ち着いた濃インクに変更。
クリーム文字で視認性を確保し、ヘッダー右側で「LINE 緑／電話 黄／お問い合わせ 黒」の
3 色クリアな対比を作る。*/
background: var(--ink);
color: var(--paper);
}
.btn--contact:hover,
.btn.contact:hover {
color: var(--paper);
}
/* フッター内ボタン共通：背景が黒（--ink）なので、ベース .btn の border(--ink) と
box-shadow(--ink) はアンチエイリアシングで微妙に縁取られて見えてしまう。
3 ボタン全て border / shadow を撤去し、padding で総寸法を維持する。 */
.site-footer .btn {
border: none;
padding: 11px 18px; /* base padding(9 16) + 撤去 border(2 2) ぶん */
box-shadow: none;
}
.site-footer .btn:hover {
box-shadow: none;
transform: translate(-1px, -1px);
}
/* フッターのお問い合わせ：ページ背景と同じクリーム色＋黒文字。
border / shadow 撤去は上の共通ルールで実施済み。色だけ個別指定。*/
.site-footer .btn.contact,
.site-footer .btn--contact {
background: var(--paper);
color: var(--ink);
}
.site-footer .btn.contact:hover,
.site-footer .btn--contact:hover {
color: var(--ink);
}
.btn--primary,
.btn.primary {
background: var(--accent);
color: #fff;
}
.btn--dark,
.btn.dark {
background: var(--ink);
color: var(--paper);
}
.btn--lg,
.btn.lg {
padding: 14px 32px;
font-size: var(--fs-body);
}
.btn--block,
.btn.block {
width: 100%;
}
/* ============ ヘッダー（ロゴ＋アクション・通常スクロール）============ */
.site-header {
background: var(--paper);
border-bottom: 1.5px solid var(--ink3);
}
.site-header__inner {
max-width: var(--container);
margin: 0 auto;
padding: 8px var(--gutter);
display: flex;
align-items: center;
gap: 12px;
}
.site-logo {
display: flex;
align-items: center;
gap: 2px; /* ロゴ画像と文字の間を最小化（PNG 余白分のスペース込み）*/
flex-shrink: 0;
text-decoration: none;
color: var(--ink);
}
.site-logo:hover {
text-decoration: none;
}
.site-logo__img {
/* ロゴ画像（円形枠付きで作成済みのため、背景・枠・影は付けない）
PNG 自体に上下左右の透明余白があるため、margin で寄せる */
width: 60px;
height: 60px;
display: block;
object-fit: contain;
flex-shrink: 0;
margin-right: -8px; /* 円の右側にある透明余白を詰める（文字が円のすぐ横に来る）*/
}
/* タグ自体が ![]()
の場合（site-logo--image 付き）は flex 内ではなくブロック画像 */
.site-logo--image {
display: inline-flex;
align-items: center;
}
.site-logo__name {
/* サイト全体のデザインフォント（Yusei Magic）に統一。
--font-display は内部で Hiragino を 3 番目に持つフォールバックチェーンなので、
iOS Safari で Yusei Magic の一部 katakana グリフが欠ける場合も Hiragino に
フォールバックして tofu □ にはならない。 */
font-family: var(--font-display);
font-size: 17px; /* 「工場求人ミツカルクン」が収まるよう 19→17 */
line-height: 1.1;
font-weight: 700;
white-space: nowrap; /* メニューに割り込まれないよう改行禁止 */
min-width: 0; /* flex 内で縮められるように */
}
.site-logo__name small {
display: block;
font-size: 10px;
color: var(--ink2);
font-family: var(--font-body);
margin-top: 2px;
white-space: nowrap;
}
.h-actions {
display: flex;
gap: 5px; /* 4 ボタンになって詰まらないよう gap 6→5 */
align-items: center;
margin-left: auto;
margin-right: -2px;
}
/* ヘッダー右側 4 ボタン（LINE/電話/問合せ/お気に入り）：コンパクトピル */
.h-actions .btn {
font-size: 13px; /* 小さすぎたので 13 に戻す */
padding: 8px 14px; /* 余白も少し増やして読みやすく */
box-shadow: 2px 2px 0 var(--ink);
gap: 5px;
}
.h-actions .btn:hover {
box-shadow: 3px 3px 0 var(--ink);
}
.h-actions .btn:active {
box-shadow: 1px 1px 0 var(--ink);
}
/* ============ ヘッダー内「初めての方へ」ショートカット（スマホ専用） ============ */
/* gnav タブ時の `.gnav__link--highlight` と同じ見た目に揃える：
黄色背景 + 太字 + ✦ オレンジマーク、黒縁/影なしのシンプルなタブ風 */
.header-firsttime {
display: none; /* デフォルト非表示、スマホ media query で表示 */
align-items: center;
gap: 3px;
margin-left: auto;
padding: 6px 10px;
background: var(--sticky);
color: var(--ink);
border: none;
border-radius: 8px;
font-family: var(--font-display);
font-size: 13px;
font-weight: bold;
text-decoration: none;
white-space: nowrap;
transition: background-color .2s;
}
.header-firsttime:hover {
background: var(--accent);
color: #fff;
text-decoration: none;
}
.header-firsttime:hover .header-firsttime__icon {
color: #fff;
}
.header-firsttime__icon {
color: var(--accent);
font-size: 0.9em;
}
/* ============================================================
* お気に入りアイコン（ヘッダー）
*
* PC：お問い合わせの右に btn 風の細身ピル。星 + 「お気に入り」+ 件数
* SP/中間サイズ：初めての方への右に縦並びカード型（アイコン上・ラベル下）
*
* 件数バッジ（.__count）は data-fav-count を JS が更新する
* ============================================================ */
/* ============================================================
* お気に入りアイコン（全画面共通の縦並びカード型）
*
* ・PC / SP / タブレット中間サイズ どこでも同じデザイン
* ・星アイコン上 + 「お気に入り」ラベル下 + 件数バッジ右上
* ・枠線・影なしのシンプルな見た目
* ・件数が変わると bounce アニメーションで「ピコン」と目立つ
* ============================================================ */
.header-fav {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
padding: 2px 4px;
min-width: 40px;
background: transparent;
border: none;
box-shadow: none;
font-family: var(--font-display);
color: var(--ink);
text-decoration: none;
position: relative;
margin-left: 4px; /* 「初めての方へ」など隣の要素との余白 */
}
.header-fav:hover { text-decoration: none; color: var(--ink); }
.header-fav__icon {
color: var(--accent);
font-size: 22px;
line-height: 1;
transition: transform .25s;
}
.header-fav__label {
font-size: 9px;
font-weight: bold;
white-space: nowrap;
margin-top: 2px;
}
.header-fav__count {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--accent);
color: #fff;
border: 1.5px solid var(--ink);
border-radius: 999px;
font-size: 11px;
font-weight: bold;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: transform .25s;
}
.header-fav__count.is-empty { display: none; }
/* 件数が増えた / 減った時の「ピコン」アニメーション。
JS が .is-pop クラスを付与 → CSS が pop 表現 → 数百 ms 後に JS が削除 */
@keyframes mk-fav-pop {
0% { transform: scale(1); }
30% { transform: scale(1.5) rotate(-6deg); }
60% { transform: scale(0.9) rotate(4deg); }
100% { transform: scale(1) rotate(0); }
}
@keyframes mk-fav-bounce {
0% { transform: scale(1); }
30% { transform: scale(1.4); }
60% { transform: scale(0.92); }
100% { transform: scale(1); }
}
.header-fav.is-pop .header-fav__icon { animation: mk-fav-pop .55s ease-out; }
.header-fav.is-pop .header-fav__count { animation: mk-fav-bounce .5s ease-out; }
/* ============ ハンバーガーボタン（スマホのみ表示） ============ */
.hamburger {
display: none; /* PC は非表示、スマホ用 media query で表示 */
flex-direction: column;
align-items: center;
gap: 2px;
margin-left: auto;
padding: 6px 10px;
background: var(--paper);
border: var(--bd-w) solid var(--ink);
border-radius: 8px;
cursor: pointer;
box-shadow: 2px 2px 0 var(--ink);
font-family: var(--font-display);
transition: transform .15s, box-shadow .15s;
}
.hamburger:active {
transform: translate(1px, 1px);
box-shadow: 1px 1px 0 var(--ink);
}
.hamburger__label {
font-size: 9px;
font-weight: bold;
letter-spacing: .08em;
color: var(--ink);
}
.hamburger__lines {
display: flex;
flex-direction: column;
gap: 3px;
width: 22px;
}
.hamburger__lines span {
display: block;
height: 2px;
background: var(--ink);
border-radius: 1px;
transition: transform .25s, opacity .25s;
}
/* メニュー開いた時：×印に変身 */
.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(1) {
transform: translateY(5px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(2) {
opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(3) {
transform: translateY(-5px) rotate(-45deg);
}
/* ============ モバイルメニュー（オーバーレイ） ============ */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 200;
visibility: hidden;
opacity: 0;
transition: opacity .25s ease, visibility 0s linear .25s;
}
.mobile-menu.is-open {
visibility: visible;
opacity: 1;
transition: opacity .25s ease;
}
.mobile-menu__overlay {
position: absolute;
inset: 0;
background: rgba(38, 36, 31, 0.5);
}
.mobile-menu__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(86%, 380px);
background: var(--paper);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX(100%);
transition: transform .3s cubic-bezier(.4, .0, .2, 1);
display: flex;
flex-direction: column;
}
.mobile-menu.is-open .mobile-menu__panel {
transform: translateX(0);
}
/* メニューヘッダー：ロゴ + 閉じるボタン */
.mobile-menu__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: var(--bd-w) solid var(--ink);
background: var(--paper2);
}
.mobile-menu__logo {
display: flex;
align-items: center;
gap: 2px; /* PC ヘッダーロゴと統一・PNG 余白を margin で詰める */
color: var(--ink);
text-decoration: none;
}
.mobile-menu__logo:hover { text-decoration: none; color: var(--ink); }
.mobile-menu__logo-icon {
width: 38px;
height: 38px;
background: var(--sticky);
border: var(--bd-w) solid var(--ink);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
/* ロゴ画像版（モバイルメニューヘッダー）：円形ロゴ画像をそのまま表示・装飾不要 */
.mobile-menu__logo-img {
width: 56px;
height: 56px;
display: block;
object-fit: contain;
margin-right: -7px; /* PNG 右側の透明余白を詰める（PC ヘッダー版と同じ仕組み）*/
}
.mobile-menu__logo-text {
font-family: var(--font-display);
font-size: 16px;
line-height: 1.1;
}
.mobile-menu__logo-text small {
display: block;
font-size: 9px;
color: var(--ink2);
font-family: var(--font-body);
margin-top: 2px;
}
.mobile-menu__close {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--paper);
border: var(--bd-w) solid var(--ink);
box-shadow: 2px 2px 0 var(--ink);
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
line-height: 1;
}
.mobile-menu__close:active {
transform: translate(1px, 1px);
box-shadow: 1px 1px 0 var(--ink);
}
/* CTAエリア：電話 + 派遣/LINE */
.mobile-menu__cta {
padding: 14px 16px 16px;
background: var(--paper2);
border-bottom: var(--bd-w) solid var(--ink);
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-menu__tel-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
/* padding を 14px → 11px に縮めて、ドロワー上部の占有を抑える */
padding: 11px 16px;
background: var(--tel-yellow);
color: var(--ink);
border: var(--bd-w) solid var(--ink);
border-radius: 999px;
font-family: var(--font-display);
font-size: 15px;
font-weight: bold;
box-shadow: 3px 3px 0 var(--ink);
text-decoration: none;
}
.mobile-menu__tel-btn:hover {
text-decoration: none;
color: var(--ink);
}
/* 主CTA：LINE 色（緑）。電話の黄色から LINE の緑に切り替え */
.mobile-menu__tel-btn--line {
background: var(--line-green);
color: #fff;
}
.mobile-menu__tel-btn--line:hover { color: #fff; }
.mobile-menu__cta-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mobile-menu__sub-btn {
display: flex;
/* アイコン横並びに変更（縦並びは縦幅が大きすぎたため） */
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
/* padding 14px → 9px に縮小（電話ボタンとのバランスも考慮） */
padding: 9px 10px;
background: var(--paper);
border: var(--bd-w) solid var(--ink);
border-radius: 999px;
font-family: var(--font-display);
font-size: 13px;
font-weight: bold;
box-shadow: 3px 3px 0 var(--ink);
color: var(--ink);
text-decoration: none;
text-align: center;
}
.mobile-menu__sub-btn:hover { text-decoration: none; color: var(--ink); }
/* アイコンサイズも 22px → 16px に縮小（横並びでバランス取れる大きさに） */
.mobile-menu__sub-btn-icon { font-size: 16px; }
.mobile-menu__sub-btn--line {
/* PC .btn.line と同じ LINE 公式色で統一 */
background: var(--line-green);
color: #fff;
}
.mobile-menu__sub-btn--line:hover { color: #fff; }
/* 電話サブ：旧 tel-btn と同じ黄色（主CTA を LINE に譲ったため、ここで電話色を残す）*/
.mobile-menu__sub-btn--tel {
background: var(--tel-yellow);
color: var(--ink);
}
.mobile-menu__sub-btn--tel:hover { color: var(--ink); }
/* 「お問い合わせ」は濃インク（PC .btn.contact と統一・電話アンバーと差別化）*/
.mobile-menu__sub-btn--apply {
background: var(--ink);
color: var(--paper);
}
.mobile-menu__sub-btn--apply:hover { color: var(--paper); }
/* ━━━ 便利ツール 専用枠（CTA と通常ナビの間）━━━
外枠は使わず、見出し＋黄色背景カードのみで目立たせる（フラット）。 */
.mobile-menu__tools {
margin: 14px 16px 18px;
}
.mobile-menu__tools-head {
font-family: var(--font-display);
font-size: 12px;
font-weight: bold;
color: var(--ink2, #5C5648);
margin-bottom: 6px;
letter-spacing: .04em;
}
.mobile-menu__tools-card {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 14px;
background: var(--sticky, #FFE98A); /* 一枚カードで黄色背景＝即目に入る */
border-radius: 8px;
text-decoration: none;
color: var(--ink, #26241F);
transition: filter .12s;
}
/* カードが2枚並ぶので間隔を空ける */
.mobile-menu__tools-card + .mobile-menu__tools-card { margin-top: 8px; }
/* ゲームは便利ツールと色を変えて、遊べるコンテンツだと一目で分かるようにする */
.mobile-menu__tools-card--game {
background: #FFDCB0;
box-shadow: inset 0 0 0 1.5px var(--accent, #FF8B3D);
}
.mobile-menu__tools-card:hover,
.mobile-menu__tools-card:active {
filter: brightness(.95);
color: var(--ink, #26241F);
text-decoration: none;
}
.mobile-menu__tools-card-ico {
font-size: 24px;
flex-shrink: 0;
}
.mobile-menu__tools-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mobile-menu__tools-card-title {
font-family: var(--font-display);
font-size: 14px;
font-weight: bold;
line-height: 1.3;
}
.mobile-menu__tools-card-desc {
font-size: 11px;
color: var(--ink2, #5C5648);
line-height: 1.4;
}
.mobile-menu__tools-card-arrow {
font-size: 20px;
color: var(--ink, #26241F);
font-weight: bold;
flex-shrink: 0;
}
/* ナビゲーション縦リスト */
.mobile-menu__nav {
flex: 1;
}
.mobile-menu__nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-menu__nav li {
border-bottom: 1.5px solid var(--ink3);
}
.mobile-menu__nav a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
color: var(--ink);
font-family: var(--font-display);
font-size: 15px;
text-decoration: none;
}
.mobile-menu__nav a:hover {
background: var(--paper2);
text-decoration: none;
color: var(--ink);
}
/* 現在ページのインジケータ：左にオレンジ太線 + 文字を太字 + 薄い背景。
PC ヘッダー gnav の下線と同等の役割を、リスト式のモバイルメニューでも表現。 */
.mobile-menu__nav-item.is-current > a {
border-left: 4px solid var(--accent);
background: var(--paper2);
font-weight: bold;
padding-left: 14px; /* 元の 18px から border 4px ぶん減らして文字位置を維持 */
}
.mobile-menu__nav-item.is-current > a:hover {
background: var(--paper2);
}
.mobile-menu__chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 16px;
font-family: var(--font-display);
line-height: 1;
}
/* スクロール固定（メニュー開放中は body の縦スクロール停止） */
body.has-mobile-menu-open {
overflow: hidden;
}
/* メニュー開放中はフローティングボタン（求人検索 / LINE・電話バー）を隠す
メニュー UI と被って邪魔になるのを防ぐ */
body.has-mobile-menu-open .float-cta,
body.has-mobile-menu-open .float-search {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
/* ============ グローバルナビ（タブ・sticky）============ */
.gnav {
position: sticky;
top: 0;
z-index: 100;
background: var(--paper);
border-bottom: var(--bd-w) solid var(--ink);
box-shadow: 0 4px 0 rgba(38, 36, 31, .06);
}
.gnav__inner {
max-width: var(--container);
margin: 0 auto;
padding: 14px var(--gutter);
display: flex;
align-items: center;
justify-content: center;
gap: 12px; /* 18px → 12px：項目8個でも余裕で収まる */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.gnav__inner::-webkit-scrollbar {
display: none;
}
.gnav a {
color: var(--ink);
font-family: var(--font-display);
font-size: 16px;
text-decoration: none;
padding: 8px 12px;
border-radius: 8px;
position: relative;
white-space: nowrap;
flex-shrink: 0;
transition: color .15s, background-color .2s, transform .15s;
}
/* ホバー時：背景塗りつぶしではなく、文字下にオレンジの下線を出すだけのシンプルな反応に。
is-current（現在ページ）と同じ下線スタイルだが、太字は付けないので区別できる。 */
.gnav a:hover {
text-decoration: underline;
text-decoration-color: var(--accent);
text-decoration-thickness: 3px;
text-underline-offset: 6px;
color: var(--ink);
background: transparent;
}
.gnav a:active {
transform: translateY(0);
}
/* 現在ページ判定：3 ルートで is-current を反映する（多重保険）：
* ① PHP fallback で を吐く
* ② wp_nav_menu 使用時は