/*
Theme Name: Shokusai Foods v2
Theme URI: https://shokusaifoods.eiti.jp/
Author: 大日本電子情報技研
Description: 株式会社 食彩フーズ向け、採用を第一導線にしたWordPressテーマv2。
Version: 2.0.0-draft.7
Text Domain: shokusai-foods
*/

:root {
  --sf-blue: #0b4f8a;
  --sf-blue-dark: #07385f;
  --sf-sky: #edf6fc;
  --sf-red: #d8463a;
  --sf-ink: #17212b;
  --sf-muted: #65707c;
  --sf-white: #fff;
  --sf-line: #dbe4ea;
  --sf-radius: 22px;
  --sf-shadow: 0 18px 50px rgba(10, 48, 79, .12);
  --sf-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--sf-ink); background: #fff; font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; line-height: 1.8; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid #f0a14a; outline-offset: 3px; }

.sf-container { width: min(calc(100% - 40px), var(--sf-max)); margin-inline: auto; }
.sf-section { padding: 92px 0; }
.sf-section--soft { background: var(--sf-sky); }
.sf-kicker { margin: 0 0 10px; color: var(--sf-blue); font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sf-kicker--light { color: #fff; }
.sf-title { margin: 0 0 18px; max-width: 960px; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.22; letter-spacing: -.03em; text-wrap: balance; }
.sf-lead { max-width: 780px; margin: 0; color: var(--sf-muted); font-size: 1.05rem; }

.sf-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 2px solid transparent; border-radius: 999px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.sf-button:hover { transform: translateY(-2px); }
.sf-button--primary { background: var(--sf-red); color: #fff; box-shadow: 0 12px 28px rgba(216, 70, 58, .22); }
.sf-button--outline { border-color: var(--sf-blue); background: #fff; color: var(--sf-blue); }

.sf-site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(219, 228, 234, .9); background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); }
.sf-header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sf-brand-link { display: inline-flex; flex-direction: column; color: var(--sf-blue-dark); text-decoration: none; line-height: 1.2; }
.sf-brand-link strong { font-size: 1.08rem; }
.sf-brand-link span { margin-top: 5px; color: var(--sf-muted); font-size: .74rem; }
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { max-height: 54px; width: auto; }
.sf-nav { display: flex; align-items: center; gap: 24px; }
.sf-nav ul { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.sf-nav a { font-weight: 700; text-decoration: none; }
.sf-nav a:hover { color: var(--sf-blue); }
.sf-menu-toggle { display: none; border: 0; background: transparent; color: var(--sf-blue-dark); cursor: pointer; font-size: 1.7rem; }

.sf-hero { overflow: hidden; background: linear-gradient(120deg, var(--sf-blue-dark), var(--sf-blue)); color: #fff; }
.sf-hero-inner { min-height: 650px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 54px; padding: 72px 0; }
.sf-hero h1 { margin: 0 0 22px; font-size: clamp(2.7rem, 6vw, 5.2rem); line-height: 1.12; letter-spacing: -.05em; }
.sf-hero-line { display: block; white-space: nowrap; }
.sf-hero-copy > p:not(.sf-kicker) { max-width: 690px; margin: 0; color: rgba(255, 255, 255, .9); font-size: clamp(1rem, 1.6vw, 1.2rem); }
.sf-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.sf-hero .sf-button--outline { border-color: rgba(255,255,255,.76); background: transparent; color: #fff; }
.sf-hero-visual { min-height: 430px; display: grid; place-items: center; padding: 34px; border: 1px solid rgba(255,255,255,.24); border-radius: 30px; background: radial-gradient(circle at 78% 20%, rgba(255,255,255,.24), transparent 30%), linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.04)); box-shadow: 0 30px 80px rgba(0,0,0,.18); }
.sf-hero-proof { width: min(100%, 420px); }
.sf-hero-proof-label { margin: 0 0 18px; color: rgba(255,255,255,.72); font-size: .75rem; font-weight: 800; line-height: 1.5; letter-spacing: .12em; }
.sf-hero-proof-main { display: flex; align-items: baseline; gap: 8px; }
.sf-hero-proof-number { font-size: clamp(5.6rem, 11vw, 9rem); font-weight: 900; line-height: .9; letter-spacing: -.08em; }
.sf-hero-proof-unit { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; }
.sf-hero-proof-title { margin: 12px 0 6px; color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; line-height: 1.3; }
.sf-hero-proof-note { margin: 0; color: rgba(255,255,255,.78); font-size: .96rem; }
.sf-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.sf-hero-tags span { padding: 7px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.08); font-size: .8rem; font-weight: 800; }

.sf-jobs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 42px; }
.sf-job-card { padding: 34px; border: 1px solid var(--sf-line); border-radius: 28px; background: #fff; box-shadow: 0 14px 36px rgba(9,54,87,.07); }
.sf-job-card--featured { grid-column: 1 / -1; border-color: rgba(11,79,138,.25); }
.sf-job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--sf-line); }
.sf-job-head h3 { margin: 7px 0 0; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.3; }
.sf-job-type { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--sf-sky); color: var(--sf-blue); font-size: .78rem; font-weight: 800; }
.sf-job-salary { margin: 0; color: var(--sf-blue-dark); font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 900; line-height: 1.2; text-align: right; white-space: nowrap; }
.sf-job-salary small { display: block; margin-bottom: 4px; color: var(--sf-muted); font-size: .72rem; font-weight: 700; }
.sf-job-copy { margin: 24px 0 0; color: var(--sf-muted); }
.sf-job-subtitle { margin: 22px 0 9px; font-weight: 800; }
.sf-data-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 22px 0 0; }
.sf-data-list div { display: grid; grid-template-columns: 6em 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf1f4; }
.sf-data-list dt { color: var(--sf-muted); font-size: .88rem; font-weight: 700; }
.sf-data-list dd { margin: 0; font-weight: 700; }
.sf-data-list--compact { grid-template-columns: 1fr; }
.sf-benefits { margin-top: 24px; }
.sf-benefits > strong { display: block; margin-bottom: 10px; }
.sf-chip-list, .sf-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-chip-list li, .sf-tag-list li { padding: 7px 11px; border-radius: 999px; background: var(--sf-sky); color: var(--sf-blue-dark); font-size: .84rem; font-weight: 700; }
.sf-store-list { display: grid; gap: 7px; margin: 0; padding-left: 1.2em; color: var(--sf-muted); }

