でも同じ見た目になるようにする。 */
.p-about__media,
.c-feature__media,
.c-product__media,
.p-recruit__bg {
object-fit: cover;
}
/* 画像プレースホルダ。Figmaから書き出した画像に差し替える。 */
.c-placeholder {
position: relative;
display: grid;
place-items: center;
background: repeating-linear-gradient(
-45deg,
var(--color-bg-light) 0 10px,
#E8F0FA 10px 20px
);
border: 1px dashed var(--color-border-blue);
color: var(--color-text-sub);
font-size: var(--fs-note);
text-align: center;
padding: 8px;
overflow: hidden;
}
/* ---------------------------------------------------------
ヘッダー
--------------------------------------------------------- */
.l-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-bg);
border-bottom: 1px solid var(--color-border); /* Figma実測 1px #E5E7EB */
}
/* 管理バーが出ているときはその下に貼り付ける */
.admin-bar .l-header { top: 32px; }
@media (max-width: 782px) {
.admin-bar .l-header { top: 46px; }
}
/* アンカーで飛んだとき、固定ヘッダーに見出しが隠れないようにする。
scroll-behavior: smooth はページ読み込み直後のアンカー移動を取りこぼすことがあるので付けない。 */
:target { scroll-margin-top: calc(var(--header-height) + 24px); }
.l-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
height: calc(var(--header-height) - 1px); /* 下線1pxを含めて52px/81pxになる */
padding-inline: var(--gutter);
max-width: 1440px;
margin-inline: auto;
}
.l-header__logo {
flex: none;
display: flex;
align-items: center;
gap: 8px; /* Figma実測（27ブロックが8px。6.2/7.1のカンプもあるが少数） */
}
.l-header__logo svg { height: 38px; width: auto; }
/* 767px以下：Figma SPヘッダー実測（帯52 / ロゴ240x24 / ハンバーガー24x24、左右余白20）。
SVGの枠は318x38でロゴ本体より2.6px・3.9px大きいので、本体240pxに合わせて枠は242px。 */
@media (max-width: 767px) {
.l-header__inner { gap: 12px; }
.l-header__logo svg { width: 242px; height: auto; }
}
.l-header__nav {
display: none;
align-items: center;
gap: 40px;
}
.l-header__menu {
display: flex;
align-items: center;
gap: 20px;
}
.l-header__menu a {
font-size: var(--fs-body-sm);
font-weight: var(--fw-semibold);
line-height: 1.43;
color: var(--color-text);
transition: color .2s;
}
.l-header__menu a:hover { color: var(--color-blue); }
.l-header__actions {
display: flex;
align-items: center;
gap: 20px;
}
/* ハンバーガー */
/* Figma実測: 24x24の中に 24x3 の線が3本（間隔7.5px）。
線は y=3.5 / 10.5 / 17.5 なので、上下に3.5pxの余白と4pxの間隔。色は青 #003F8F。
見た目は24pxだが指で押せるよう、当たり判定だけ ::before で44pxに広げる。 */
.l-header__hamburger {
flex: none;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 24px;
padding: 3.5px 0;
border: 0;
background: none;
cursor: pointer;
}
.l-header__hamburger::before {
content: "";
position: absolute;
inset: -10px;
}
.l-header__hamburger span {
display: block;
width: 24px;
height: 3px;
background: var(--color-blue); /* Figma実測 #003F8F。濃紺ではない */
transition: transform .25s, opacity .25s;
}
.l-header__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.l-header__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.l-header__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* 1024px以上：グローバルナビを横並びにし、ハンバーガーを隠す */
@media (min-width: 1024px) {
.l-header__nav { display: flex; }
.l-header__hamburger { display: none; }
}
/* ナビの文言とボタンは途中で折り返さない（「製品情／報」のような2行化を防ぐ） */
.l-header__menu a,
.l-header__actions .c-btn { white-space: nowrap; }
/* 1024〜1199px：ロゴ・間隔・ボタンを少し詰めて1行に収める（2026-09-16。1024px付近でナビが2行に折れていた） */
@media (min-width: 1024px) and (max-width: 1199px) {
.l-header__logo svg { height: 30px; }
.l-header__inner { gap: 16px; }
.l-header__nav { gap: 20px; }
.l-header__menu { gap: 14px; }
.l-header__actions { gap: 10px; }
.l-header__actions .c-btn--sm { padding: 0 12px; }
}
/* 1023px以下：ナビはドロワー */
@media (max-width: 1023px) {
.l-header__nav[data-open="true"] {
display: flex;
position: absolute;
inset: var(--header-height) 0 auto;
flex-direction: column;
align-items: stretch;
gap: 24px;
padding: 24px var(--gutter) 32px;
background: var(--color-bg);
box-shadow: var(--shadow-card);
}
.l-header__nav[data-open="true"] .l-header__menu {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.l-header__nav[data-open="true"] .l-header__menu a {
display: block;
padding-block: 14px;
border-bottom: 1px solid var(--color-border);
font-size: var(--fs-body);
}
.l-header__nav[data-open="true"] .l-header__actions {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
}
/* ---------------------------------------------------------
FV
--------------------------------------------------------- */
.p-fv {
position: relative;
display: flex;
align-items: center;
min-height: 582px;
overflow: hidden;
/* 波の mix-blend-mode を FV の中だけで効かせる */
isolation: isolate;
}
.p-fv__slides {
position: absolute;
inset: 0;
}
.p-fv__slide {
position: absolute;
inset: 0;
opacity: 0;
overflow: hidden;
transition: opacity 1s ease; /* 1秒かけてフェードイン */
}
.p-fv__slide[aria-hidden="false"] { opacity: 1; }
/* Figmaの Section_FV / Section_FV_SP は「写真」の上に「横方向グラデーション」を重ねている。
スライド画像は原寸写真に差し替えたので、グラデーションはこちらで持つ。
各ストップの alpha にレイヤー不透明度（PC 40% / SP 45%）を掛け込んである。 */
.p-fv__slide::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(0, 63, 143, .400) 0%,
rgba(0, 95, 184, .396) 46%,
rgba(0, 115, 195, .128) 72%,
rgba(0, 74, 146, .032) 100%);
}
.p-fv__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.05);
transition: transform 4s ease-out; /* 105% → 100% を4秒かけて */
}
/* 表示中のスライドだけ等倍へ寄っていく */
.p-fv__slide[aria-hidden="false"] .p-fv__image { transform: scale(1); }
/* 非表示になったスライドは、フェードアウト完了(1s)後に瞬時に105%へ戻す。
すぐ戻すと縮小が見えてしまうので遅延させている。 */
.p-fv__slide[aria-hidden="true"] .p-fv__image { transition: transform 0s 1s; }
@media (prefers-reduced-motion: reduce) {
.p-fv__image { transform: none; }
}
.p-fv__slide .c-placeholder {
width: 100%;
height: 100%;
border: 0;
}
/* Figmaでは FV の直下に「波」のグループが乗っている（PCは1つ、SPは上下2つ）。
中身がグラデーションとラスタの合成なので、Figma の /v1/images でノードごと
PNG に書き出したものを敷く。グループの不透明度（PC 70% / SP上 40% / SP下 70%）は
書き出しに反映済みなので、CSS側で重ねがけしない。合成は SCREEN。
位置と大きさは FV の箱に対する割合で持つ（PC 1440x582.38 / SP 390x540 基準）。 */
.p-fv__wave {
position: absolute;
z-index: 1;
background-repeat: no-repeat;
background-size: 100% 100%;
mix-blend-mode: screen;
pointer-events: none;
}
.p-fv__wave--pc {
left: 0;
width: 100%;
top: 47.05%; /* 274 / 582.38 */
height: 62.16%; /* 362 / 582.38 */
background-image: url("../img/fv-wave-pc.png");
}
.p-fv__wave--sp-top,
.p-fv__wave--sp-bottom { display: none; }
.p-fv__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.p-fv__badge {
/* Figma実測: 角丸なし。PCは padding 6px、SPは 6px 12px */
padding: 6px;
background: rgba(255, 255, 255, 0.8);
color: var(--color-navy-mid);
font-size: 1.5rem; /* 24px */
font-weight: var(--fw-semibold);
line-height: 1.17;
}
.p-fv__title {
font-family: var(--font-serif);
font-size: var(--fs-fv);
font-weight: var(--fw-bold);
line-height: var(--lh-fv);
color: var(--color-text-invert);
text-shadow: 0 2px 12px rgba(0, 40, 90, .35);
}
.p-fv__dots {
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 28px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.p-fv__dot {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
/* Figma: 白の塗り40%。1px枠線だと写真の上でほぼ見えない */
background: rgba(255, 255, 255, .4);
cursor: pointer;
}
.p-fv__dot[aria-current="true"] {
width: 12px;
height: 12px;
background: var(--color-text-invert);
}
@media (max-width: 767px) {
.p-fv { min-height: 540px; } /* Figma実測 Section_FV_SP 390x540 */
/* SPのグラデーションは45%。PC(40%)より濃い */
.p-fv__slide::after {
background: linear-gradient(90deg,
rgba(0, 63, 143, .450) 0%,
rgba(0, 95, 184, .445) 53.67%,
rgba(0, 74, 146, .035) 100%);
}
/* SPは波が2つ。上の1枚はPC側に存在しない */
.p-fv__wave--pc { display: none; }
.p-fv__wave--sp-top {
display: block;
left: -3.08%; /* -12 / 390 */
width: 170.26%; /* 664 / 390 */
top: -5.19%; /* -28 / 540 */
height: 27.82%; /* 150.23 / 540 */
background-image: url("../img/fv-wave-sp-top.png");
}
.p-fv__wave--sp-bottom {
display: block;
left: -12.56%; /* -49 / 390 */
width: 112.56%; /* 439 / 390 */
top: 78.89%; /* 426 / 540 */
height: 18.39%; /* 99.32 / 540 */
background-image: url("../img/fv-wave-sp-bottom.png");
}
.p-fv__badge { padding: 6px 12px; font-size: var(--fs-body-sm); font-weight: var(--fw-bold); }
}
/* ---------------------------------------------------------
about
--------------------------------------------------------- */
.p-about {
/* Figmaでは背景画像。グラデーションではない。 */
background: var(--color-bg) url("../img/about-bg.jpg") center / cover no-repeat;
}
.p-about__inner {
display: flex;
align-items: center;
gap: 60px;
}
/* 背景の空に溶け込む透過イラスト。角丸やボックスは付けない（Figma準拠）。 */
.p-about__media {
flex: 1 1 765px;
width: 765px;
max-width: 100%;
height: auto;
aspect-ratio: 765 / 420;
object-fit: contain;
}
.p-about__content {
flex: none;
width: 375px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 28px;
}
.p-about__heading {
display: flex;
flex-direction: column;
gap: 16px;
}
.p-about__title {
font-family: var(--font-serif);
font-size: var(--fs-catch);
font-weight: var(--fw-bold);
line-height: var(--lh-catch);
color: var(--color-navy-mid);
}
.p-about__lead {
font-size: 0.9375rem; /* 15px */
font-weight: var(--fw-semibold);
line-height: 1.75;
color: var(--color-text-mute);
}
@media (max-width: 767px) {
.p-about__inner {
flex-direction: column;
align-items: stretch;
gap: 24px;
}
/* column になると flex-basis が高さに効くので明示的に戻す */
.p-about__media { flex: none; width: 100%; }
.p-about__content { width: auto; }
.p-about__lead { font-weight: var(--fw-medium); font-size: var(--fs-body); }
}
/* ---------------------------------------------------------
Features
--------------------------------------------------------- */
.p-features {
background: var(--grad-section);
}
.p-features__inner {
display: flex;
flex-direction: column;
gap: 40px;
}
.p-features__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.c-feature {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
height: 100%;
padding: 20px;
/* Figma実測 Article: stroke 1px #0068C9 の不透明度14% / INSIDE、影は 0 0 19px rgba(0,52,112,.08) */
border: 1px solid rgba(0, 104, 201, .14);
border-radius: var(--radius);
background: var(--color-bg);
box-shadow: var(--shadow-soft);
}
.c-feature__media {
width: 237px;
max-width: 100%;
height: auto;
aspect-ratio: 237 / 186;
border-radius: var(--radius-sm);
}
.c-feature__body {
display: flex;
flex-direction: column;
gap: 7px;
width: 100%;
}
.c-feature__title {
font-family: var(--font-serif);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
line-height: var(--lh-h3);
color: var(--color-blue);
}
.c-feature__text {
font-size: var(--fs-body-sm);
font-weight: var(--fw-medium);
line-height: var(--lh-body-sm);
color: var(--color-text-sub);
}
@media (max-width: 767px) {
.p-features__list { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------
Products
--------------------------------------------------------- */
/* Figma実測 Section_Products: 塗りが2枚。
1枚目 #FFFFFF の単色
2枚目 IMAGE（scaleMode FILL・不透明度70%・filters contrast +0.02 / saturation -0.32）
spec は「最初の可視な塗り」しか持っていないので #FFFFFF だけに見えていた。
PCフレームの書き出しではなく元画像（3508x2480）を cover で敷き、
不透明度とフィルタはCSS側で再現する。 */
.p-products {
position: relative;
isolation: isolate;
background: var(--color-bg);
}
.p-products::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("../img/products-bg.jpg") center / cover no-repeat;
opacity: .7;
filter: contrast(1.02) saturate(.68);
pointer-events: none;
}
.p-products__inner {
display: flex;
flex-direction: column;
gap: 34px;
}
/* Figma実測: 列の間隔は20だが、行の間隔は34。見出し・カード群・ボタンの間も34。 */
.p-products__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 20px;
row-gap: 34px;
}
.p-products__action {
display: flex;
justify-content: center;
}
.c-product {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border: 1px solid var(--color-border-blue);
border-radius: var(--radius);
background: var(--color-bg);
box-shadow: var(--shadow-soft);
transition: box-shadow .2s, transform .2s;
}
.c-product:hover {
box-shadow: var(--shadow-card);
transform: translateY(-2px);
}
.c-product__media {
width: 100%;
height: auto;
aspect-ratio: 384 / 240;
border: 0;
border-bottom: 1px solid var(--color-border-blue);
}
.c-product__label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
font-family: var(--font-serif);
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
line-height: var(--lh-h4);
color: var(--color-blue);
}
.c-product__icon {
flex: none;
width: 16px;
height: 16px;
color: var(--color-blue);
}
@media (max-width: 767px) {
/* Figma実測: SPは3枚ずつの塊が2つ。塊の中は20px、塊の間は34px。
1列に並べるので行間は多数派の20pxにそろえる。 */
.p-products__list { grid-template-columns: 1fr; row-gap: 20px; }
}
/* ---------------------------------------------------------
News
--------------------------------------------------------- */
.p-news__inner {
display: flex;
flex-direction: column;
gap: 40px;
}
/* Figma実測: 全 NewsItem が individualStrokeWeights {bottom:1} の下線のみ。
1件目に上線は無い（トップ・お知らせ一覧、PC・SPとも）。 */
.p-news__item {
border-bottom: 1px solid var(--color-border);
}
.p-news__link {
display: flex;
align-items: center;
gap: 16px;
padding-block: 20px;
transition: color .2s;
}
.p-news__link:hover { color: var(--color-blue); }
.p-news__meta {
flex: none;
display: flex;
align-items: center;
gap: 12px;
}
.p-news__date {
font-size: var(--fs-body-sm);
font-weight: var(--fw-medium);
line-height: 1.43;
color: var(--color-text-sub);
font-variant-numeric: tabular-nums;
}
.p-news__title {
flex: 1;
font-size: var(--fs-body);
font-weight: var(--fw-medium);
line-height: 1.5;
color: var(--color-navy);
}
.p-news__icon {
flex: none;
width: 20px;
height: 20px;
color: var(--color-blue);
}
.p-news__action {
display: flex;
justify-content: center;
}
@media (max-width: 767px) {
/* Figma実測 NewsItem 104 = 上下20 ＋ メタ24 ＋ 間隔16 ＋ タイトル24 */
.p-news__link {
flex-wrap: wrap;
row-gap: 16px;
}
.p-news__inner { gap: 24px; } /* Figma実測 Section_News_SP の gap */
.p-news__title { flex: 1 1 100%; order: 3; }
/* Figma実測: SPの NewsItem は Chevron を持たない（PCのみ 20x20）。
トップ・お知らせ一覧とも同じ。 */
.p-news__icon { display: none; }
}
/* ---------------------------------------------------------
Recruit
--------------------------------------------------------- */
.p-recruit {
position: relative;
display: flex;
align-items: center;
min-height: 531px;
overflow: hidden;
background: var(--grad-section);
}
.p-recruit__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
/* Figmaは fills の scaleMode: FILL（＝cover）を無変換で使っている。
元画像 1536x819 を PC 1440x531 / SP 390x346 に中央でトリミングすると
カンプと完全に一致する。右寄せにすると SP で3人とも写って別物になる。 */
object-position: center;
}
.p-recruit__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 33px;
}
.p-recruit__title {
font-family: var(--font-en-display);
font-size: var(--fs-entry);
font-weight: var(--fw-bold);
line-height: 0.98;
color: var(--color-blue);
letter-spacing: 0.02em;
}
.p-recruit__subtitle {
font-family: var(--font-serif);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
line-height: 1.82;
color: var(--color-navy);
}
@media (max-width: 767px) {
.p-recruit { min-height: 346px; } /* Figma実測 Section_Recruit_SP 390x346 */
/* Figma実測: SPだけ背景画像の上に白50%が乗る（PCは無し）。
これが無いとイラストが濃く出て文字が読みにくい。 */
.p-recruit__bg { z-index: 0; }
.p-recruit::before {
content: "";
position: absolute;
inset: 0;
z-index: 1; /* Figmaは 画像の「上」に白50%を重ねている */
background: rgba(255, 255, 255, .5);
}
.p-recruit__inner { z-index: 2; }
.p-recruit__inner { align-items: center; text-align: center; }
.p-recruit__subtitle { font-size: var(--fs-h4); line-height: 1.56; }
}
/* ---------------------------------------------------------
フッター
--------------------------------------------------------- */
/* Figmaのフッターは padding 144 なのに子が1200pxで、左144/右96の非対称になっている
（他セクションは左右120で対称）。デザインの不整合と判断し、他と揃えて1200px中央寄せにした。 */
.l-footer {
padding-block: 64px;
padding-inline: var(--gutter);
background: var(--color-footer);
color: rgba(255, 255, 255, .8); /* Figma実測。電話番号だけ100% */
}
.l-footer__inner {
display: flex;
flex-direction: column;
gap: 40px;
width: min(var(--container), 100%);
margin-inline: auto;
}
/* CONTACT カード */
.l-footer__contact {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 60px 40px;
border-radius: 10px; /* Figma実測 PC 10px / SP 8px */
background: var(--color-bg);
}
.l-footer__contact-body {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 450px;
}
.l-footer__contact-title {
font-family: var(--font-en-display);
font-size: var(--fs-display);
font-weight: var(--fw-bold);
line-height: 1.33;
color: var(--color-blue);
letter-spacing: 0.02em;
}
.l-footer__contact-text {
font-size: var(--fs-body);
font-weight: var(--fw-bold); /* Figma実測 700 */
line-height: 1.84;
color: var(--color-text-sub);
}
/* CONTACTの矢印ボタン。Figmaは 90×90 / border-radius 4px の角丸四角（円ではない）。 */
.c-arrow-btn {
flex: none;
display: grid;
place-items: center;
width: 90px;
height: 90px;
border-radius: var(--radius-sm);
background: var(--grad-cta);
color: var(--color-text-invert);
transition: transform .2s;
}
.c-arrow-btn:hover { transform: scale(1.05); }
.c-arrow-btn svg { width: 46px; height: 46px; }
/* フッター本体 */
.l-footer__body {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
padding-block: 48px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.l-footer__info {
display: flex;
flex-direction: column;
gap: 15px;
}
.l-footer__logo svg { height: 38px; width: auto; }
.l-footer__address {
font-size: var(--fs-body-sm);
font-weight: var(--fw-normal);
line-height: 1.62;
}
.l-footer__tel {
display: flex;
align-items: center;
gap: 8px;
color: var(--color-text-invert);
font-size: var(--fs-tel);
font-weight: var(--fw-bold);
line-height: 1.4;
}
.l-footer__tel svg { width: 20px; height: 20px; }
.l-footer__nav { display: flex; }
/* Figmaは3項目×2列。WordPressのメニューは1つの
で出るので段組みで2列にする。
columns は「1列目を埋めてから2列目」なので、Figmaと同じ並び順になる。 */
.l-footer__list {
columns: 2;
column-gap: 64px;
}
.l-footer__list li { margin-bottom: 12px; }
.l-footer__list li:last-child { margin-bottom: 0; }
.l-footer__list a {
font-size: var(--fs-body-sm);
font-weight: var(--fw-normal);
line-height: 1.43;
transition: opacity .2s;
}
.l-footer__list a:hover { opacity: .7; }
.l-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 8px; /* inner の gap40 と合わせて 48px（Figma実測） */
font-size: var(--fs-note);
line-height: 1.33;
}
@media (max-width: 767px) {
.l-footer { padding-block: 48px; }
.l-footer__contact {
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 40px 24px;
}
/* SPは「企業情報 →（1本線）→ リンク一覧」で、上下を囲む枠線は無い。
間隔はすべて40px（Figma実測 Corp_Info 122 / Line / Footer_Links 184）。 */
.l-footer__body {
flex-direction: column;
gap: 40px;
padding-block: 0;
border-top: 0;
border-bottom: 0;
}
.l-footer__info { gap: 16px; }
.l-footer__nav {
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
/* SPは1列。Figma実測 Footer_Links 350x184（1項目16px・間隔12px） */
.l-footer__nav { width: 100%; }
.l-footer__list { columns: 1; column-gap: 0; }
.l-footer__list li { font-size: var(--fs-body-xs); line-height: 1.23; }
.l-footer__list a { font-size: var(--fs-body-xs); line-height: 1.23; }
/* Figma実測 Corp_Info: ロゴ 277x28（枠は279）・間隔16 */
.l-footer__logo svg { width: 279px; height: auto; }
/* CONTACTの丸ボタンは Figma実測 PC 90 / SP 50 */
.l-footer__contact .c-arrow-btn { width: 50px; height: 50px; }
.l-footer__contact .c-arrow-btn svg { width: 20px; height: 20px; }
/* Figmaではプライバシーポリシーがリンク一覧の7項目目（間隔12px）で、
コピーライトだけが40px下に離れる。マークアップを変えずに同じ間隔にする。 */
.l-footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: 40px;
margin-top: -28px;
}
/* 書式はSPカンプの値。PC値のまま出ていたので上書きする。
SP11フレーム（contact/privacy/product/company/news/news_article/
recruit/recruit-form/SDS/general-affairs）すべてで同一値であることを確認済み。 */
.l-footer__contact-title { line-height: 0.83; } /* 48 / 40 */
.l-footer__contact-text { font-size: var(--fs-body-xs); line-height: 1.69; } /* 13 / 22 */
.l-footer__address { font-size: var(--fs-body-xs); line-height: 1.54; } /* 13 / 20 */
.l-footer__tel { line-height: 1.22; } /* 18 / 22 */
.l-footer__list a { font-size: var(--fs-body-xs); line-height: 1.23; } /* 13 / 16 */
.l-footer__bottom { font-size: var(--fs-body-xs); line-height: 1.23; } /* プライバシーポリシー 13 / 16 */
.l-footer__bottom p { font-size: var(--fs-note-sp); line-height: 1.18; } /* コピーライト 11 / 13 */
}
/* =========================================================
下層ページ共通
Figma privacy_v1 から実測。全13ページで共通のパーツ。
========================================================= */
/* ---- ページ見出し帯 ---------------------------------------
Figma: header/xxx 1440×218 / padding 64px 0 / gap 16 / 背景画像
---------------------------------------------------------- */
/* ページ見出し帯。
Figmaには2種類あったが（product/SDS/news/recruit＝36px青、company等＝34px）、
2026-09-08 サイト全体を前者に統一する方針でユーザー確認済み。
Figma実測（product_v1）: 1440×208 / padding 64px 0 / gap16 /
和文 Noto Serif JP 700 36px #003F8F / 英字 Noto Sans JP 400 16px #003F8F 不透明度80% */
.p-page-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding-block: 64px;
background: var(--color-bg-pale) url("../img/page-hero-bg.jpg") center / cover no-repeat;
text-align: center;
}
.p-page-hero__ja {
font-family: var(--font-serif);
font-size: var(--fs-page-title); /* 28 → 36 */
font-weight: var(--fw-bold);
line-height: 1.11; /* PC 36/40。SPは36/28で別指定 */
color: var(--color-blue);
}
.p-page-hero__en {
font-family: var(--font-base);
font-size: var(--fs-body); /* PC 16px。SPは14px */
font-weight: var(--fw-regular);
line-height: 1.5;
color: var(--color-blue);
opacity: .8;
}
/* ---- パンくず ---------------------------------------------
Figma: 1440×46 / padding 12px 144px、内側 1152px に padding 0 32px
---------------------------------------------------------- */
/* Figma実測（product_v1）: padding 12px 0 / 内側1200px / 枠線なし。全ページ共通にする */
.c-breadcrumb {
/* Figma実測: 帯40px = 上12 + 本文16 + 下11 + 下線1px（#E5E7EB） */
padding: 12px 0 11px;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg);
font-size: var(--fs-body-sm);
line-height: 1.43;
}
.c-breadcrumb__inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0 8px;
width: min(var(--container), 100% - var(--gutter) * 2);
margin-inline: auto;
}
/* Figma実測: 先頭の「ホーム」だけ #333333。中間リンクも現在ページと同じ #6B7280 */
.c-breadcrumb a { color: var(--color-crumb-now); }
/* お知らせ詳細だけ、PCとSPで構成が違う（Figma実測）。
PC: 見出し帯なし／パンくず3階層 SP: 見出し帯あり／パンくず2階層 */
.p-page-hero--sp-only { display: none; }
@media (max-width: 767px) {
.p-page-hero--sp-only { display: flex; }
.c-breadcrumb__current { display: none; }
.c-breadcrumb__current + .c-breadcrumb__sep,
.c-breadcrumb__sep:has(+ .c-breadcrumb__current) { display: none; }
}
.c-breadcrumb a:first-of-type { color: var(--color-crumb); }
.c-breadcrumb a:hover { color: var(--color-blue); }
.c-breadcrumb [aria-current="page"] { color: var(--color-crumb-now); }
.c-breadcrumb__sep {
flex: none;
width: 16px;
height: 16px;
color: var(--color-crumb-now);
}
/* ---- 本文エリア ------------------------------------------
Figma: Hero/Message padding 60px 120px / 背景グラデ
カード 1200px / padding 48 / radius 6 / 白
本文カラム 704px 中央寄せ / gap 40
---------------------------------------------------------- */
.p-page-body {
padding-block: var(--space-section);
background: var(--grad-section);
}
.l-card {
width: min(var(--container), 100% - var(--gutter) * 2);
margin-inline: auto;
padding: 48px;
/* Figma実測: プライバシーは radius 8 / 枠線 1px #D7E0EA。
フォーム（--narrow）は radius 6 で枠線は同じ。 */
border: 1px solid var(--color-border-soft);
border-radius: 8px;
background: var(--color-bg);
}
/* フォームページのカードは Figma 実測で 800px */
.l-card--narrow {
width: min(800px, 100% - var(--gutter) * 2);
padding: 40px;
border-radius: var(--radius);
}
/* ---- 本文の組版 ------------------------------------------ */
.c-prose {
display: flex;
flex-direction: column;
gap: 40px;
width: min(var(--container-prose), 100%);
margin-inline: auto;
font-size: var(--fs-prose);
line-height: var(--lh-prose);
color: var(--color-navy);
}
.c-prose__section {
display: flex;
flex-direction: column;
gap: 20px;
}
.c-prose__heading {
padding-bottom: 8px;
border-bottom: 1px solid var(--color-border-soft);
font-size: var(--fs-prose-h);
font-weight: var(--fw-bold);
line-height: 1.56;
color: var(--color-blue);
}
.c-prose__block {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Figma実測: 箇条書きは「行頭のインデント ＋ 中黒14px ＋ 本文」で、間隔は0。
PC 本文704 → インデント24・中黒14・本文666
SP 本文310 → インデント 8・中黒14・本文288
インデント24＋gap8 で組んでいたため、SPで本文が24px狭く、
ほぼ全項目で改行位置が1文字ぶん早くなっていた（2026-09-10）。 */
.c-prose__list {
display: flex;
flex-direction: column;
gap: 6px;
padding-left: 24px;
}
.c-prose__list li {
display: flex;
gap: 0;
}
.c-prose__list li::before {
content: "•";
flex: none;
width: 14px;
color: var(--color-blue);
font-size: var(--fs-prose);
line-height: inherit;
}
/* 囲みボックス（連絡先など） */
.c-note-box {
padding: 20px 24px;
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-sm);
background: var(--color-bg-light);
}
@media (max-width: 767px) {
.p-page-hero { gap: 12px; padding-block: 40px; } /* Figma実測 390x148 */
.c-breadcrumb__inner { padding-inline: 0; }
/* SPカンプは 13px / 行高16px。SP10フレームで同一値を確認済み。 */
.c-breadcrumb { font-size: var(--fs-body-xs); line-height: 1.23; }
/* Figma実測: SPのカードは左右16pxの余白で幅358（他ページの帯は20px）。
350px・padding 24px 20px で組んでいたため本文が8px狭く、
プライバシーポリシーの改行が全項目でカンプとずれていた（2026-09-10）。
プライバシー: 幅358・padding24 → 本文310
フォーム : 幅358・padding20 → 本文318 */
.l-card {
width: calc(100% - 32px);
padding: 24px;
}
/* Figma実測: 採用応募フォームのカードは幅358（余白16）・radius8、
お問い合わせのカードは幅350（余白20）・radius6。同じ見た目に見えて数値が違う。 */
.l-card--narrow { width: calc(100% - 32px); padding: 20px; border-radius: 8px; }
.l-card--gutter20 { width: calc(100% - var(--gutter) * 2); border-radius: var(--radius); }
.c-prose { gap: 32px; font-size: var(--fs-body-sm); line-height: 1.71; } /* 14 / 24 */
/* Figma実測（privacy-policy-mobile）。見出し16px、本文14px、箇条書きは行高が狭い。 */
.c-prose__heading { font-size: var(--fs-body); line-height: 1.5; } /* 16 / 24 */
.c-prose__list { padding-left: 8px; } /* Figma実測 SP */
.c-prose__list li span { line-height: 1.57; } /* 14 / 22 */
.c-prose__list li::before { font-size: var(--fs-body-sm); line-height: 1.57; }
.c-note-box { padding: 16px; } /* Figma実測: 本文310 → 箱の内寸278 */
.c-note-box p { font-size: var(--fs-body-xs); line-height: 1.54; color: var(--color-text-sub); } /* 13 / 20 */
.c-note-box p:first-child {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bold);
line-height: 1.57; /* 14 / 22 */
color: var(--color-navy);
}
}
/* =========================================================
会社概要ページ
Figma company_v1 から実測。
========================================================= */
.p-company { background: var(--grad-section); }
.p-company__section {
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
padding-block: var(--space-section);
}
.p-company__section--white { background: var(--color-bg); }
/* セクション見出し（英字＋日本語）。gapだけトップページと違う。 */
.p-company .c-heading { gap: 14px; }
/* ---- 代表挨拶 ---- */
.p-company__message {
display: flex;
gap: 60px;
align-items: flex-start;
width: min(1000px, 100%);
}
.p-company__portrait {
flex: none;
width: 260px;
border-radius: var(--radius);
background: #D9E7F6;
}
.p-company__message-body {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-navy);
}
.p-company__signature {
width: min(1000px, 100%);
display: flex;
justify-content: flex-end;
align-items: baseline;
gap: 16px;
font-family: var(--font-serif);
color: var(--color-ink);
}
/* Figma実測: 役職は明朝レギュラー18px、氏名は明朝ボールド20px。どちらも #333333 */
.p-company__signature-role { font-size: 1.125rem; font-weight: var(--fw-regular); line-height: 1.56; }
.p-company__signature-name { font-size: 1.25rem; font-weight: var(--fw-bold); line-height: 1.4; }
/* ---- 経営方針 ----
Figma実測: セクション1440×379 / padding 60px 0 / gap48 / 塗りが工場イラストの画像 */
.p-company__section--policy {
padding-block: 60px;
gap: 48px;
background: url("../img/company-policy-bg.jpg") center / cover no-repeat;
}
.p-company__policy-card {
width: min(864px, 100%);
padding: 32px 40px;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.6);
text-align: center;
}
.p-company__policy-text {
font-family: var(--font-serif);
font-size: 1.25rem; /* PC 20px。SPは16px */
font-weight: var(--fw-bold);
line-height: 2;
color: var(--color-navy);
}
/* ---- 会社概要テーブル ---- */
.p-company__lead {
/* Figma実測 800px。同じ位置に864pxのテキストが3つ重なっているが、
いずれも visible:false（非表示レイヤー）。表示されているのは800pxのほう。 */
width: min(800px, 100%);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-navy);
}
.c-table {
width: min(800px, 100%);
border-collapse: collapse;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-navy);
}
/* Figma実測 Table Label/Value: padding16・枠線1px #D7E0EA。
セルは表の幅（800）より広い（216+648=864）ぶんが clipsContent で切られるので、
右端の縦線は描かれない。項目名と内容の間の縦線は th の右側で引く。 */
.c-table th,
.c-table td {
padding: 16px;
border: 1px solid var(--color-border-soft);
text-align: left;
vertical-align: top;
}
.c-table td { border-right: 0; }
.c-table th,
.c-table td { line-height: 1.625; } /* Figma実測 16/26 */
/* Googleマップへのリンク（別タブ）。青字・下線のテキストリンク。
会社概要の表の右下と、営業所カードの右下に置く（2026-09-16 クライアント要望。Figmaには無い） */
.c-maplink {
display: inline-block;
color: var(--color-blue);
font-size: var(--fs-body-sm); /* 14px */
line-height: 1.5;
text-decoration: underline;
text-underline-offset: 3px;
}
.c-maplink:hover { text-decoration: none; }
.p-company__maplink {
width: min(800px, 100%); /* 表と同じ幅にして、その右端に寄せる */
margin-top: -36px; /* セクションの gap(48) を表との間隔12に詰める */
text-align: right;
}
.c-branch__map { align-self: flex-end; }
.c-table th {
width: 216px;
line-height: 1.375; /* Figma実測 16/22 */
background: var(--color-bg-light);
color: var(--color-blue);
font-weight: var(--fw-bold);
white-space: nowrap;
}
.c-table td { background: var(--color-bg); }
.c-table__pairs {
display: grid;
grid-template-columns: max-content 1fr;
gap: 4px 24px;
}
/* ---- 営業所 ---- */
.p-company__branches {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
width: min(var(--container), 100%);
}
.c-branch {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--color-border-blue);
border-radius: var(--radius);
background: var(--color-bg);
box-shadow: var(--shadow-soft);
}
.c-branch img { width: 100%; height: auto; aspect-ratio: 385 / 251; object-fit: cover; }
.c-branch__body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
}
.c-branch__name {
font-family: var(--font-serif);
font-size: 1.5rem; /* 24px */
font-weight: var(--fw-bold);
line-height: 1.33; /* 32px */
color: var(--color-navy-deep);
}
.c-branch__address {
font-size: var(--fs-body); /* 16px */
line-height: 1.5; /* 24px */
color: var(--color-text);
}
/* Figma実測 PC(Button 304.67x36): 枠線1px・radius46のピル・gap10・16/28 700。
SP(Call Action 310x42): 枠線2px・radius46・gap8・15px 700・シェブロン無し。 */
.c-branch__tel {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 36px;
padding: 4px 16px;
border: 1px solid var(--color-blue);
border-radius: 46px;
color: var(--color-blue);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
line-height: 1.75;
}
.c-branch__tel svg { width: 16px; height: 16px; flex: none; }
.c-branch__tel:hover { background: var(--color-blue); color: var(--color-text-invert); }
/* Figma実測: 白地・青1px枠・ピル型（radius46）・260×36・ラベル700 14px＋外部リンクアイコン20px */
.c-linkbtn {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 10px;
width: min(260px, 100%);
min-height: 36px;
padding: 4px 16px;
border: 1px solid var(--color-blue);
border-radius: 46px;
background: var(--color-bg);
color: var(--color-blue);
font-size: var(--fs-body-sm);
font-weight: var(--fw-bold);
line-height: 1.43;
transition: background .2s, color .2s;
}
.c-linkbtn svg { width: 20px; height: 20px; flex: none; }
.c-linkbtn:hover { background: var(--color-blue); color: var(--color-text-invert); }
/* ---- 関連会社 ---- */
.p-company__affiliates {
display: flex;
flex-direction: column;
gap: 32px;
width: min(1000px, 100%);
}
.c-affiliate {
display: flex;
overflow: hidden;
border: 1px solid var(--color-border-blue);
border-radius: var(--radius);
background: var(--color-bg);
box-shadow: var(--shadow-soft);
}
.c-affiliate img { flex: none; width: 345px; object-fit: cover; }
.c-affiliate__body {
display: flex;
flex-direction: column;
gap: 16px;
padding: 32px 40px;
}
.c-affiliate__name {
font-family: var(--font-serif);
font-size: 1.4375rem;
font-weight: var(--fw-bold);
line-height: 1.4;
color: var(--color-blue);
}
.c-affiliate__detail {
font-size: var(--fs-prose);
line-height: 1.9;
color: var(--color-navy);
}
/* ---- 沿革 ---- */
.p-company__history {
width: min(864px, 100%);
display: flex;
flex-direction: column;
}
/* Figma実測: 白いカード(1000px/padding 60px 0/radius6)の中に 800px の縦タイムライン。
各項目は padding 0 0 32px 32px、左に1pxの線、線上に14pxの角丸四角(#0D2A4A)。 */
.p-company__history {
width: min(1000px, 100%);
padding: 60px 0;
border-radius: var(--radius);
background: var(--color-bg);
}
.p-company__history-inner {
display: flex;
flex-direction: column;
width: min(800px, 100% - var(--gutter) * 2);
/* dl のブラウザ既定マージン（上下16px）を消す。カードが32px高くなっていた。 */
margin: 0 auto;
}
.p-company__history div {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 0 0 32px 32px;
border-left: 1px solid #EEEEEE;
}
.p-company__history div:last-child { border-left-color: transparent; padding-bottom: 0; }
.p-company__history div::before {
content: "";
position: absolute;
left: -7px;
top: 5px;
width: 14px;
height: 14px;
border-radius: 2px;
background: var(--color-navy-deep);
}
.p-company__history dt {
font-size: var(--fs-prose); /* 15px */
font-weight: var(--fw-bold);
line-height: 1.2; /* 18px */
color: var(--color-navy-deep);
}
.p-company__history dd {
margin: 0;
font-size: var(--fs-prose); /* 15px */
line-height: 1.6; /* 24px */
color: var(--color-text);
}
/* ---- リンク ---- */
.p-company__links {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
width: min(1000px, 100%);
padding: 40px;
border-radius: var(--radius);
background: var(--color-bg);
}
.p-company__links img {
width: 100%;
height: auto;
object-fit: contain;
}
@media (max-width: 767px) {
/* Figma実測（company-profile-mobile / President Message Card 350x786）:
本文（350x520）が先、そのあと 写真180x226 と 署名146x50 が横に並ぶ。
署名は下端そろえで、写真との間隔は24px。本文と写真ブロックの間は40px。
PCは「写真が左・本文が右」で署名は右下なので、SPだけ組み替える。 */
.p-company__section--message {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
column-gap: 24px;
row-gap: 40px;
justify-content: center;
width: min(350px, 100% - var(--gutter) * 2);
margin-inline: auto;
}
.p-company__section--message > .c-heading { grid-row: 1; grid-column: 1 / -1; }
.p-company__message { display: contents; }
.p-company__message-body { grid-row: 2; grid-column: 1 / -1; }
.p-company__message-body p + p { margin-top: 26px; } /* Figma: 段落間に1行あく（PCは詰める） */
.p-company__portrait {
grid-row: 3;
grid-column: 1;
width: 180px;
aspect-ratio: 180 / 226;
object-fit: cover;
border-radius: 4px;
/* 書き出し画像に水色の枠と角丸が入っているので、CSS側では余白を足さない */
}
.p-company__signature {
grid-row: 3;
grid-column: 2;
width: auto;
display: block;
align-self: end;
justify-content: flex-start;
text-align: left;
}
.p-company__signature-role,
.p-company__signature-name { display: block; }
.p-company__branches { grid-template-columns: 1fr; }
.c-affiliate { flex-direction: column; }
.c-affiliate img { width: 100%; }
/* Figma実測 SP: カード350（左右20） → 内側16で項目318 → さらに16で本文302。
カードを全幅390のまま組んでいたので本文が317pxあり、沿革の改行がずれていた。 */
/* スクロール領域（overflow-y:auto）は左右も切るので、目印の四角（left:-5px）が
はみ出して左半分が消えていた。カードの左余白を6px削って、その6pxを
スクロール領域の内側に付け替える。項目の開始位置は16pxのまま変わらない。 */
.p-company__history { width: calc(100% - var(--gutter) * 2); padding: 16px 16px 16px 10px; }
/* Figma実測 Timeline Outer 350x573 / padding16 → 中の Timeline Line は 318x541。
25件を全部並べると長いので、カンプどおり541pxで区切って縦スクロールさせる。
スクロールバーは 幅4・radius2、レール #E5E7EB・つまみ #003F8F。 */
.p-company__history-inner {
width: 100%;
padding-left: 6px;
max-height: 541px;
overflow-y: auto;
overscroll-behavior: contain;
}
/* Chrome/Safari は scrollbar-width を指定すると ::-webkit-scrollbar を無視するので、
標準プロパティは WebKit 疑似要素が無いブラウザ（Firefox）だけに当てる。 */
@supports not selector(::-webkit-scrollbar) {
.p-company__history-inner {
scrollbar-width: thin;
scrollbar-color: var(--color-blue) var(--color-border);
}
}
.p-company__history-inner::-webkit-scrollbar { width: 4px; }
.p-company__history-inner::-webkit-scrollbar-track {
border-radius: 2px;
background: var(--color-border);
}
.p-company__history-inner::-webkit-scrollbar-thumb {
border-radius: 2px;
background: var(--color-blue);
}
.p-company__history div { grid-template-columns: 1fr; gap: 4px; padding-left: 15px; }
/* Figma実測: 目印の四角は PC 14x14（-7, 5）／SP 10x10（-5, 4）。radiusはどちらも2 */
.p-company__history div::before { left: -5px; top: 4px; width: 10px; height: 10px; }
/* Figma SP実測: セクション余白48・中身は350px幅（左右20px）。
営業所の写真 350x160、関連会社のバナー 350x150、リンクのロゴ 140x35。 */
.p-company__section { padding-block: 56px; gap: 32px; } /* Figma実測 */
.p-company__lead,
.c-table,
.p-company__maplink,
.p-company__branches,
.p-company__affiliates,
.p-company__links { width: calc(100% - var(--gutter) * 2); }
/* Figma実測: SPは段落間に1行あく（14/24）。PCは詰める。 */
.p-company__maplink { margin-top: -20px; } /* SPの gap(32) → 12 */
.p-company__lead { font-size: var(--fs-body-sm); line-height: 1.714; }
.p-company__lead p + p { margin-top: 24px; }
.c-branch img { aspect-ratio: 350 / 160; }
/* Figma実測 Affiliate Card 350x316: radius8・写真350x150・Body padding20/gap12。
本文は13/22。padding 40 のままだと社名16文字(288px)が入らず2行に割れる。 */
.c-affiliate { border-radius: 8px; }
.c-affiliate img { height: 150px; }
.c-affiliate__body { padding: 20px; gap: 12px; }
.c-affiliate__detail { font-size: 0.8125rem; line-height: 1.692; }
.p-company__links { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 24px 20px; }
.p-company__links img { height: 35px; }
/* Figma実測 Company Profile Table 350x902: 外枠1px #D7E0EA・radius6。
ラベル行は padding12（14/17）、値の行は padding16（14/22）。 */
.c-table {
/* border-collapse: collapse だとテーブル自身の左右の枠線がセルに食われて消える */
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--color-border-soft);
border-radius: var(--radius);
overflow: hidden;
}
.c-table th { width: auto; }
.c-table th, .c-table td { display: block; }
/* Figma実測: ラベル行（塗り #F9FAFB）には枠線が無く、値の行だけ上下に1px。
最終行（資本金）の値には枠線が無い。 */
.c-table th { padding: 12px; border: 0; }
.c-table td { padding: 16px; border-block: 1px solid var(--color-border-soft); }
.c-table tr:last-child td { border: 0; }
/* Figma実測: 役職と氏名は縦に並び、組の間に1行あく（PCは横2列） */
.c-table__pairs { display: block; }
.c-table__pairs span { display: block; }
.c-table__pairs span:nth-child(even) { margin-bottom: 24px; }
.c-table__pairs span:last-child { margin-bottom: 0; }
/* SPカンプの書式。いずれも page-company.php 専用のパーツ。 */
.c-table th { font-size: var(--fs-body-sm); line-height: 1.21; } /* 14 / 17 */
.c-table td { font-size: var(--fs-body-sm); line-height: 1.57; } /* 14 / 22 */
.p-company__history dt { font-size: var(--fs-body-xs); line-height: 1.23; } /* 13 / 16 */
.p-company__history dd { font-size: var(--fs-body-xs); line-height: 1.54; } /* 13 / 20 */
.c-branch__name { font-size: 1.25rem; line-height: 1.45; } /* 20 / 29 */
.c-branch__address { font-size: var(--fs-body-sm); line-height: 1.57; } /* 14 / 22 */
/* Figma実測 Call Action 310x42: 枠線2px・gap8。PCと違いシェブロンは無い。 */
.c-branch__tel {
gap: 8px;
min-height: 42px;
border-width: 2px;
font-size: 0.9375rem;
line-height: 1.2; /* 15 / 18 */
}
.c-branch__tel svg:last-child { display: none; }
.c-affiliate__name { font-size: 1.125rem; line-height: 1.44; } /* 18 / 26 */
.c-linkbtn { font-size: var(--fs-body-xs); line-height: 1.23; } /* 13 / 16 */
.p-company__signature-name { font-size: 1.125rem; line-height: 1.44; } /* 18 / 26 */
.p-company__signature-role { font-size: var(--fs-body-sm); line-height: 1.43; } /* 14 / 20 */
}
/* =========================================================
フォーム（お問い合わせ / 採用応募）
========================================================= */
.p-form-lead {
width: min(var(--container), 100% - var(--gutter) * 2);
margin-inline: auto;
margin-bottom: 32px;
text-align: center;
font-size: var(--fs-body);
font-weight: var(--fw-medium); /* Figma実測 500 */
line-height: var(--lh-body);
color: var(--color-navy);
}
.c-form {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
.c-form__row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.c-form__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.c-form__label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem; /* 13px（Figma実測） */
font-weight: var(--fw-bold);
line-height: 1.38; /* 18px */
color: var(--color-blue);
}
.c-form__required {
padding: 2px 6px;
border-radius: 2px;
background: #E13B30;
color: var(--color-text-invert);
font-size: 0.625rem; /* 10px（Figma実測） */
font-weight: var(--fw-bold);
line-height: 1.2; /* 12px */
}
.c-form input[type="text"],
.c-form input[type="email"],
.c-form input[type="tel"],
.c-form select,
.c-form textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: #F7F9FB;
font-family: inherit;
font-size: var(--fs-body);
line-height: 1.6;
color: var(--color-navy);
}
.c-form textarea { min-height: 160px; resize: none; }
.c-form ::placeholder { color: #9CA3AF; }
.c-form input:focus-visible,
.c-form select:focus-visible,
.c-form textarea:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: 1px;
background: var(--color-bg);
}
/* セレクトの矢印 */
.c-form__select {
position: relative;
}
.c-form__select select {
appearance: none;
padding-right: 44px;
}
.c-form__select::after {
content: "";
position: absolute;
right: 18px;
top: 50%;
width: 10px;
height: 10px;
border-right: 2px solid var(--color-crumb-now);
border-bottom: 2px solid var(--color-crumb-now);
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
.c-form__consent {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--fs-body-sm);
color: var(--color-navy);
}
.c-form__consent input { width: 18px; height: 18px; accent-color: var(--color-blue); }
/* Figmaは「プライバシーポリシーに同意する」が1つのテキストで、下線もリンクも無い。
リンク自体は残すが、下線は外してカンプの見た目に寄せる。 */
.c-form__consent a { color: var(--color-blue); text-decoration: none; }
.c-form__consent a:hover { text-decoration: underline; }
.c-form__submit {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 56px;
padding: 0 24px;
border: 0;
border-radius: var(--radius);
background: var(--grad-cta);
color: var(--color-text-invert);
font-family: inherit;
font-size: var(--fs-body);
font-weight: var(--fw-bold);
line-height: 1.25; /* Figma実測 16/20 */
cursor: pointer;
transition: opacity .2s;
}
.c-form__submit:hover { opacity: .88; }
.c-form__submit svg { width: 18px; height: 18px; }
@media (max-width: 767px) {
.c-form__row { grid-template-columns: 1fr; }
}
/* ---- ファイル添付 ---------------------------------------- */
.c-form__dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 160px;
padding: 24px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: #F7F9FB;
text-align: center;
cursor: pointer;
transition: border-color .2s, background-color .2s;
}
.c-form__dropzone:hover,
.c-form__dropzone:focus-within,
.c-form__dropzone[data-drag="true"] {
border-color: var(--color-blue);
background: var(--color-bg-light);
}
.c-form__dropzone input[type="file"] {
position: absolute;
width: 1px; height: 1px;
clip-path: inset(50%);
overflow: hidden;
}
.c-form__dropzone-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-bg-light);
color: var(--color-blue);
}
.c-form__dropzone-icon svg { width: 22px; height: 22px; }
.c-form__dropzone-main {
font-size: var(--fs-body-sm); /* Figma実測 14px */
line-height: 1.2; /* 16.8px */
color: #6B7280;
}
.c-form__dropzone-main b { color: var(--color-navy-deep); font-weight: var(--fw-bold); line-height: 1.2; }
.c-form__dropzone-sub {
font-size: var(--fs-note); /* Figma実測 12px */
line-height: 1.2; /* 14.4px */
color: #9CA3AF;
}
.c-form__note {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--fs-note); /* Figma実測 12px */
line-height: 1.2; /* 14.4px */
color: #6B7280;
}
.c-form__note svg { width: 16px; height: 16px; flex: none; }
/* --- 送信結果の通知・エラー表示（Step 6。Figmaに該当画面が無いので、
既存のトークンと c-form の見た目に合わせて起こしたもの） --- */
/* ハニーポット。人には見えず、支援技術にも読ませない。display:none だと
埋めないボットがいるので、位置で画面外へ出す。 */
.c-form__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.c-form__notice {
margin-bottom: 24px;
padding: 20px 24px;
border-radius: var(--radius);
border: 1px solid var(--color-border);
background: var(--color-bg-light);
font-size: var(--fs-body-sm);
line-height: 1.7;
color: var(--color-navy);
}
.c-form__notice:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.c-form__notice-title {
margin-bottom: 6px;
font-size: var(--fs-body);
font-weight: var(--fw-bold);
line-height: 1.5;
}
.c-form__notice ul { margin: 6px 0 0; padding-left: 1.2em; list-style: disc; }
.c-form__notice li { margin-top: 2px; }
.c-form__notice--ok { border-color: var(--color-blue); }
.c-form__notice--ok:last-child { margin-bottom: 0; } /* 完了画面（フォーム本体なし）では枠の下に余白を残さない */
.c-form__notice-actions { margin-top: 20px; }
/* 職種ページ：募集停止の案内（管理画面「求人の内容」で「現在募集していない」にしたとき） */
.p-job-hero__closed {
display: inline-block;
margin-top: 16px;
padding: 8px 14px;
border: 1px solid #D14343;
border-radius: var(--radius);
color: #B02A2A;
font-size: var(--fs-body-sm);
font-weight: var(--fw-bold);
line-height: 1.5;
}
.c-form__notice--ok .c-form__notice-title { color: var(--color-blue); }
.c-form__notice--ng { border-color: #D14343; background: #FDF3F3; }
.c-form__notice-refile { margin-top: 8px; font-weight: var(--fw-bold); }
.c-form__notice--ng .c-form__notice-title { color: #B02A2A; }
.c-form__error {
font-size: var(--fs-note);
line-height: 1.5;
color: #B02A2A;
}
.c-form [aria-invalid="true"] {
border-color: #D14343;
background: #FDF3F3;
}
.c-form__dropzone:has([aria-invalid="true"]) {
border-color: #D14343;
background: #FDF3F3;
}
/* 選択したファイル名。JSが無い環境では出ないが、送信自体は成立する。 */
.c-form__files {
display: flex;
flex-direction: column;
gap: 4px;
font-size: var(--fs-note);
line-height: 1.5;
color: var(--color-navy);
}
.c-form__files:empty { display: none; }
.c-form__file { display: flex; align-items: center; gap: 8px; }
.c-form__file-remove {
flex: none;
width: 24px; height: 24px;
border: 1px solid var(--color-border);
border-radius: 50%;
background: var(--color-bg);
color: var(--color-navy);
font-size: 14px; line-height: 1;
cursor: pointer;
}
.c-form__file-remove:hover { background: var(--color-navy); color: var(--color-text-invert); }
@media (max-width: 767px) {
.c-form__notice { margin-bottom: 20px; padding: 16px; }
}
/* =========================================================
製品情報ページ
========================================================= */
.p-product { background: var(--grad-section); }
.p-product__section {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
padding-block: var(--space-section);
}
.p-product .c-heading { gap: 14px; }
.p-product__note {
/* Figma実測: PCは718px幅で中央。1200px幅いっぱいに流すと1行が長すぎて読みにくい */
width: min(718px, 100% - var(--gutter) * 2);
margin-inline: auto;
text-align: center;
font-size: var(--fs-body); /* Figma実測 16px */
font-weight: var(--fw-medium); /* 500 */
line-height: 1.75; /* 28px */
color: var(--color-text-sub);
}
.p-product__panels {
display: flex;
flex-direction: column;
gap: 32px;
width: min(var(--container), 100% - var(--gutter) * 2);
}
/* ---- 製品カード ---- */
.c-panel {
display: flex;
flex-direction: column;
gap: 20px;
padding: 48px;
border-radius: var(--radius);
background: var(--color-bg);
box-shadow: var(--shadow-soft);
}
.c-panel__title {
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: var(--fw-bold);
line-height: 1.214; /* Figma実測 28/34 */
color: var(--color-blue);
}
.c-panel__lead {
font-size: var(--fs-body-sm); /* 14px（Figma実測） */
font-weight: var(--fw-medium);
line-height: 1.79; /* 25px */
color: var(--color-text-sub);
}
/* Figma実測 Block Body 1104: 表724 ＋ 間隔20 ＋ 写真360。
産業機器だけ表の直下にTRUSCOロゴが入るので、左列を2行のグリッドにする。 */
.c-panel__body {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
grid-template-areas:
"table aside"
"logo aside";
gap: 20px;
align-items: start;
}
.c-panel__body .c-spec { grid-area: table; }
.c-panel__body .c-panel__logo-wrap { grid-area: logo; margin: 0; }
.c-panel__body .c-panel__aside { grid-area: aside; }
.c-panel__aside {
flex: none;
width: 360px;
height: auto;
border-radius: var(--radius-sm);
object-fit: cover;
}
.c-panel__gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.c-panel__gallery img {
width: 100%;
height: auto;
aspect-ratio: 354 / 220;
object-fit: cover;
border-radius: var(--radius-sm);
}
.c-panel__logo { width: 250px; height: auto; }
/* ---- 仕様テーブル ---- */
.c-spec {
width: 100%;
border-collapse: collapse;
font-size: 0.8125rem; /* 13px（Figma実測） */
line-height: 1.69; /* 22px */
color: var(--color-navy);
}
.c-spec th,
.c-spec td {
/* Figma実測 Cell: padding 12・枠線1px #EEEEEE。PCは両方とも白 */
padding: 12px;
border: 1px solid var(--color-border-hair);
text-align: left;
vertical-align: top;
}
.c-spec td { font-weight: var(--fw-medium); }
.c-spec th {
width: 170px; /* Figma実測 Cell 170x46 */
font-weight: var(--fw-bold);
white-space: nowrap;
}
.c-spec b { color: var(--color-blue); font-weight: var(--fw-bold); }
/* 日本語の組版をFigmaに合わせる。
line-break: strict … 長音符や小書き仮名を行頭に置かない（「リキサ｜ー」対策）
text-spacing-trim: space-all … Chrome 123+ は既定で約物（、。「」）の空きを詰めるため、
約物を含む行だけカンプより1文字多く入ってしまう。Figmaは詰めないので合わせる。
Safari/Firefox は元から詰めないので、この指定で3ブラウザの折り返しも揃う。 */
/* 日本語の組版をFigmaに合わせる。
line-break: strict 長音符や小書き仮名を行頭に置かない
text-spacing-trim Chrome 123+ は既定で約物（、。「」）の空きを詰めるため、
約物を含む行だけカンプより1文字多く入る。Figmaは詰めない。 */
body {
line-break: strict;
text-spacing-trim: space-all;
}
/* ---- 用途・使用場所 ---- */
/* Figma実測: カードは 448 と 672、間隔32（合計1152）。1200ではない。 */
.p-product__usage {
display: grid;
grid-template-columns: 448px minmax(0, 672px);
gap: 32px;
align-items: start;
justify-content: center;
width: min(1152px, 100% - var(--gutter) * 2);
}
/* Figma実測 Reference Card: 白・枠線1px #EEEEEE・radius6・padding28・gap20。影は無い */
.c-usage {
padding: 28px;
border: 1px solid var(--color-border-hair);
border-radius: var(--radius);
background: var(--color-bg);
}
.c-usage__title {
margin-bottom: 20px; /* Figma実測 gap 20 */
font-family: var(--font-serif);
font-size: 1.5rem; /* 24px */
font-weight: var(--fw-bold);
line-height: 1.33; /* 32px */
color: var(--color-navy-deep);
}
/* Figma実測: 使用場所の1列目は270px、用途は1列だけ */
.c-usage .c-spec th { width: 270px; color: var(--color-blue); white-space: normal; }
@media (max-width: 767px) {
/* Figma実測 Product Block: padding 24（左右も24。20だと本文が8px広くなって改行がずれる） */
.c-panel { padding: 24px; }
.c-panel__body {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "table" "logo" "aside";
}
.c-panel__aside { width: 100%; }
.c-panel__logo { width: 150px; } /* Figma実測 image 5 150x27 */
.c-panel__gallery { grid-template-columns: 1fr; }
.p-product__usage { grid-template-columns: 1fr; }
/* Figma実測: SPの注記は368px幅（350のコンテナから左右9pxはみ出している） */
.p-product__note { width: calc(100% - 22px); }
/* Figma実測（product_sp / Table Row）:
外枠1px #EEEEEE、行間も1px。**ラベル行だけ塗り #F9FAFB**。padding は12。
PCは両セルとも白なので、グレーはSPだけ。 */
.c-spec {
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--color-border-hair);
}
.c-spec th, .c-spec td {
display: block;
width: auto;
white-space: normal;
padding: 12px;
border: 0;
border-bottom: 1px solid var(--color-border-hair);
}
.c-spec th { background: var(--color-bg-hair); }
.c-spec tr:last-child td { border-bottom: 0; }
/* 用途・使用場所はSPだと表ではなく「1項目＝下線1本」のリストになる。
使用場所は 見出し(14px 700 #003F8F) の下に 補足(13px 500 #17213A) が積む。 */
.c-usage { padding: 20px; border-radius: 8px; }
.c-usage .c-spec { border: 0; }
.c-usage .c-spec tr { display: block; border-bottom: 1px solid var(--color-border-hair); }
.c-usage .c-spec th,
.c-usage .c-spec td { background: none; border: 0; padding: 0; }
.c-usage .c-spec th { padding: 12px 0 0; }
.c-usage .c-spec td { padding: 0 0 12px; }
.c-usage .c-spec tr:has(> td) th { padding-bottom: 0; }
.c-usage .c-spec tr:not(:has(> td)) th { padding-bottom: 12px; }
/* SPカンプの書式。製品仕様表と用途表で値が違うので分けて指定する。
製品仕様表 th 13px/16px（Figma L786〜）, td 13px/22px（変更なし）
用途・使用場所 th 14px/17px, td 13px/16px（Figma L4240〜/L4705〜） */
.c-spec th { line-height: 1.23; } /* 13 / 16 */
.c-usage .c-spec th { font-size: var(--fs-body-sm); line-height: 1.429; } /* 14 / 20 */
.c-usage .c-spec td { line-height: 1.462; } /* 13 / 19 */
.c-panel__title { font-size: 1.375rem; line-height: 1.45; } /* 22 / 32 */
.c-panel__lead { line-height: 1.71; } /* 14 / 24 */
.c-usage__title { font-size: 1.25rem; line-height: 1.45; } /* 20 / 29 */
}
/* =========================================================
お知らせ（一覧・詳細）
========================================================= */
.p-newslist {
width: min(800px, 100% - var(--gutter) * 2);
margin-inline: auto;
}
/* ページネーション
Figma実測（news_v1 / news_sp 共通）: 40x40・radius 4・間隔8px・中央寄せ。
現在ページは #003F8F の塗りに白文字、他は 1px #D1D5DB の枠線に #374151 の16px。
前へ／次へは #9CA3AF のシェブロン。
the_posts_pagination() はリンクを .nav-links で包むので、並べるのはそちら。 */
.c-pagination { margin-top: 40px; }
.c-pagination .nav-links {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.c-pagination .page-numbers {
display: grid;
place-items: center;
min-width: 40px;
height: 40px;
padding: 0 10px;
border: 1px solid #D1D5DB;
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: 1.5;
transition: border-color .2s, color .2s;
}
.c-pagination .page-numbers.current {
border-color: var(--color-blue);
background: var(--color-blue);
color: var(--color-text-invert);
}
.c-pagination .page-numbers.dots { border-color: transparent; background: none; }
.c-pagination .prev,
.c-pagination .next { color: #9CA3AF; }
.c-pagination .prev svg { transform: rotate(180deg); } /* 同じシェブロンを左右で使い回す */
.c-pagination .prev svg,
.c-pagination .next svg { width: 20px; height: 20px; }
.c-pagination a.page-numbers:hover { border-color: var(--color-blue); color: var(--color-blue); }
/* ---- 記事詳細 ---- */
.p-article {
padding-block: var(--space-section);
background: var(--grad-section);
}
.p-article__inner {
width: min(800px, 100% - var(--gutter) * 2);
margin-inline: auto;
}
.p-article__meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.p-article__title {
font-family: var(--font-serif); /* Figma実測: Noto Serif JP */
font-size: 1.75rem; /* 28px */
font-weight: var(--fw-bold);
line-height: 1.6;
color: var(--color-navy);
}
.p-article__title::after {
content: "";
display: block;
width: 56px;
height: 3px;
margin-top: 20px;
background: var(--color-blue);
}
.p-article__thumb {
width: 100%;
height: auto;
margin-top: 32px;
border-radius: var(--radius);
}
/* 本文（エディタ出力にそのまま効かせる） */
/* Figma実測 Article Body: 白・枠線1px #D7E0EA・radius6・padding PC48 / SP24 */
.c-article {
margin-top: 32px;
/* 本文カラムを704pxちょうどに（カード800 − 枠線2 − 左右47×2）。Figma実測 */
padding: 48px 47px;
border: 1px solid var(--color-border-soft);
border-radius: var(--radius);
background: var(--color-bg);
font-size: var(--fs-body); /* 16px（Figma実測） */
line-height: 1.875; /* 30px */
color: var(--color-navy);
}
.c-article > * + * { margin-top: 20px; }
.c-article h2 {
margin-top: 40px;
padding-left: 14px;
border-left: 4px solid var(--color-blue);
font-family: var(--font-serif); /* Figma実測: Noto Serif JP 700 26px */
font-size: 1.625rem;
font-weight: var(--fw-bold);
line-height: 1.462; /* 38px */
color: var(--color-navy);
}
.c-article h3 {
margin-top: 32px;
font-size: 1.25rem; /* 20px（Figma実測） */
font-weight: var(--fw-bold);
line-height: 1.5; /* 30px */
color: var(--color-navy);
}
.c-article h3::before {
content: "●";
margin-right: 8px;
color: var(--color-navy);
font-size: .7em;
vertical-align: .18em;
}
.c-article ul { padding-left: 22px; list-style: disc; }
.c-article ul li { margin-top: 6px; font-size: var(--fs-prose); line-height: 1.73; }
.c-article img { border-radius: var(--radius-sm); }
/* Figma実測 Section Divider: 本文幅 × 1px の #D7E0EA。段落の区切りに入る */
.c-article hr {
height: 1px;
margin: 32px 0;
border: 0;
background: var(--color-border-soft);
}
.c-article table {
width: 100%;
border-collapse: collapse;
}
.c-article th,
.c-article td {
padding: 12px 16px;
border: 1px solid var(--color-border);
font-size: var(--fs-body-sm); /* 14px（Figma実測） */
line-height: 1.714; /* td は 24px */
text-align: left;
vertical-align: top;
}
.c-article th { line-height: 1.571; } /* th は 22px */
/* 表の直前に置くタイトル。Figma「Table Title」= Noto Sans JP 700 18/28 */
.c-article__table-title {
margin-top: 32px;
font-weight: var(--fw-bold);
font-size: var(--fs-h4);
line-height: 1.556;
color: var(--color-navy);
}
.c-article thead th {
background: var(--color-blue);
color: var(--color-text-invert);
font-weight: var(--fw-bold);
}
.c-article tbody th {
width: 160px;
background: var(--color-bg-light);
color: var(--color-blue);
white-space: nowrap;
}
/* Figma実測: 引用の本文は 500。PC 16/30、SP 14/24 */
.c-article blockquote p { font-weight: var(--fw-medium); line-height: 1.875; }
/* Figma実測 Quote Block: 左に4pxのアクセント線、線から本文まで20px、
ブロックの内側余白は上下24（SPは20）・左右28。本文幅は PC624 / SP230。 */
.c-article blockquote {
margin-inline: 0;
padding: 24px 28px 24px 48px;
border-left: 4px solid var(--color-blue);
background: var(--color-bg-light);
}
/* 記事内の囲みボックス（エディタでは「グループ」に .is-note を付与） */
.c-article .is-note {
padding: 20px 24px;
border-radius: var(--radius-sm);
background: var(--color-bg-light);
}
.c-article .is-note > :first-child {
margin-top: 0;
color: var(--color-blue);
font-size: 1.0625rem; /* 17px（Figma実測 List Title） */
font-weight: var(--fw-bold);
line-height: 1.53;
}
.c-article__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 32px;
}
/* 記事下のリンクボタン（Figma: Article Link Buttons 486x52 / gap16 / btn 228x52） */
.c-article-links {
display: flex;
gap: 16px;
margin-top: 32px;
}
.c-article-links__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 228px;
min-height: 52px;
padding: 0 28px;
border: 1px solid var(--color-blue);
border-radius: var(--radius-sm);
background: var(--color-bg);
font-size: var(--fs-body-sm);
font-weight: var(--fw-bold);
line-height: 1.43;
color: var(--color-blue);
text-decoration: none;
transition: background-color .2s ease;
}
.c-article-links__btn:hover,
.c-article-links__btn:focus-visible { background: #EAF2FB; }
.c-article-links__badge {
display: grid;
place-items: center;
flex: none;
width: 34px;
height: 24px;
border-radius: 3px;
background: #EAF2FB;
font-family: var(--font-en);
font-size: 10px;
font-weight: var(--fw-bold);
line-height: 1.4;
letter-spacing: .04em;
}
/* 前後の記事 */
.p-article__nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 40px;
}
.p-article__nav a {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 24px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-bg);
font-size: var(--fs-body-sm);
color: var(--color-navy);
}
.p-article__nav a:hover { border-color: var(--color-blue); }
/* Figma実測: 前後記事のタイトルは 500 */
.p-article__nav a { font-weight: var(--fw-medium); }
.p-article__nav span { font-weight: var(--fw-bold); }
.p-article__nav span { color: var(--color-blue); }
.p-article__nav--next { text-align: right; }
.p-article__back {
display: flex;
justify-content: center;
margin-top: 32px;
}
@media (max-width: 767px) {
/* Figma実測: Article Body の padding は24だが、中のテキストノードは310px幅で
フレームの内寸302pxを8pxはみ出している。改行位置を合わせるため本文幅を310にする。 */
/* 本文カラムを310pxちょうどにする（カード350 − 枠線2 − 左右19×2）。
Figmaは padding24 と書きつつテキストノードが310pxで、内寸302を8pxはみ出している。 */
.c-article { padding: 24px 19px; }
.p-article__nav { grid-template-columns: 1fr; }
.c-article-links { flex-direction: column; }
.c-article-links__btn { width: 100%; }
.p-article__title { font-size: 1.375rem; }
}
/* =========================================================
採用情報ページ
========================================================= */
.p-recruit-page { background: var(--color-bg); }
/* ---- イントロ ---- */
/* Figma実測: 1440×714 のセクション全面に工場イラスト＋白のグラデーション。
中身は右寄せの740px（padding 60px 120px 60px 0）。 */
.p-recruit-intro {
display: flex;
align-items: center;
min-height: 714px;
background: url("../img/recruit-intro-bg.jpg") center / cover no-repeat;
}
.p-recruit-intro__inner {
display: flex;
justify-content: flex-end;
width: 100%;
}
.p-recruit-intro__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 40px;
width: min(740px, 100%);
padding: 60px 120px 60px 0;
}
.p-recruit-intro__title {
font-family: var(--font-serif);
font-size: clamp(1.500rem, 1.036rem + 1.905vw, 2.500rem); /* 24 → 40（Figma実測 40px） */
font-weight: var(--fw-bold);
line-height: 1.6; /* Figma実測 PC 40/64・SP 24/38.4 とも1.6 */
color: var(--color-blue);
}
.p-recruit-intro__text {
font-size: var(--fs-body);
line-height: 2.6; /* Figma実測 PC 16/41.6。SPは14/28 */
color: var(--color-navy);
}
.p-recruit-intro__text p + p { margin-top: 1.4em; }
/* ---- Benefits ---- */
/* Figma実測: 1200を 600 / 600 に二分（間隔なし）。右の600に 290+20+290 のカード2枚。 */
.p-benefits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: start;
width: min(var(--container), 100% - var(--gutter) * 2);
margin-inline: auto;
padding-block: var(--space-section);
}
.p-benefits__lead-en {
font-family: var(--font-en);
font-size: var(--fs-label);
font-weight: var(--fw-medium);
line-height: 1.264; /* Figma実測 18/22.75 */
color: var(--color-blue-dark);
}
.p-benefits__lead-ja {
margin-top: 12px;
font-family: var(--font-serif);
font-size: clamp(1.500rem, 1.036rem + 1.905vw, 2.125rem); /* 24 → 34（SPはFigma実測24px） */
font-weight: var(--fw-bold);
line-height: 1.44;
color: var(--color-navy);
}
.p-benefits__lead-note {
margin-top: 16px;
font-size: var(--fs-body); /* 16px（Figma実測） */
font-weight: var(--fw-medium);
line-height: 1.75; /* 28px */
color: var(--color-text-sub);
}
.p-benefits__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* Figma実測: 290×159.5 / padding 22px 24px / gap 16px 20px /
背景 linear-gradient(90deg,#FFFFFF,#F6FBFF) / 枠 1px rgba(0,104,201,.14) /
影 0 8px 20px rgba(14,64,116,.07) / radius 6 */
.c-benefit {
/* Figma実測 Article 290 / padding 24 → 内容242。枠線1px×2を引いて23にする */
padding: 22px 23px;
border: 1px solid rgba(0, 104, 201, 0.14);
border-radius: var(--radius);
background: linear-gradient(90deg, #FFFFFF 0%, #F6FBFF 100%);
box-shadow: 0 8px 20px rgba(14, 64, 116, 0.07);
}
.c-benefit__head {
display: flex;
align-items: center;
gap: 8px; /* Figma実測 */
margin-bottom: 16px; /* Figma実測 gap 16px */
font-family: var(--font-serif); /* Figma実測: Noto Serif JP 700 19px */
font-size: 1.1875rem;
font-weight: var(--fw-bold);
line-height: 1.47;
color: var(--color-blue);
}
/* Figma実測: 薄い青の丸（#E5F2FF）に #003F8F の線画アイコン */
.c-benefit__head span {
display: grid;
place-items: center;
flex: none;
width: 46px; /* Figma実測 */
height: 46px;
border-radius: 50%;
background: #E5F2FF;
color: var(--color-blue);
}
.c-benefit__head svg { width: 28px; height: 28px; } /* Figma実測 */
.c-benefit ul { display: flex; flex-direction: column; gap: 0; }
/* Figma実測（Item の左端から本文までの字下げ）
PC 240px幅・padding16 → 本文は16px下がる（中黒はその中）
SP 210px幅・padding12 → 本文は26px下がる（中黒は12pxの位置）
前回ここを「中黒をカードの外にぶら下げる」形にしたが、SPで中黒がカードの縁に
飛び出していた（2026-09-10 実機で指摘）。字下げ方式に戻す。 */
.c-benefit li {
position: relative;
padding-left: 16px;
font-size: var(--fs-body-sm); /* 14px */
font-weight: var(--fw-medium); /* 500 */
line-height: 1.64; /* 23px */
color: var(--color-navy);
}
/* Figma実測: 6×6の青い丸を左端・上から10.35px */
.c-benefit li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 6px;
height: 6px;
border-radius: 3px;
background: var(--color-blue);
}
/* ---- 写真の帯 ----
Figma: PCは 1440x460 の空の帯に5枚を重ねたコラージュ（1枚画像）だったが、
クライアント要望（2026-09-16）で「横に流れるアニメーション」にした。
5枚を段違いに並べた1組を3組並べ、1組ぶん左へ動かして先頭に戻す＝途切れないループ。
（2組だと1組の幅≒2,040pxより広い画面で右端が空く）
空は Figma の「Image (風景画像)」レイヤーの書き出し（recruit-sky.jpg 1440x316）を帯の上 70% に敷き、下 30% は白。
（コラージュ画像は両端で写真が切れていて再利用できない） */
.p-recruit-photos {
--yc-photos-h: clamp(300px, 32vw, 460px); /* 1440px幅で Figma と同じ 460 */
--yc-photos-gap: 24px;
--yc-photos-speed: 45s;
position: relative;
display: block;
width: 100%;
height: var(--yc-photos-h);
overflow: hidden;
background: #fff;
}
.p-recruit-photos::before {
content: "";
position: absolute;
inset: 0 0 30% 0; /* 上 70% が空（Figma: 空320 ＋ 白140 ≒ 7:3） */
background: url("../img/recruit-sky.jpg") center / cover no-repeat;
}
.p-recruit-photos__track {
position: relative; /* 空(::before)より手前に */
display: flex;
width: max-content;
height: 100%;
animation: yc-photos-slide var(--yc-photos-speed) linear infinite;
will-change: transform;
}
.p-recruit-photos__set {
display: flex;
flex: none;
align-items: flex-start;
gap: var(--yc-photos-gap);
height: 100%;
padding-right: var(--yc-photos-gap); /* 組と組の間も写真間と同じ間隔に */
}
.p-recruit-photos__photo {
flex: none;
width: auto;
height: 56.5%; /* 460px の帯で 260px */
border-radius: var(--radius);
object-fit: cover;
/* 段違い: 帯の余白（帯 − 写真 ＝ 写真高さの 77%）のうちどれだけ下げるか */
transform: translateY(calc(var(--yc-y, 0.5) * 77%));
}
.p-recruit-photos__photo:nth-child(5n + 1) { --yc-y: 0.85; }
.p-recruit-photos__photo:nth-child(5n + 2) { --yc-y: 0.15; }
.p-recruit-photos__photo:nth-child(5n + 3) { --yc-y: 0.9; }
.p-recruit-photos__photo:nth-child(5n + 4) { --yc-y: 0.3; }
.p-recruit-photos__photo:nth-child(5n + 5) { --yc-y: 0.6; }
@keyframes yc-photos-slide {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% / 3)); } /* 3組のうち1組ぶん */
}
@media (prefers-reduced-motion: reduce) {
.p-recruit-photos__track { animation: none; }
}
/* ---- 募集職種 ---- */
.p-jobs {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
padding-block: var(--space-section);
}
.p-jobs__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch; /* 3枚の高さを揃える */
width: min(var(--container), 100% - var(--gutter) * 2);
}
.p-jobs__list > li { display: flex; }
/* カード全体がリンク。中の「詳細を見る」の疑似要素をカード全面に広げる方式なので、
リンクは1つのまま（入れ子リンクにならず、スクリーンリーダーにも1件として読まれる）。 */
.c-job {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
border-radius: var(--radius);
background: var(--color-bg);
box-shadow: var(--shadow-card);
transition: box-shadow .2s, transform .2s;
}
.c-job:hover {
box-shadow: 0 12px 28px rgba(14, 64, 116, 0.16);
transform: translateY(-3px);
}
/* キーボード操作でもカードが光るように */
.c-job:focus-within {
outline: 2px solid var(--color-blue);
outline-offset: 2px;
}
.c-job:focus-within .c-job__more:focus-visible { outline: none; }
.c-job img {
width: 100%;
height: auto;
aspect-ratio: 385 / 185;
object-fit: cover;
transition: transform .3s;
}
.c-job:hover img { transform: scale(1.04); }
/* Figma実測 PC: カード384・本文336 → padding24。SP: カード350・本文318 → padding16 */
.c-job__body { display: flex; flex-direction: column; flex: 1; gap: 14px; padding: 24px; }
.c-job__dept {
align-self: flex-start;
padding: 3px 10px;
border: 1px solid var(--color-blue);
border-radius: var(--radius-sm);
font-size: var(--fs-note);
font-weight: var(--fw-bold);
color: var(--color-blue);
}
.c-job__title {
font-family: var(--font-serif);
font-size: clamp(1.125rem, 1.032rem + 0.381vw, 1.375rem); /* 18 → 22（Figma実測 SP18 / PC22） */
font-weight: var(--fw-bold);
line-height: 1.45; /* 32px */
color: var(--color-navy);
}
.c-job__tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* Figma実測: 120x28 のピル（padding 5/12・radius999）。
4px/10px・radius4 にしていたので3つとも1行に収まってしまい、
Figmaでは2行に折り返しているカードが1行になっていた。 */
.c-job__tags span {
padding: 5px 12px;
border-radius: 999px;
background: var(--color-bg-light);
font-size: var(--fs-note);
font-weight: var(--fw-medium);
line-height: 1.2; /* Figma実測 12/14.4 */
color: var(--color-navy);
}
.c-job__text { font-size: var(--fs-body-sm); line-height: 1.71; color: var(--color-text-sub); }
.c-job__more {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
margin-top: auto; /* カード下端に揃える */
padding-top: 6px;
font-size: var(--fs-body-sm);
font-weight: var(--fw-bold);
color: var(--color-blue);
}
.c-job__more svg { width: 14px; height: 14px; transition: transform .2s; }
.c-job:hover .c-job__more svg { transform: translateX(3px); }
/* クリック範囲をカード全面に広げる */
.c-job__more::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.c-job,
.c-job img,
.c-job__more svg { transition: none; }
.c-job:hover { transform: none; }
.c-job:hover img { transform: none; }
}
/* ---- 採用までの流れ ---- */
.p-flow {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
padding-block: var(--space-section);
background: var(--grad-section);
}
/* Figma実測 PC(Frame 12 882x64): 180pxのカード4枚＋▶3個、間隔18px */
.p-flow__steps {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 18px;
}
/* Figma実測 PC(Frame 13 180x64): padding 16/8・gap8・radius8・影なし。
丸番号は 32x32。SPは 169x56 で padding12・gap8。 */
.c-step {
display: flex;
align-items: center;
gap: 8px;
width: 180px;
min-height: 64px;
padding: 16px 8px;
border-radius: 8px;
background: var(--color-bg);
font-size: var(--fs-body-sm);
font-weight: var(--fw-medium); /* Figma実測: 500 14px #0D2A4A */
line-height: 1.57;
color: var(--color-navy-deep);
}
.c-step b {
display: grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
font-size: var(--fs-body-sm); /* Figma実測 14px */
border-radius: 50%;
background: var(--color-navy);
color: var(--color-text-invert);
}
.p-flow__arrow { color: var(--color-navy-deep); font-size: 1.125rem; font-weight: var(--fw-bold); }
/* ---- ENTRY ---- */
/* Figma実測: Section_Recruit は 1440×531 の全面背景画像。TOPのENTRYと同一。 */
.p-entry {
position: relative;
display: flex;
align-items: center;
min-height: 531px;
overflow: hidden;
background: var(--grad-section);
}
.p-entry__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
/* Figmaは scaleMode: FILL を無変換＝中央。トップの .p-recruit と同じ扱い。 */
object-position: center;
pointer-events: none;
}
.p-entry__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
width: min(var(--container), 100% - var(--gutter) * 2);
margin-inline: auto;
}
.p-entry__title {
font-family: var(--font-en-display);
font-size: var(--fs-entry);
font-weight: var(--fw-bold);
line-height: .98;
color: var(--color-blue);
}
/* ENTRYのボタンだけ 18px（Figma実測 18/18） */
.p-entry__inner .c-btn { font-size: var(--fs-button); line-height: 1; }
.p-entry__text {
/* Figma実測: Noto Serif JP 700。PC 22/39.6、SP 18/28 */
font-family: var(--font-serif);
font-size: clamp(1.125rem, 1.032rem + 0.381vw, 1.375rem);
font-weight: var(--fw-bold);
line-height: 1.8;
color: var(--color-navy);
}
@media (max-width: 767px) {
/* SPのFigmaは「上に画像の帯、その下に白地で本文」。背景に敷くと文字が読めない。 */
.p-recruit-intro {
display: block;
min-height: 0;
background: var(--color-bg);
}
.p-recruit-intro::before {
content: "";
display: block;
width: 100%;
aspect-ratio: 1440 / 714;
background: url("../img/recruit-intro-bg.jpg") center / cover no-repeat;
}
.p-recruit-intro__inner { justify-content: flex-start; }
.p-recruit-intro__body { width: 100%; padding: 32px var(--gutter) 48px; gap: 28px; }
/* SPも同じ帯を流す（Figmaの2列グリッドはアニメーション化に伴い廃止 2026-09-16） */
.p-recruit-photos { --yc-photos-h: 260px; --yc-photos-gap: 12px; --yc-photos-speed: 35s; }
.p-benefits { grid-template-columns: 1fr; gap: 32px; }
.p-benefits__grid { grid-template-columns: 1fr; }
.p-jobs__list { grid-template-columns: 1fr; }
/* Figma実測: SPだけ背景画像の上に白50%が乗る（PCは無し）。トップと同じ。
画像側を薄くするのではなく、上に白を重ねる。 */
.p-entry { z-index: 0; }
.p-entry__bg { z-index: 0; max-width: 100%; }
.p-entry::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgba(255, 255, 255, .5);
}
.p-entry__inner {
z-index: 2;
align-items: center;
text-align: center;
}
/* Figma実測: ENTRYのボタンは 304px（他のSPボタンは全幅350px） */
.p-entry__inner .c-btn { width: 304px; }
}
/* =========================================================
採用 職種ページ
========================================================= */
/* Figma実測(1440px時): 画像700 ＋ gap48 ＋ 本文572 ＋ 右余白120。
画面が1440pxより広くても同じ比率で伸びるよう%で指定する。 */
.p-job-hero {
display: grid;
/* %はこの要素の内容幅（1440 − 右余白120 = 1320）に対してかかる。
1440基準で書いていたため画像が641px・本文が634pxになっていた。
Figma実測は 画像700 ／ 間隔48 ／ 本文572。 */
grid-template-columns: 53.0303% minmax(0, 1fr); /* 700/1320 */
gap: 3.6364%; /* 48/1320 */
align-items: center;
padding: 60px 8.3333% 0 0; /* 120/1440 */
background: var(--color-bg);
}
.p-job-hero img {
width: 100%;
height: auto;
aspect-ratio: 700 / 404;
object-fit: cover;
border-radius: 0 20px 20px 0;
}
.p-job-hero__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.p-job-hero__title {
font-family: var(--font-serif);
font-size: clamp(1.375rem, 1.143rem + 0.952vw, 2rem); /* 22 → 32（Figma実測 SP22 / PC32） */
font-weight: var(--fw-bold);
line-height: 1.6; /* PC 32/51.2。SPは22/30.8 */
color: var(--color-navy);
}
.p-job-hero__text {
font-size: var(--fs-body); /* 16px（Figma実測） */
line-height: 1.75;
color: var(--color-text-sub);
}
/* Figma実測: 職種ページの部署バッジは18px、タグは #F3F3F3 のピル型に 500 16px の青文字 */
.p-job-hero .c-job__dept { font-size: 1.125rem; line-height: 1.45; } /* Figma実測 18/26.1 */
.p-job-hero .c-job__tags span {
padding: 8px 20px;
border-radius: 999px;
background: #F3F3F3;
font-size: var(--fs-body);
font-weight: var(--fw-medium);
line-height: 0.875;
color: var(--color-blue);
}
/* 募集要項 */
/* Figma実測: 見出しは左、項目は右976px。dtは全幅、ddは720pxを右寄せ。どちらも下線。 */
.p-job-spec {
display: flex;
align-items: flex-start;
gap: 0;
width: min(var(--container), 100% - var(--gutter) * 2);
margin-inline: auto;
/* Figma実測: Main の子（Container / Job List / よくある1日）はいずれも strokes 無し。
上下の罫線を引いていたのでヒーロー下と1日の流れの前に余計な線が出ていた（2026-09-10） */
padding-block: var(--space-section);
}
.p-job-spec__head { flex: none; width: 224px; }
.p-job-spec__head .c-heading { align-items: flex-start; text-align: left; gap: 8px; }
.p-job-spec__head .c-heading__ja { color: var(--color-navy-deep); line-height: 0.94; }
.p-job-spec dl {
flex: 1;
min-width: 0;
margin: 0; /* ブラウザ既定の 1em マージンを消す */
padding-top: 120px;
}
/* Figma実測: 項目間28px、項目名→本文は8px。gapだと両方に28px入ってしまう */
.p-job-spec dt {
margin-top: 28px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-border-soft);
font-family: var(--font-serif); /* Figma実測: Noto Serif JP 700 18px lh32 */
font-size: 1.125rem;
font-weight: var(--fw-bold);
line-height: 1.78;
color: var(--color-navy-deep);
}
.p-job-spec dl > dt:first-child { margin-top: 0; }
.p-job-spec dd {
width: min(720px, 100%);
margin: 8px 0 0 auto;
font-size: var(--fs-body-sm); /* 14px（Figma実測） */
line-height: 2.07; /* 29px */
color: #4B5563;
}
/* Figma実測: 見出しに padding 0 0 8px ＋ border-bottom 1px #EEEEEE、下のリストとは8px */
.p-job-spec dd h4 {
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #EEEEEE;
font-family: var(--font-serif); /* Noto Serif JP 700 14px */
font-size: var(--fs-body-sm);
font-weight: var(--fw-bold);
line-height: 2.07;
color: #4B5563;
}
.p-job-spec dd h4 + ul { margin-bottom: 20px; }
.p-job-spec dd > *:last-child { margin-bottom: 0; }
/* Figmaのテキストノードは lineTypes: UNORDERED（＝箇条書き）。
characters に「・」が入らないので「記号なし」と誤読して一度消したが、
PCカンプでは黒丸付きで描画される（2026-09-10 再確認）。 */
.p-job-spec dd ul { padding-left: 20px; list-style: disc; }
.p-job-spec dd ol { padding-left: 20px; list-style: decimal; }
.p-job-spec dd li { margin-top: 4px; }
.p-job-spec dd li p { margin-top: 2px; }
/* ある1日 */
.p-routine {
padding-block: var(--space-section);
background: var(--grad-section);
}
.p-routine__inner {
width: min(var(--container), 100% - var(--gutter) * 2);
margin-inline: auto;
}
.p-routine__en {
font-family: var(--font-en);
font-size: var(--fs-label);
font-weight: var(--fw-medium);
line-height: 1.264; /* Figma実測 18/22.75 */
color: var(--color-blue-dark);
}
.p-routine__title {
margin-top: 8px;
font-family: var(--font-serif);
font-size: var(--fs-h2); /* 34px（Figma実測） */
font-weight: var(--fw-bold);
line-height: 1.44;
color: var(--color-navy);
}
.p-routine__note {
margin-top: 12px;
font-size: var(--fs-body); /* 16px（Figma実測） */
font-weight: var(--fw-medium);
line-height: 1.75;
color: var(--color-text-sub);
}
/* Figma実測: Timeline Container 1200×231 / padding 48 / radius 8 /
影 0 8px 22px rgba(0,52,112,.078)。中の Track は 1104px、各Itemは等幅で gap12。
ステップの間は短い横線でつなぐ。 */
.p-routine__list {
display: flex;
align-items: flex-start;
margin-top: 40px;
padding: 48px;
border-radius: 8px;
background: var(--color-bg);
box-shadow: 0 8px 22px rgba(0, 52, 112, 0.078);
}
.c-routine {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
/* Figma実測 Track: Item 117px と Connector 24x2(#0D2A4A) が交互に並ぶ。
丸から丸まで引き通すのではなく、項目の間に短い線が1本入るだけ。
時刻17px + gap12 = 29px が丸の上端、丸48pxなので中心は 53px。 */
.c-routine + .c-routine::before {
content: "";
position: absolute;
top: 52px;
left: -12px;
width: 24px;
height: 2px;
background: var(--color-navy-deep);
}
.c-routine { position: relative; }
.c-routine__time { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); line-height: 1.21; color: var(--color-navy-deep); }
/* Figma実測: 48pxの丸。業務のステップは濃紺(#0D2A4A)地に白アイコン、
休憩などのステップは薄い面(#F4F7FB)に濃紺(#17213A)アイコン、と交互に切り替わる。 */
/* Figma実測: 淡色(#F4F7FB)の丸には 1px #0D2A4A の外周線が付く。
濃色(#0D2A4A)の丸には線は無い。PC・SP共通。 */
.c-routine__icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border: 1px solid var(--color-navy-deep);
border-radius: 50%;
background: #F4F7FB;
color: var(--color-navy);
}
.c-routine--on .c-routine__icon {
border-color: transparent;
background: var(--color-navy-deep);
color: var(--color-text-invert);
}
.c-routine__icon svg { width: 24px; height: 24px; }
/* Figma実測: 見出しは Noto Serif JP 700 18px lh26 #0D2A4A、補足は 13px #607087 */
.c-routine__label {
font-family: var(--font-serif);
font-size: 1.125rem;
font-weight: var(--fw-bold);
line-height: 1.44;
color: var(--color-navy-deep);
}
.c-routine__label + .c-routine__sub { margin-top: -8px; }
.c-routine__sub { font-size: 0.8125rem; line-height: 1.23; color: var(--color-text-sub); }
@media (max-width: 1199px) {
/* Figma SP実測: バッジ → 見出し → 画像 → タグ → 本文 の順 */
.p-job-hero {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 24px 0 0;
}
.p-job-hero__body { display: contents; }
/* Figma実測 Hero_Section: 子は x=16 / 幅358（求人詳細ページだけ余白16px） */
.p-job-hero .c-job__dept { order: 1; margin-inline: 16px; }
.p-job-hero__title { order: 2; margin-inline: 16px; }
/* Figma実測 JobImage 358x210・radius8。他の子と同じ左右16pxの余白に収まる（全幅ではない）。
元画像は1400x860（1.63）なので比率を指定しないと縦に伸びる。 */
.p-job-hero img {
order: 3;
width: calc(100% - 32px); /* 置換要素は width:auto だとストレッチしないので実寸で指定 */
margin-inline: 16px;
border-radius: 8px; /* Figma実測 JobImage の radius */
aspect-ratio: 358 / 210;
object-fit: cover;
}
.p-job-hero .c-job__tags { order: 4; margin-inline: 16px; }
.p-job-hero__text { order: 5; margin-inline: 16px; }
/* Figma実測: SPの RequirementsSection だけ上下に1px #E5E7EB が入る（PCのMainは無し）。
PC側の余分な罫線を消したときに一緒に消してしまっていた（2026-09-10）。 */
.p-job-spec { flex-direction: column; gap: 32px; border-block: 1px solid var(--color-border); }
.p-job-spec__head { width: 100%; }
.p-job-spec dl { padding-top: 0; }
.p-job-spec dd { width: 100%; margin-left: 0; }
/* Figma実測: SPは RequirementItem（見出し＋本文）の下に1px。
見出しの下線はPCの Heading 3 だけで、SPには無い。 */
.p-job-spec dt { border-bottom: 0; padding-bottom: 0; }
.p-job-spec dd { padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.p-job-spec dd h4 { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 899px) {
/* Figma SP（recruit-general-affairs-mobile / VerticalTimeline）:
横並びをやめて縦のタイムラインになる。
行は 時刻60 → gap16 → 丸48 → gap16 → テキスト178、行高72、行間4。
囲みは白・radius 8・padding 20。 */
.p-routine__list {
flex-direction: column;
gap: 4px;
margin-top: 32px;
padding: 20px;
}
.c-routine {
flex: none;
width: 100%;
display: grid;
grid-template-columns: 60px 48px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 16px;
align-items: center;
min-height: 72px;
text-align: left;
}
/* Figma実測: TimelineRow は最終行まで下線1px（アイコンの外周線は共通ルール側） */
.c-routine { border-bottom: 1px solid var(--color-border); }
.c-routine__time { grid-area: 1 / 1 / 3 / 2; }
.c-routine__icon { grid-area: 1 / 2 / 3 / 3; }
.c-routine__label { grid-area: 1 / 3 / 2 / 4; align-self: end; font-size: 1rem; line-height: 1.44; }
.c-routine__sub { grid-area: 2 / 3 / 3 / 4; align-self: start;
margin-top: 2px; font-size: var(--fs-body-sm); line-height: 1.45; }
.c-routine__label + .c-routine__sub { margin-top: 2px; }
/* PC用の横のつなぎ線は縦並びでは意味を持たないので消す */
.c-routine + .c-routine::before { content: none; }
}
/* =========================================================
SDS情報ページ
========================================================= */
.p-sds__lead {
width: min(var(--container), 100% - var(--gutter) * 2);
margin-inline: auto;
margin-bottom: 28px;
font-size: var(--fs-prose);
line-height: var(--lh-prose);
color: var(--color-navy);
}
.p-sds__lead small { display: block; font-size: var(--fs-body-sm); color: var(--color-text-sub); }
/* 絞り込み */
.p-sds__filter {
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
width: min(var(--container), 100% - var(--gutter) * 2);
margin-inline: auto;
margin-bottom: 20px;
}
/* Figma実測（SDS_v1 / SDS_sp 共通）: Inter 400 14px / 行高17px。
未選択 #374151、選択中は色だけ青に変わる（太さは400のまま）。 */
.p-sds__filter label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-en);
font-size: var(--fs-body-sm);
line-height: 1.21;
color: var(--color-text);
cursor: pointer;
}
.p-sds__filter input { accent-color: var(--color-blue); width: 16px; height: 16px; }
.p-sds__filter input:checked + span { color: var(--color-blue); }
/* 一覧テーブル */
.p-sds__wrap {
width: min(var(--container), 100% - var(--gutter) * 2);
margin-inline: auto;
overflow-x: auto;
border-radius: var(--radius);
background: var(--color-bg);
box-shadow: var(--shadow-soft);
}
/* Figma実測の列幅
PC 1200 : 分類112 / 商品名472 / メーカー240 / 改訂日168 / DL208
SP 670 : 分類 80 / 商品名210 / メーカー140 / 改訂日120 / DL120
自動幅にしていたので商品名の列が広くなり、カンプでは2行に折れる商品名が1行になっていた。 */
.c-sds {
width: 100%;
min-width: 670px;
table-layout: fixed;
border-collapse: collapse;
font-size: var(--fs-body-sm);
color: var(--color-navy);
}
.c-sds thead th:nth-child(1) { width: 9.34%; } /* 112/1200 */
.c-sds thead th:nth-child(2) { width: 39.33%; } /* 472/1200 */
.c-sds thead th:nth-child(3) { width: 20%; } /* 240/1200 */
.c-sds thead th:nth-child(4) { width: 14%; } /* 168/1200 */
.c-sds thead th:nth-child(5) { width: 17.33%; } /* 208/1200 */
.c-sds th,
.c-sds td {
padding: 14px 16px;
border-bottom: 1px solid #E5EAF0;
line-height: 1.571; /* Figma実測 14/22 */
text-align: left;
vertical-align: middle;
}
/* Figma実測: 商品名は500 #17213A / メーカーは400 #374151 / 改訂日は500 #4B5563 */
.c-sds tbody td:nth-child(2) { font-weight: var(--fw-medium); }
.c-sds tbody td:nth-child(3) { color: var(--color-text); }
.c-sds thead th {
background: var(--color-blue);
color: #EEEEEE; /* Figma実測。純白ではない */
font-weight: var(--fw-bold);
white-space: nowrap;
}
.c-sds tbody tr:hover { background: #FAFCFE; }
.c-sds__badge {
display: inline-block;
min-width: 52px;
padding: 4px 8px;
border-radius: var(--radius-sm);
background: var(--color-bg-light);
color: var(--color-blue);
font-family: var(--font-en); /* Figma実測: Inter 700 13px */
font-size: 0.8125rem;
font-weight: var(--fw-bold);
line-height: 1.385; /* Figma実測 13/18 */
text-align: center;
}
.c-sds td.c-sds__date {
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-weight: var(--fw-medium);
line-height: 1.429; /* Figma実測 14/20 */
color: var(--color-text-sub); /* #607087 */
}
.c-sds__dl {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 80px;
padding: 8px 14px;
border: 1px solid var(--color-blue);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-blue);
font-family: var(--font-en); /* Figma実測: Inter 700 12px */
font-size: var(--fs-note);
font-weight: var(--fw-bold);
white-space: nowrap;
}
.c-sds__dl:hover { background: var(--color-blue); color: var(--color-text-invert); }
.c-sds__dl svg { width: 14px; height: 14px; }
@media (max-width: 767px) {
/* Figma実測 SP: 分類80 / 商品名210 / メーカー140 / 改訂日120 / DL120（計670）。
ただし DL の見出し「ダウンロード（PDF）」は14px太字で約135pxあり、
内寸88pxのセルに収まらず右端で切れる（カンプ側もテキストがセルをはみ出している）。
最終列だけ見出しが入る幅（168 = 135 + 左右16）に広げ、表全体を718pxにする。 */
.c-sds { min-width: 718px; }
.c-sds thead th:nth-child(1) { width: 80px; }
.c-sds thead th:nth-child(2) { width: 210px; }
.c-sds thead th:nth-child(3) { width: 140px; }
.c-sds thead th:nth-child(4) { width: 120px; }
.c-sds thead th:nth-child(5) { width: 168px; }
}
.c-sds__none { color: var(--color-text-sub); font-size: var(--fs-note);
font-weight: var(--fw-bold); line-height: 1.5; } /* Figma実測 700 12/18 */
.p-sds__lead p { font-size: var(--fs-body); line-height: 1.75; color: var(--color-text); }
/* SPではテーブルが横スクロールになるため、その旨を伝える */
.p-sds__scroll-note {
display: none;
width: min(var(--container), 100% - var(--gutter) * 2);
margin: 0 auto 8px;
font-size: var(--fs-note);
color: var(--color-text-sub);
}
@media (max-width: 767px) {
.p-sds__scroll-note { display: block; }
}
.p-sds__empty {
padding: 32px;
text-align: center;
color: var(--color-text-sub);
}
@media (max-width: 767px) {
.p-sds__filter { gap: 10px 16px; }
}
/* =========================================================
SPカンプ実測値の上書き
2026-09-10 に Figma API（_api/file.json）と突き合わせて確定した値。
PC側と差があるものだけをここに置く。値を変えるときは必ず
design/verify-spec.py を通してから直すこと。
========================================================= */
@media (max-width: 767px) {
.l-footer__contact { border-radius: 8px; } /* Figma実測 SP 8px */
/* パンくずは1行に収める（Figma実測 390x40）。
記事タイトルが長いとSPで2行になり帯が伸びるので、末尾を省略する。 */
.c-breadcrumb__inner { flex-wrap: nowrap; }
.c-breadcrumb__inner > a { flex: none; }
.c-breadcrumb [aria-current="page"] {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 見出し帯（Aパターン: 和文 28/36、英字 14/20） */
.p-page-hero__ja { line-height: 1.286; }
.p-page-hero__en { font-size: var(--fs-body-sm); line-height: 1.429; }
/* セクション見出し（32/51.2）。
Figmaは「横浜ケミカル株式会社の」1行が352pxで、コンテナ350pxを2px超える。
折り返させると「の」だけが next line に落ちるので、SPでは改行位置を
に任せる。 */
.c-heading__ja { line-height: 1.6; white-space: nowrap; }
.p-recruit-page .c-heading__en { font-size: var(--fs-body-sm); line-height: 1.625; } /* 14/22.75 */
/* Figma実測: SPのセクション内ボタンは全幅（350px）で枠線1.5px。
ENTRYのボタンだけ 304px。 */
.c-btn { border-width: 1.5px; }
.p-about__heading + .c-btn,
.p-about .c-btn,
.p-products__action .c-btn,
.p-news__action .c-btn,
.p-recruit-intro .c-btn { width: 100%; } /* Figma実測 Button 350x51（全幅） */
/* Figma実測 Section_News_SP 390x642: 地は #F4F7FB、上下に1px #E5E7EB。
記事行だけ白で全幅390（本文は左右20pxの内寄せ）。PCは白地なのでSPのみ。 */
.p-news {
background: var(--color-bg-light);
border-block: 1px solid var(--color-border);
}
.p-news__list {
width: 100vw;
margin-inline: calc(50% - 50vw);
background: var(--color-bg);
}
.p-news__item { padding-inline: var(--gutter); }
.p-recruit__inner .c-btn { width: 304px; }
/* トップ */
.p-about__title { line-height: 1.4; } /* 28/39.2 */
.p-about__lead { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.5; } /* 16/24 */
.p-recruit__title { line-height: 1.067; } /* 60/64 */
/* 会社概要 */
.p-company__policy-text { font-size: var(--fs-body); line-height: 1.8; } /* 16/28.8 */
/* フッター（SPは500。PCは700） */
.l-footer__contact-text { font-weight: var(--fw-medium); }
/* フォーム */
.p-form-lead { font-size: var(--fs-body-sm); line-height: 1.714; } /* 14/24 */
.c-form__dropzone-main b { line-height: 1.286; } /* 14/18 */
/* 下層ページ本文（14/24） */
.c-prose { line-height: 1.714; }
/* 記事 */
.c-article blockquote p { font-size: var(--fs-body-sm); line-height: 1.714; } /* 14/24 */
/* Figma実測（news_article_mobile・本文カラム310）
Bullet List Block : padding20 → 270、中黒の列16 → 本文254
H3 Block : ●が本文カラムの外に8px出て、本文300
Quote Block : 左の余白52（線4＋48）・右28 → 本文230
表 : 1列目116 / 2列目190 */
.c-article .is-note { padding: 20px; }
.c-article .is-note ul { padding-left: 16px; }
.c-article h3 { margin-left: -8px; }
.c-article h3::before { margin-right: 2px; } /* ●14 + 2 = 16 → 本文300 */
/* Figma実測 1列目116 / 2列目190・セルのpadding12 → 内容166 */
.c-article thead th:first-child { width: 118px; } /* 枠線1pxぶん足して内容166 */
.c-article th, .c-article td { padding: 12px; }
.c-article blockquote { padding-block: 20px; }
.c-article table { table-layout: fixed; }
.c-article tbody th { width: 37.4%; }
/* 採用情報 */
.p-recruit-intro__text { font-size: var(--fs-body-sm); line-height: 2; } /* 14/28 */
.p-benefits__lead-en { font-size: var(--fs-body-sm); line-height: 1.625; } /* 14/22.75 */
.p-benefits__lead-note { font-size: var(--fs-body-sm); line-height: 1.571; } /* 14/22 */
.c-benefit__head { font-size: 1rem; line-height: 1.5; } /* 16/24 */
.c-benefit li { font-size: var(--fs-caption); line-height: 1.538; /* 13/20 */
padding-left: 26px; } /* Figma実測 SP の字下げ */
/* Figma実測 SP: 行高20の中で 6px の中黒が y=7（＝上下中央）。10pxだと3px下がる。 */
.c-benefit li::before { left: 12px; top: 7px; }
.c-job__text { font-size: var(--fs-note); line-height: 1.667; } /* 12/20 */
.c-job__body { padding: 16px; } /* Figma実測 SP 350→本文318 */
.c-job { border-radius: 12px; } /* Figma実測 Card radius 12 */
/* Benefits（Figma実測 Benefits Section 390x799 / カード132・間隔12・余白40） */
.p-benefits { padding-block: 40px; gap: 24px; }
.p-benefits__grid { gap: 12px; }
.c-benefit { padding: 20px; }
/* ENTRY */
.p-entry { min-height: 346px; } /* Figma実測 Section_Recruit_SP 390x346 */
.p-entry__title { line-height: 1.067; } /* 60/64 */
.p-entry__text { line-height: 1.556; } /* 18/28 */
/* 求人詳細 */
.p-job-hero__title { line-height: 1.4; } /* 22/30.8 */
.p-job-hero__text { font-size: var(--fs-caption); line-height: 1.7; } /* 13/22.1 */
.p-job-hero .c-job__dept { font-size: var(--fs-note); line-height: 1.448; } /* 12/17.38 */
.p-job-hero .c-job__tags span {
font-size: var(--fs-note-sp);
font-weight: var(--fw-bold);
line-height: 1.448;
color: var(--color-blue);
} /* 11/15.93 */
.p-job-spec dt { font-size: var(--fs-body-sm); line-height: 1.437; } /* 14/20.12 */
.p-job-spec dd { font-size: var(--fs-caption); line-height: 1.6; } /* 13/20.8 */
.p-routine__en,
.p-job-spec .c-heading__en { font-size: var(--fs-note); font-weight: var(--fw-bold); line-height: 1.21; } /* 12/14.52 */
/* Figma実測 SectionHeader 358x99（Routine 15 / 見出し 24-32 / 補足 14-20、間隔6） */
.p-routine__title { margin-top: 6px; font-size: 1.5rem; line-height: 1.333; }
.p-routine__note { margin-top: 6px; font-size: var(--fs-body-sm); line-height: 1.429; }
/* セクションの上下余白はFigma実測で48px（PCは60px） */
.p-routine, .p-job-spec { padding-block: 48px; }
/* Figma実測: 求人詳細ページのSPだけ左右の余白が16px（他ページは20px）。
内寸358pxを350pxで組むと13px本文が1文字ぶん早く折り返す。 */
.p-job-spec,
.p-routine__inner { width: calc(100% - 32px); }
/* Figma実測: SPの SectionHeader は counterAxisAlignItems=CENTER（PCは左寄せ 120px） */
.p-job-spec__head .c-heading { align-items: center; text-align: center; }
.p-routine__inner > .p-routine__en,
.p-routine__inner > .p-routine__title,
.p-routine__inner > .p-routine__note { text-align: center; }
.p-job-spec { gap: 24px; } /* Figma実測 RequirementsSection */
/* Figma実測: Recruitment Process の中身は Section(gap24) で、
セクションの上下余白は48。外側の itemSpacing 32 は子が1つなので効いていない。 */
.p-flow { gap: 24px; padding-block: 48px; }
/* Figma実測: SPは169pxの2列×2行（間隔12）。PCの ▶ はSPカンプに無い。 */
.p-flow__arrow { display: none; }
.p-flow__steps {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
/* Figma実測: 中身は350px（左右20px）。100%だと画面端まで届いてしまう */
width: calc(100% - var(--gutter) * 2);
}
.c-step { width: auto; min-height: 56px; padding: 12px; }
#jobs { gap: 24px; } /* Figma実測 Company Features */
.p-job-hero { padding-bottom: 32px; }
}