.sf-contact-panel { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 28px; padding: 30px 34px; border-radius: 24px; background: #f7f9fb; }
.sf-contact-panel p { margin: 0; }
.sf-contact-label { color: var(--sf-blue); font-size: .82rem; font-weight: 800; letter-spacing: .06em; }
.sf-contact-number { margin: 2px 0 6px !important; color: var(--sf-blue-dark); font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 900; line-height: 1.2; }
.sf-contact-panel--business { background: var(--sf-blue-dark); color: #fff; }
.sf-contact-panel--business .sf-contact-label, .sf-contact-panel--business .sf-contact-number { color: #fff; }
.sf-contact-panel--business div > p:last-child { color: rgba(255,255,255,.78); }

.sf-flow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 38px; }
.sf-flow-card { position: relative; padding: 34px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: #fff; box-shadow: 0 10px 32px rgba(9,54,87,.06); }
.sf-flow-card h3 { margin: 8px 0 10px; font-size: 1.45rem; }
.sf-flow-card p { margin: 0; color: var(--sf-muted); }
.sf-card-number { color: var(--sf-blue); font-size: .78rem; font-weight: 900; letter-spacing: .1em; }

.sf-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.sf-stat { min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; border-radius: 22px; background: var(--sf-blue-dark); color: #fff; }
.sf-stat strong { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -.04em; }
.sf-stat span { margin-top: 8px; color: rgba(255,255,255,.72); font-size: .82rem; }
.sf-company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.sf-info-card, .sf-value-panel { padding: 32px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: #fff; }
.sf-info-card h3, .sf-value-panel h3 { margin: 0 0 12px; }
.sf-value-panel { border: 0; background: var(--sf-sky); }
.sf-value-panel h3 { font-size: clamp(1.45rem, 2.8vw, 2rem); line-height: 1.35; }
.sf-value-panel p:last-child { margin-bottom: 0; color: var(--sf-muted); }
.sf-meta { margin: 0; padding: 0; list-style: none; }
.sf-meta li { display: grid; grid-template-columns: 6em 1fr; gap: 10px; padding: 8px 0; }
.sf-meta strong { color: var(--sf-ink); }

.sf-business-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.sf-business-card { padding: 30px; border: 1px solid var(--sf-line); border-radius: 24px; background: #fff; }
.sf-business-card h3 { margin: 0 0 14px; font-size: 1.35rem; }
.sf-business-card p { margin: 16px 0 0; color: var(--sf-muted); }
.sf-business-card--accent { border: 0; background: var(--sf-blue); color: #fff; }
.sf-business-card--accent p { color: rgba(255,255,255,.82); }

.sf-site-footer { padding: 54px 0 24px; background: #081e30; color: rgba(255,255,255,.78); }
.sf-footer-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; }
.sf-footer-title { color: #fff; font-size: 1.1rem; font-weight: 800; }
.sf-footer-nav ul { margin: 0; padding: 0; list-style: none; }
.sf-footer-nav a { color: #fff; }
.sf-copyright { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; }

@media (max-width: 920px) {
  .sf-menu-toggle { display: inline-flex; }
  .sf-nav { position: absolute; top: 100%; left: 14px; right: 14px; display: none; padding: 18px; border: 1px solid var(--sf-line); border-radius: 18px; background: #fff; box-shadow: var(--sf-shadow); }
  .sf-nav.is-open { display: block; }
  .sf-nav ul { display: grid; gap: 4px; }
  .sf-nav a { display: block; padding: 10px 8px; }
  .sf-hero-inner { min-height: auto; grid-template-columns: 1fr; padding: 62px 0 78px; }
  .sf-hero-visual { min-height: 330px; }
  .sf-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-data-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sf-container { width: min(calc(100% - 28px), var(--sf-max)); }
  .sf-section { padding: 58px 0; }
  .sf-header-inner { min-height: 68px; }
  .sf-title { font-size: clamp(1.72rem, 8vw, 2.2rem); line-height: 1.28; letter-spacing: -.025em; }
  .sf-lead { font-size: .98rem; }
  .sf-hero-inner { padding: 52px 0 62px; gap: 34px; }
  .sf-hero h1 { font-size: clamp(2.05rem, 10.5vw, 2.75rem); line-height: 1.08; }
  .sf-hero-line { white-space: nowrap; }
  .sf-hero-visual { min-height: 300px; padding: 26px; border-radius: 24px; }
  .sf-hero-proof-number { font-size: clamp(5rem, 26vw, 7rem); }
  .sf-hero-proof-title { font-size: 1.45rem; }
  .sf-hero-proof-note { font-size: .9rem; }
  .sf-jobs-grid, .sf-flow-grid, .sf-company-grid, .sf-business-grid, .sf-footer-grid { grid-template-columns: 1fr; }
  .sf-job-card--featured { grid-column: auto; }
  .sf-job-card { padding: 24px 20px; border-radius: 22px; }
  .sf-job-head { display: grid; gap: 16px; }
  .sf-job-salary { text-align: left; }
  .sf-data-list div { grid-template-columns: 5.7em 1fr; }
  .sf-contact-panel { align-items: stretch; flex-direction: column; padding: 25px 20px; }
  .sf-contact-panel .sf-button { width: 100%; }
  .sf-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sf-stat { min-height: 125px; padding: 18px; }
  .sf-stat strong { font-size: clamp(1.45rem, 7vw, 2rem); }
  .sf-info-card, .sf-value-panel, .sf-business-card, .sf-flow-card { padding: 24px 20px; }
  .sf-meta li { grid-template-columns: 5em 1fr; }
}