/* ==================================================
富士梱包 TOP PAGE STYLES
Figmaデザイン忠実実装
================================================== */
/* ---------- Root Variables ---------- */
:root {
--color-blue: #0050d1;
--color-red: #ca242e;
/* ボタンのホバー色（Figma botton_normal / botton_contact の after を実測・2026-10-08） */
--color-blue-hover: #00307d; /* 青ボタン → 濃紺 */
--color-blue-hover-2: #0040a7; /* 白ボタン → 青 */
--color-red-hover: #8a1319; /* 赤ボタン → 暗い赤 */
--color-bg-gray: #f3f3f3;
--color-text: #3e3e3e;
--color-footer: #262626;
--color-white: #fff;
--font-ja: 'Noto Sans JP', 'Hiragino Sans', 'ヒラギノ角ゴ Pro', sans-serif;
--font-en: 'Poppins', sans-serif;
--font-logo: 'Sarabun', sans-serif;
--font-mincho: 'Noto Serif JP', 'Hiragino Mincho ProN', 'ヒラギノ明朝 ProN', 'Yu Mincho', 'YuMincho', serif;
/* デザイン指定は Helvetica Neue LT Pro（Adobe有償）。Macは本物のHelvetica Neue、他OSはInterで代替 */
--font-deco: 'Helvetica Neue', 'Inter', 'Arial', sans-serif;
}
/* ---------- Global Reset ---------- */
.top-page *, .top-page *::before, .top-page *::after {
box-sizing: border-box;
}
.top-page { margin: 0; padding: 0; background: var(--color-bg-gray); }
.top-page ul { list-style: none; margin: 0; padding: 0; }
.top-page a { text-decoration: none; color: inherit; }
.top-page img { display: block; max-width: 100%; }
.top-page p { margin: 0; }
/* ==================================================
HEADER
================================================== */
.top-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
display: flex;
align-items: center;
padding: 0 50px;
z-index: 100;
/* 透過：FVの上に被さる。スクロール後は is-scrolled（top.js / business.js）で Navy 背景 */
transition: background .3s;
}
.top-header.is-scrolled {
background: rgba(0, 12, 33, .9);
}
.top-header__inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Logo */
.top-header__logo {
display: block;
position: relative;
height: 80px;
width: 125px;
flex-shrink: 0;
}
.top-header__logo img,
.top-header__logo svg {
width: 67px;
height: 67px;
position: absolute;
bottom: 0;
left: 0;
}
.top-header__logo span {
font-family: var(--font-logo);
font-weight: 700;
font-size: 15px;
letter-spacing: 1.5px;
color: var(--color-white);
position: absolute;
bottom: 24px;
left: 44px;
white-space: nowrap;
}
/* Nav */
.top-header__nav ul {
display: flex;
gap: 50px;
height: 100px;
align-items: center;
}
.top-header__nav ul li a {
font-family: var(--font-ja);
font-weight: 600;
font-size: 16px;
letter-spacing: 1.6px;
color: var(--color-white);
transition: opacity .2s;
}
.top-header__nav ul li a:hover { opacity: .7; }
/* モバイルメニュー専用パーツ（PCでは非表示） */
.top-header__nav-extra { display: none; }
/* Contact button */
.top-header__contact-btn {
background: var(--color-red);
color: var(--color-white);
font-family: var(--font-ja);
font-weight: 700;
font-size: 16px;
letter-spacing: 1.6px;
height: 50px;
padding: 0 24px;
display: flex;
align-items: center;
flex-shrink: 0;
transition: background-color .2s;
}
/* Hamburger（モバイルのみ表示。開閉は header.js） */
.top-header__menu-btn {
display: none;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 44px;
height: 44px;
padding: 8px;
background: transparent;
border: none;
cursor: pointer;
flex-shrink: 0;
}
.top-header__menu-btn span {
display: block;
width: 100%;
height: 2px;
background: var(--color-white);
transition: transform .3s, opacity .3s;
}
.top-header.is-menu-open .top-header__menu-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.top-header.is-menu-open .top-header__menu-btn span:nth-child(2) { opacity: 0; }
.top-header.is-menu-open .top-header__menu-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* ページ別リセット（.business-page a 等）や :visited に負けないよう文字色を固定 */
a.top-header__contact-btn,
a.top-header__contact-btn:link,
a.top-header__contact-btn:visited,
a.top-header__contact-btn:hover,
a.top-header__contact-btn:focus {
color: var(--color-white) !important;
}
/* hover: 暗い赤に（Figma botton_contact の after。#ca242e + 黒40% 相当） */
.top-header__contact-btn:hover { background: var(--color-red-hover); } /* 2026-10-08 デザイン実測値 #8a1319 に（旧 #79161c） */
/* ==================================================
FV (FIRST VIEW / HERO)
================================================== */
.fv-section {
position: relative;
height: 1000px;
overflow: hidden;
background: #111;
}
.fv-section__bg {
position: absolute;
inset: -30px -4px 0;
}
.fv-section__bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* FVスライダー：top.js が is-active を付け替えてクロスフェード */
.fv-section__slide {
opacity: 0;
transition: opacity 1.5s ease;
}
.fv-section__slide.is-active {
opacity: 1;
}
.fv-section__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .2);
}
/* Copy */
.fv-section__copy {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
text-align: center;
white-space: nowrap;
}
/* overflow:hidden の箱がマスクになり、文字が箱の中から立ち上がる */
.fv-section__main-copy {
overflow: hidden;
padding-bottom: 8px;
}
.fv-section__main-copy .fv-section__h1 {
font-family: var(--font-ja);
font-weight: 700;
font-size: clamp(34px, 3.6vw, 64px);
letter-spacing: .08em;
line-height: 1.4;
color: var(--color-white);
text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
margin: 0;
animation: revealUp 1.1s cubic-bezier(.22, 1.35, .36, 1) .3s both;
}
.fv-section__sub-copy {
overflow: hidden;
padding-bottom: 6px;
}
.fv-section__sub-copy p {
font-family: var(--font-en);
font-weight: 600;
font-style: italic;
font-size: clamp(18px, 1.8vw, 32px);
letter-spacing: .06em;
line-height: 1.5;
color: var(--color-white);
text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
margin: 0;
animation: revealUp 1.1s cubic-bezier(.22, 1.35, .36, 1) .65s both;
}
/* うにょーん：マスク下から少し伸びながら現れて着地 */
@keyframes revealUp {
0% { transform: translateY(115%) scaleY(1.15); opacity: 0; }
60% { opacity: 1; }
100% { transform: translateY(0) scaleY(1); opacity: 1; }
}
/* ==================================================
COMMON SECTION HELPERS
================================================== */
.top-section {
position: relative;
overflow: hidden;
}
.top-section__container {
max-width: 1200px;
margin: 0 auto;
padding: 100px 0;
position: relative;
z-index: 2;
}
/* Decorative bg text */
.top-section__bg-text {
position: absolute;
bottom: 20px;
left: -15px;
font-family: var(--font-deco);
font-weight: 500;
font-size: 200px;
line-height: 1;
color: var(--color-bg-gray);
transform: translateY(50%);
white-space: nowrap;
pointer-events: none;
z-index: 1;
}
/* Section Heading */
.section-heading {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.section-heading__title {
font-family: var(--font-ja);
font-weight: 500;
font-size: 24px;
letter-spacing: 1.2px;
color: var(--color-text);
}
.section-heading--white .section-heading__title { color: var(--color-white); }
.section-heading__bar {
height: 5px;
width: 100%;
background: #e0e0e0;
position: relative;
}
.section-heading__bar::before {
content: '';
position: absolute;
left: 0; top: 0;
height: 100%;
width: 150px;
background: var(--color-red);
}
.section-heading--white .section-heading__bar { background: rgba(255,255,255,.3); }
/* Buttons */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: space-between;
background: var(--color-blue);
color: var(--color-white);
font-family: var(--font-ja);
font-weight: 700;
font-size: 16px;
letter-spacing: 1.6px;
width: 220px;
height: 45px;
padding: 0 20px 0 30px;
transition: background-color .2s;
}
/* ページ別リセット（.top-page a 等）や :visited に負けないよう文字色を固定
※ CONTACT青背景版は 2026-10-07 に廃止（全ページ白地に統一） */
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:focus {
color: var(--color-white);
}
/* hover: 背景を暗く＋矢印の円を白塗り・矢印を青に（Figma botton_normal color=blue, hover=after） */
.btn-primary:hover { background: var(--color-blue-hover); }
.btn-primary:hover .btn-arrow {
background: var(--color-white);
border-color: var(--color-white);
color: var(--color-blue);
}
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: space-between;
background: var(--color-white);
color: var(--color-blue);
font-family: var(--font-ja);
font-weight: 700;
font-size: 16px;
letter-spacing: 1.6px;
width: 220px;
height: 45px;
padding: 0 20px 0 30px;
transition: background-color .2s, color .2s;
}
a.btn-outline,
a.btn-outline:link,
a.btn-outline:visited {
color: var(--color-blue);
}
/* hover: 青背景＋白文字・矢印は白アウトラインに（Figma botton_normal color=white, hover=after） */
a.btn-outline:hover,
a.btn-outline:focus {
color: var(--color-white);
}
.btn-outline:hover {
background: var(--color-blue-hover-2);
color: var(--color-white);
}
.btn-arrow {
width: 25px;
height: 25px;
border: 1px solid currentColor;
border-radius: 50%;
transition: background-color .2s, color .2s, border-color .2s;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.btn-primary .btn-arrow { border-color: var(--color-white); }
/* ==================================================
NEWS SECTION
================================================== */
.top-section--news {
background: var(--color-white);
}
.top-section--news .top-section__container {
display: flex;
flex-direction: column;
gap: 0;
padding: 100px 0;
}
.top-section--news .top-section__bg-text {
color: var(--color-bg-gray);
font-size: 200px;
}
.news-card {
background: var(--color-white);
border-radius: 30px;
box-shadow: 0 0 10px rgba(132, 144, 175, .2);
padding: 50px 70px;
display: flex;
flex-direction: column;
gap: 30px;
align-items: center;
}
.news-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 0;
}
.news-item {
display: flex;
align-items: center;
gap: 20px;
padding: 15px 0;
border-bottom: 1px solid #e0e0e0;
}
.news-item__date {
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
letter-spacing: .7px;
color: var(--color-text);
white-space: nowrap;
flex-shrink: 0;
min-width: 120px;
}
.news-item__tag {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid;
border-radius: 5px;
padding: 0 5px;
height: 25px;
min-width: 85px;
font-size: 14px;
letter-spacing: 0;
font-family: var(--font-ja);
font-weight: 500;
flex-shrink: 0;
white-space: nowrap;
}
.news-item__tag--blue { border-color: #0e5fe9; color: #0e5fe9; }
.news-item__tag--green { border-color: #70ca46; color: #70ca46; }
.news-item__tag--orange { border-color: #e9820e; color: #e9820e; }
.news-item__title {
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
letter-spacing: .7px;
color: var(--color-text);
flex: 1;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
a.news-item__title:hover { text-decoration: underline; }
/* ==================================================
BUSINESS SECTION
================================================== */
.top-section--business {
background: #191a1b;
padding: 0;
}
.top-section--business .top-section__container {
max-width: 1320px;
display: flex;
flex-direction: column;
gap: 60px;
padding: 110px 0 100px;
}
.business-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.business-bg__base {
position: absolute;
inset: 0;
background: #191a1b;
}
.business-bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: overlay;
opacity: .6;
}
.top-section--business .top-section__bg-text {
color: rgba(193, 193, 193, .3);
right: -5px;
left: auto;
text-align: right;
top: 93px;
bottom: auto;
transform: translateY(-50%);
font-size: 200px;
}
.business-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
/* ---- Business Diagram ---- */
.business-diagram {
position: relative;
width: 650px;
height: 635px;
flex-shrink: 0;
}
/* Outer connecting circle */
.business-diagram__connector {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 440px;
height: 440px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .15);
z-index: 1;
}
/* Center hub（デザインは円背景なし・リング画像の上にテキストのみ） */
.business-diagram__center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
z-index: 3;
}
.business-diagram__center-en {
font-family: var(--font-en);
font-weight: 600;
font-style: italic;
font-size: 20px;
line-height: 24px;
color: var(--color-white);
text-align: center;
}
.business-diagram__center-text {
font-family: var(--font-ja);
font-weight: 700;
font-size: 25px;
letter-spacing: 2.5px;
color: var(--color-white);
text-align: center;
line-height: 30px;
white-space: nowrap;
}
/* Satellite circles */
.business-diagram__item {
position: absolute;
width: 200px;
height: 200px;
z-index: 2;
}
.business-diagram__circle {
position: relative;
width: 200px;
height: 200px;
background: rgba(40, 40, 40, .8);
backdrop-filter: blur(4px);
border-radius: 50%;
border: 1px solid var(--color-white);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 24px 20px 20px;
text-align: center;
}
/* Pentagon placement (top / top-right / bottom-right / bottom-left / top-left) */
.business-diagram__item--top {
top: 5px;
left: 50%;
transform: translateX(-50%);
}
.business-diagram__item--top-right {
top: 165px;
right: 0;
}
.business-diagram__item--bottom-right {
bottom: 0;
right: 50px;
}
.business-diagram__item--bottom-left {
bottom: 0;
left: 50px;
}
.business-diagram__item--top-left {
top: 165px;
left: 0;
}
.business-diagram__label {
/* 円の上端にまたがるピル（Figma 2202:3802） */
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-blue);
color: var(--color-white);
font-family: var(--font-ja);
font-weight: 600;
font-size: 18px;
letter-spacing: .9px;
height: 32px;
border-radius: 16px;
padding: 0 14px;
white-space: nowrap;
}
.business-diagram__icon {
width: 60px;
height: 60px;
object-fit: contain;
}
.business-diagram__desc {
font-family: var(--font-ja);
font-weight: 600;
font-size: 15px;
letter-spacing: 1.5px;
color: var(--color-white);
line-height: 20px;
}
/* ---- Business Right ---- */
.business-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 30px;
align-items: flex-end;
}
.business-right__text {
font-family: var(--font-ja);
font-weight: 700;
font-size: 24px;
letter-spacing: 1.2px;
color: var(--color-white);
line-height: 34px;
width: 100%;
}
.business-list {
width: 100%;
display: flex;
flex-direction: column;
}
.business-list__item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid rgba(255,255,255,.25);
}
.business-list__content {
display: flex;
flex-direction: column;
gap: 4px;
}
.business-list__en {
font-family: var(--font-deco);
font-weight: 700;
font-size: 24px;
letter-spacing: .48px;
line-height: 25px;
color: var(--color-white);
display: block;
}
.business-list__ja {
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
letter-spacing: .7px;
color: var(--color-white);
display: block;
}
.business-list__arrow {
width: 30px;
height: 30px;
border: 1px solid var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 14px;
flex-shrink: 0;
transition: background-color .2s, color .2s;
}
/* ページ別リセットや :visited に負けないよう白を固定 */
a.business-list__arrow,
a.business-list__arrow:link,
a.business-list__arrow:visited {
color: var(--color-white);
}
/* hover: 円を白塗り・矢印を青に（Figma 2234:12633 の after 状態） */
.business-list__arrow:hover,
a.business-list__arrow:hover,
a.business-list__arrow:focus {
background: var(--color-white);
color: var(--color-blue);
}
/* ==================================================
VOICE SECTION
================================================== */
.top-section--voice {
background: var(--color-white);
height: 800px;
}
.top-section--voice .top-section__container {
display: flex;
flex-direction: column;
gap: 80px;
justify-content: center;
height: 100%;
padding: 100px 0;
}
.top-section--voice .top-section__bg-text {
color: var(--color-bg-gray);
font-size: 180px;
right: 270px;
left: auto;
text-align: center;
bottom: 20px;
transform: translateY(50%);
}
/* Rounded blurred background card */
.voice-bg-card {
position: absolute;
top: 50%;
left: 50px;
right: 50px;
transform: translateY(-50%);
height: 700px;
border-radius: 40px;
overflow: hidden;
}
.voice-bg-card img {
width: 60%;
height: 110%;
object-fit: cover;
object-position: center;
filter: blur(20px);
transform: scale(1.05);
opacity: .7;
}
.voice-bg-card__overlay {
position: absolute;
inset: 0;
background: rgba(194, 194, 194, .25);
}
.voice-cards {
display: flex;
gap: 30px;
justify-content: center;
padding: 10px;
}
.voice-card {
background: var(--color-white);
border-radius: 15px;
padding: 22px;
width: 340px;
display: flex;
flex-direction: column;
gap: 15px;
flex-shrink: 0;
}
.voice-card__image {
background: #c9c9c9;
height: 160px;
width: 100%;
flex-shrink: 0;
border-radius: 5px;
}
.voice-card__company {
font-family: var(--font-ja);
font-weight: 700;
font-size: 13px;
letter-spacing: 1.3px;
color: var(--color-blue);
margin: 0;
}
.voice-card__title {
font-family: var(--font-ja);
font-weight: 700;
font-size: 18px;
letter-spacing: 1.8px;
color: #000;
margin: 0;
line-height: 1.5;
}
.voice-card__divider {
border: none;
border-top: 1px solid #e0e0e0;
margin: 0;
}
.voice-card__text {
font-family: var(--font-ja);
font-weight: 500;
font-size: 16px;
letter-spacing: 1.6px;
color: var(--color-text);
line-height: 20px;
}
/* ==================================================
RECRUIT SECTION
================================================== */
.top-section--recruit {
background: var(--color-blue);
min-height: 500px;
overflow: hidden;
}
.top-section--recruit .top-section__container {
display: flex;
flex-direction: column;
gap: 50px;
align-items: flex-start;
padding: 120px 0 100px;
}
.top-section--recruit .top-section__bg-text {
color: rgba(255, 255, 255, .3);
font-size: 200px;
bottom: 20px;
left: -15px;
transform: translateY(50%);
}
.recruit-text {
font-family: var(--font-ja);
font-weight: 700;
font-size: 18px;
letter-spacing: 1.8px;
color: var(--color-white);
line-height: 1.7;
max-width: 520px;
}
.recruit-images {
display: flex;
gap: 30px;
position: absolute;
/* コンテナ（max-width:1200px）の右端に揃える。ビューポート基準の固定値だと中間幅でテキストに重なるため */
right: max(0px, calc(50% - 600px));
top: 113px;
}
.recruit-images__main {
width: 300px;
height: 250px;
background: rgba(243,243,243,.15);
}
.recruit-images__sub {
width: 300px;
height: 200px;
background: rgba(243,243,243,.15);
margin-top: 84px;
}
.recruit-images__main img,
.recruit-images__sub img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ==================================================
CONTACT SECTION
================================================== */
.top-contact {
background: var(--color-white);
min-height: 250px;
display: flex;
align-items: center;
/* 1920px時にデザインの左右200pxと同等。狭いウィンドウでは40pxまで詰める */
padding: 40px;
}
.top-contact__inner {
width: 100%;
max-width: 1520px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px 40px;
}
.top-contact__inner .btn-primary,
.top-contact__inner .btn-outline {
flex-shrink: 0; /* ボタンを圧縮させない（潰れて縦書きになるのを防ぐ） */
}
.top-contact__text {
display: flex;
align-items: center;
gap: 50px;
color: var(--color-blue);
}
.top-contact__title {
font-family: var(--font-deco);
font-weight: 500;
font-size: 50px;
letter-spacing: 5px;
line-height: 1;
}
.top-contact__desc {
font-family: var(--font-ja);
font-weight: 500;
font-size: 24px;
letter-spacing: 2.4px;
white-space: nowrap;
}
/* ==================================================
RESPONSIVE（タブレット・スマホ）
PC（1100px〜）の見た目は変更しない
================================================== */
/* ---------- 〜1299px：採用画像を少し縮めてテキストとの重なりを防ぐ ---------- */
@media (max-width: 1299px) {
.recruit-images { gap: 20px; }
.recruit-images__main,
.recruit-images__sub { width: 250px; }
.recruit-images__main { height: 210px; }
.recruit-images__sub { height: 170px; margin-top: 70px; }
}
/* ---------- 〜1099px：ハンバーガーメニュー＋レイアウト縦積み ---------- */
@media (max-width: 1099px) {
/* ヘッダー：ナビを全画面オーバーレイに（完全不透明・後ろを見せない） */
.top-header__nav {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh;
background: #000c21;
z-index: 98;
}
/* ヘッダー（ロゴ＋✕）の下から左揃えリスト＋下部にお問い合わせ */
.top-header.is-menu-open .top-header__nav {
display: flex;
flex-direction: column;
padding: 100px 24px 40px;
overflow-y: auto;
animation: menuFadeIn .25s ease both;
}
@keyframes menuFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* PC用の height:100px 等をどの状況でも確実に打ち消す */
.top-header__nav ul,
.top-header.is-menu-open .top-header__nav ul {
display: flex;
flex-direction: column;
height: auto;
min-height: 0;
gap: 0;
width: 100%;
margin: 0;
text-align: left;
}
.top-header__nav ul li {
border-bottom: 1px solid rgba(255, 255, 255, .25);
}
.top-header__nav ul li a {
display: block;
padding: 16px 6px;
font-size: 16px;
}
/* メニュー下部：ひとこと＋お問い合わせボタン */
.top-header.is-menu-open .top-header__nav-extra {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: 44px;
}
.top-header__nav-note {
font-family: var(--font-ja);
font-weight: 500;
font-size: 13px;
letter-spacing: 1px;
line-height: 1.9;
color: var(--color-white);
text-align: center;
}
.top-header__nav-contact,
a.top-header__nav-contact:link,
a.top-header__nav-contact:visited {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: min(280px, 100%);
height: 52px;
border-radius: 999px;
background: var(--color-white);
color: #000c21;
font-family: var(--font-ja);
font-weight: 700;
font-size: 15px;
letter-spacing: 1.5px;
}
.top-header__menu-btn { display: flex; }
.top-header__logo,
.top-header__contact-btn,
.top-header__menu-btn { position: relative; z-index: 99; }
.top-header__contact-btn { margin-left: auto; margin-right: 16px; }
/* メニュー展開中はバーの赤ボタンを隠す（メニュー内のボタンに集約） */
.top-header.is-menu-open .top-header__contact-btn { display: none; }
/* コンテンツの左右余白を確保 */
.top-section__container,
.top-section--news .top-section__container,
.top-section--business .top-section__container,
.top-section--voice .top-section__container,
.top-section--recruit .top-section__container {
padding-left: 40px;
padding-right: 40px;
}
/* 事業内容：ダイアグラムと一覧を縦積み */
.business-content {
flex-direction: column;
align-items: center;
gap: 40px;
}
.business-diagram {
transform: scale(.8);
transform-origin: top center;
margin-bottom: -127px; /* scale分の余白詰め（635px→508px） */
}
.business-right {
align-items: flex-start;
width: 100%;
max-width: 650px;
}
/* お客様の声：カードを折り返し */
.top-section--voice { height: auto; }
.voice-cards { flex-wrap: wrap; }
.voice-card { flex-shrink: 1; }
.voice-bg-card {
top: 40px;
bottom: 40px;
height: auto;
transform: none;
}
/* 採用情報：画像プレースホルダーは非表示（実写真受領後にモバイル配置を再検討） */
.recruit-images { display: none; }
.top-contact { padding: 40px; }
}
/* ---------- 〜767px：スマホ ---------- */
@media (max-width: 767px) {
/* ヘッダー */
.top-header {
height: 70px;
padding: 0 16px;
}
.top-header__logo {
transform: scale(.72);
transform-origin: left center;
}
.top-header__contact-btn {
height: 40px;
padding: 0 14px;
font-size: 13px;
letter-spacing: 1px;
margin-right: 8px;
}
/* FV */
.fv-section { height: 640px; }
.fv-section__main-copy .fv-section__h1 {
font-size: 27px;
letter-spacing: .06em;
}
.fv-section__sub-copy p { font-size: 16px; }
/* 飾り背景テキスト（各セクションの個別指定より後勝ちさせる） */
.top-section__bg-text,
.top-section--news .top-section__bg-text,
.top-section--business .top-section__bg-text,
.top-section--voice .top-section__bg-text,
.top-section--recruit .top-section__bg-text {
font-size: 80px;
}
.top-section--voice .top-section__bg-text { right: 20px; }
/* セクション余白 */
.top-section__container,
.top-section--news .top-section__container,
.top-section--business .top-section__container,
.top-section--voice .top-section__container,
.top-section--recruit .top-section__container {
padding: 60px 20px;
}
/* お知らせ */
.news-card {
padding: 30px 20px;
border-radius: 20px;
}
.news-item {
flex-wrap: wrap;
gap: 8px 16px;
}
.news-item__date { min-width: 0; }
.news-item__title {
flex-basis: 100%;
-webkit-line-clamp: 2;
}
/* 事業内容ダイアグラム（650px→358px相当）
※2026-09-02 に一度SP専用の縦積みカードへ組み替えたが、ユーザー指示で円配置のまま戻した。
320px端末では横にはみ出す（650×.5＝325px > 320px）が、意図どおりこの見せ方を維持する。 */
.business-diagram {
transform: scale(.55);
margin-bottom: -286px;
}
.business-right__text { font-size: 18px; }
.business-list__en { font-size: 20px; }
/* お客様の声 */
.voice-card {
width: 100%;
max-width: 340px;
}
.voice-bg-card {
left: 20px;
right: 20px;
}
/* 採用情報 */
.recruit-text { font-size: 16px; }
/* CONTACT */
.top-contact {
padding: 40px 20px;
min-height: 0;
}
.top-contact__inner {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.top-contact__text {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.top-contact__title { font-size: 36px; }
.top-contact__desc {
font-size: 16px;
white-space: normal;
}
/* ボタン */
.btn-primary,
.btn-outline { width: min(220px, 100%); }
}
/* ---------- 〜400px：小さいスマホ ----------
※FVコピーの font-size 指定はここから外した（2026-09-02）。
ファイル後方の v2 / v3 ブロック（どちらも max-width:767px で、この指定より後ろ）に
後勝ちで上書きされて効いていなかったため。320px対応は v3ブロックの clamp() 下限で行う。
ダイアグラムの縮小率だけはここが後勝ちになるので残している。 */
@media (max-width: 400px) {
.business-diagram {
transform: scale(.5);
margin-bottom: -318px;
}
}
/* ==================================================
共通スクロールリビール（header.js が .js-rv を付与）
JS無効・reduced-motion 環境ではクラスが付かず常に表示
================================================== */
.js-rv {
opacity: 0;
transform: translateY(24px);
transition: opacity .7s ease, transform .7s ease;
}
.js-rv.is-in {
opacity: 1;
transform: none;
}
/* ==================================================
トップへ戻る追従ボタン（footer-custom.php・モバイルのみ表示）
================================================== */
.back-to-top {
position: fixed;
right: 16px;
bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 110;
display: none;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(0, 12, 33, .85);
color: var(--color-white);
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 12, 33, .3);
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity .3s, transform .3s;
}
.back-to-top svg {
width: 16px;
height: 16px;
}
.back-to-top.is-visible {
opacity: 1;
transform: none;
pointer-events: auto;
}
@media (max-width: 767px) {
.back-to-top { display: flex; }
/* 採用ページはSP追従エントリーバー（58px）の上に逃がす */
.recruit-page .back-to-top { bottom: calc(74px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
.js-rv {
opacity: 1;
transform: none;
transition: none;
}
.back-to-top { transition: none; }
}
/* ==================================================
モバイル改修 v2（デザイン指示書 2026-07-07・§2）
@media 内への追加のみ。PC(768px超)の見た目は変更しない。
同ファイル上方のSP指定より後勝ちで上書きする
================================================== */
@media (max-width: 767px) {
/* --- 2-2 FV: 高さは70svh程度・コピーはclampで制御 --- */
.fv-section {
height: 70vh; /* svh非対応ブラウザ用フォールバック */
height: 70svh;
min-height: 480px;
}
.fv-section__main-copy .fv-section__h1 { font-size: clamp(26px, 7vw, 48px); }
.fv-section__sub-copy p { font-size: clamp(15px, 4.5vw, 24px); }
/* --- 2-3 巨大英字ウォーターマーク: 固定px → clamp（親 .top-section は overflow:hidden 済み） --- */
.top-section__bg-text,
.top-section--news .top-section__bg-text,
.top-section--business .top-section__bg-text,
.top-section--voice .top-section__bg-text,
.top-section--recruit .top-section__bg-text {
font-size: clamp(64px, 18vw, 200px);
}
/* --- 2-3 セクション上下余白: SP 64px 目安 --- */
.top-section__container,
.top-section--news .top-section__container,
.top-section--business .top-section__container,
.top-section--voice .top-section__container,
.top-section--recruit .top-section__container {
padding-top: 64px;
padding-bottom: 64px;
}
/* --- 2-4 お客様の声: 横スクロール（2026-09-01 ユーザー指示で縦積みから変更） ---
3枚を縦に積むとセクションがかなり長くなるため、SPでは横に流す。
次のカードを少し覗かせることで「まだ続きがある」ことを伝え、
スクロールスナップで1枚ずつ気持ちよく止まるようにしている。 */
.voice-cards {
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
gap: 16px;
/* コンテナの左右padding(20px)を打ち消して画面端まで流し、内側で同じ分だけ確保する。
こうしないと最後の1枚が画面の右端で切れて、スクロールできることが伝わらない。 */
margin-inline: -20px;
padding: 10px 20px 18px;
overflow-x: auto;
overscroll-behavior-x: contain; /* 端まで行ってもページ全体が横に動かない */
scroll-snap-type: x mandatory;
scroll-padding-inline: 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}
.voice-cards::-webkit-scrollbar { display: none; }
.voice-card {
width: auto;
flex: 0 0 84%; /* 右に次のカードが少し覗く幅 */
max-width: 340px;
scroll-snap-align: start;
}
/* --- 2-4 RECRUIT誘導帯: テキスト→写真2枚→ボタン全幅 の縦積み ---
2026-09-01：以前は横スクロールだったが、2枚目が画面右端で中途半端に切れて
（ちょうど人物の顔の位置で切れていた）、スクロールできること自体も伝わらなかった。
写真は2枚しかないので、スクロールをやめて横に並べ、両方とも全部見えるようにした。
元写真はどちらも 800x533（＝3:2）なので、aspect-ratio を 3/2 に合わせれば
object-fit: cover でもトリミングが発生しない。 */
.top-section--recruit .top-section__container { gap: 32px; }
.recruit-images {
display: grid; /* 〜1099pxの display:none を後勝ちで解除 */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start; /* stretch のままだと高さが揃えられて aspect-ratio が効かない */
position: static;
width: 100%;
gap: 12px;
overflow: visible;
/* 写真ブロック全体を下げる量。2枚まとめて動く（左右の段差は __sub の margin-top 側）。
これが無いと写真が青い帯の上端に隙間0で張り付く。 */
padding-top: 24px;
}
/* PCの構図（左は少し縦長・右は横長で下にずらす）を、そのままSPの縮尺で再現する。
単純に同じサイズを2枚並べるとサムネイルの羅列に見えてしまうため。
比率はPCの 300x250 / 300x200 と同じ値。 */
.recruit-images__main,
.recruit-images__sub {
width: auto;
height: auto;
}
.recruit-images__main {
aspect-ratio: 6 / 5; /* PCの 300x250 と同じ */
margin-top: 0;
}
.recruit-images__sub {
aspect-ratio: 3 / 2; /* PCの 300x200 と同じ。元写真も 3:2 なのでトリミングが出ない */
/* 左右の段差。ここだけ動かせば段差の強さを調整できる（ブロック全体の位置は
.recruit-images の padding-top 側）。
参考：PCは写真幅300pxに対して84px＝幅の28%。SPの列幅(約190〜205px)なら同比率で53〜57px。 */
margin-top: 48px;
}
.top-section--recruit .btn-outline {
width: 100%;
max-width: 320px;
}
/* --- 2-4 CONTACT帯: 中央揃えの縦積み・ボタン全幅(最大320px) --- */
.top-contact__inner {
flex-direction: column;
align-items: center;
gap: 24px;
}
.top-contact__text {
align-items: center;
text-align: center;
}
.top-contact .btn-primary,
.top-contact .btn-outline {
width: 100%;
max-width: 320px;
}
/* --- 2-5 品質基準 --- */
img { max-width: 100%; }
.voice-card__company { font-size: 14px; }
}
/* ==================================================
デザイン刷新 v1.5（採用ページと体裁統一・2026-07-07）
見出し／お知らせ／お客様の声／CONTACT を採用ページの
デザイン言語（英字ラベル＋3色グラデバー・白カード＋ホバー）へ。
このブロックは top.css 末尾で既存指定を後勝ちで上書きする。
================================================== */
/* ---------- 共通見出し（recruit sec-title 準拠） ---------- */
.section-heading {
display: block;
gap: 0;
margin-bottom: 0; /* 見出し～次要素の間隔は各セクションの親 gap に委ねる（従来の縦リズム維持） */
}
.section-heading__title {
display: flex;
align-items: baseline;
gap: 16px;
font-family: var(--font-ja);
font-weight: 700;
font-size: 26px;
letter-spacing: .06em;
line-height: 1.1;
color: var(--color-text);
}
.section-heading--white .section-heading__title { color: var(--color-white); }
/* 日本語見出しの右に添える英字ラベル（青・字間広め） */
.section-heading__en {
font-family: var(--font-deco);
font-weight: 500;
font-size: 13px;
letter-spacing: .28em;
color: var(--color-blue);
text-transform: uppercase;
}
.section-heading--white .section-heading__en { color: var(--color-white); }
/* 3色グラデバー（青→赤→薄グレー）。旧・赤ブロックは無効化 */
.section-heading__bar {
height: 5px;
width: 100%;
margin-top: 16px;
background: linear-gradient(90deg,
var(--color-blue) 0 120px,
var(--color-red) 120px 150px,
rgba(0, 12, 33, .12) 150px 100%);
}
.section-heading__bar::before { display: none; }
.section-heading--white .section-heading__bar {
background: linear-gradient(90deg,
var(--color-white) 0 120px,
var(--color-red) 120px 150px,
rgba(255, 255, 255, .25) 150px 100%);
}
/* ---------- お知らせ：行にホバーの手応えを ---------- */
.news-card { padding: 56px 70px 46px; }
.news-item {
padding: 18px 10px;
border-radius: 6px;
transition: background .25s ease;
}
.news-item__date {
font-family: var(--font-en);
font-weight: 400;
letter-spacing: 1px;
color: #6b6f73;
}
.news-item__title {
font-weight: 500;
transition: color .2s ease;
}
a.news-item__title:hover { text-decoration: none; }
/* 行末に出る小さな矢印（ホバーでスッと出現） */
.news-item::after {
content: "";
flex-shrink: 0;
width: 8px;
height: 8px;
border-top: 2px solid var(--color-blue);
border-right: 2px solid var(--color-blue);
transform: rotate(45deg) translateX(-4px);
opacity: 0;
transition: opacity .25s ease, transform .25s ease;
}
.news-item:hover { background: rgba(0, 80, 209, .045); }
.news-item:hover .news-item__title { color: var(--color-blue); }
.news-item:hover::after { opacity: 1; transform: rotate(45deg) translateX(0); }
/* ---------- お客様の声：白カード＋赤インデックス＋ホバー浮き ---------- */
.voice-card {
position: relative;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(10, 40, 91, .06);
transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
/* ホバーで浮くのはマウスがある環境だけ。
タッチ端末では一度タップすると :hover が残り、カードが浮いたまま固まる。
SPは横スクロールで指が触れるため、これが特に目立っていた（2026-09-01 修正）。
カード自体はリンクではないので、触れるだけで動く必要はない。 */
@media (hover: hover) and (pointer: fine) {
.voice-card:hover {
transform: translateY(-8px);
box-shadow: 0 22px 46px rgba(10, 40, 91, .16);
}
}
/* 写真枠：フラットな灰色をやめ、紺→青の斜めグラデ＋大きな引用符（写真受領後は img がカバー） */
.voice-card__image {
position: relative;
height: 172px;
border-radius: 6px;
background: linear-gradient(135deg, #0a285b 0%, var(--color-blue) 100%);
overflow: hidden;
}
.voice-card__image::after {
content: "\201C";
position: absolute;
right: 14px;
bottom: -28px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 150px;
line-height: 1;
color: rgba(255, 255, 255, .16);
pointer-events: none;
}
.voice-card__image img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
}
.voice-card__company { letter-spacing: 1.4px; }
/* ---------- 事業リスト：行ホバーで矢印がスライド ---------- */
.business-list__item { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.business-list__item:hover { transform: translateX(6px); }
/* ---------- 採用バンドの写真：ホバーで軽くズーム ---------- */
.recruit-images__main,
.recruit-images__sub { overflow: hidden; }
.recruit-images__main img,
.recruit-images__sub img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
/* タッチ端末では一度タップすると :hover が残ったままになる。
マウスがある環境だけに限定する（2026-09-01・お客様の声と同じ対応をサイト全体へ）。 */
@media (hover: hover) and (pointer: fine) {
.recruit-images__main:hover img,
.recruit-images__sub:hover img { transform: scale(1.06); }
}
/* ---------- CONTACT：英字ラベル＋グラデ下線でのっぺり感を解消 ---------- */
.top-contact__text { position: relative; }
.top-contact__title {
position: relative;
display: inline-block;
}
.top-contact__title::after {
content: "";
position: absolute;
left: 0;
bottom: -12px;
width: 100%;
height: 4px;
background: linear-gradient(90deg,
var(--color-blue) 0 60%,
var(--color-red) 60% 75%,
rgba(0, 12, 33, .12) 75% 100%);
}
@media (max-width: 767px) {
.section-heading__title { font-size: 22px; }
.news-card { padding: 36px 22px 30px; }
.top-contact__title::after { bottom: -8px; }
}
@media (prefers-reduced-motion: reduce) {
.voice-card,
.business-list__item,
.recruit-images__main img,
.recruit-images__sub img,
.news-item { transition: none; }
}
/* ==================================================
モバイル改修 v3（2026-09-02・SP実機幅での見え方とアニメーションの修正）
390px / 320px の実ビューポートで通し確認して見つかった不具合の修正。
すべて @media 内への追加で、PC(768px超)の見た目は変更しない。
top.css は全カスタムページで読み込まれるので、
共通のもの（改行制御・リビール速度）もここに置く。
================================================== */
/* ---- 共通: PC専用の改行 ----
PCで整えた
がSPだと「で、」「い」のような1〜2文字の行を作るため、
SPでは消す。
を付けた箇所だけが対象。 */
@media (max-width: 767px) {
.br-pc { display: none; }
}
/* ---- 共通: SP専用の改行 ----
SPでだけ入れたい
。`.br-pc` の逆で、既定は非表示・767px以下でだけ出す。
CONTACT帯の「ご相談やご質問などお気軽にご連絡ください」がiPhone 15（393px）で
「ご相談やご質問などお気軽に／ご連絡ください」と割れ、「お気軽にご連絡ください」が
途中で切れていたため（ユーザー指摘・2026-09-03）。
word-break: auto-phrase は効いているが、貪欲に詰めるので 13文字/7文字 になる。
文の切れ目で明示的に折って 9文字/11文字 に揃える。 */
.br-sp { display: none; }
@media (max-width: 767px) {
.br-sp { display: inline; }
}
/* ---- 共通: 日本語の折り返し制御（改行ルールの一本化・2026-10-07 総点検） ----
以前は body 全体に word-break: auto-phrase を当てていたが、対応しているのは
Chrome 系だけで、Safari（客先の iPhone）・Firefox では通常の改行になる。
制作側の Chrome と見え方が別物になり、Chrome でも「すぐに／人員を確保して／…」のように
文節単位で行長がガタつくため、全体指定はやめた。ルールは次のとおり：
・本文 …
を使わず自然改行。line-break: strict で行頭の約物（ー・っ・。など）を防ぐ
・キャッチ／見出し … 割らせたくない文節を で囲む＋ text-wrap: balance
・PC/SPで改行位置を変えたい箇所 …
/
・ラベル（ボタン・タグ・設備名） … .u-nowrap
text-wrap: pretty（最終行の1〜2文字残りを防ぐ）は未対応ブラウザでも害がないので残す。 */
.top-page {
word-break: normal;
line-break: strict;
overflow-wrap: break-word;
text-wrap: pretty;
}
/* 文節固定：この中では改行しない（はみ出すほど長い文字列には使わない） */
.nb { display: inline-block; }
/* キャッチ・見出し：行長を均等に */
.u-balance { text-wrap: balance; }
/* ---- 共通: スクロールリビールをSP用に速く ----
0.7秒＋最大350msの遅延だと、慣性スクロール中に空白が見えている時間が長い。
時間を詰め、移動量も小さくして「出遅れ感」を消す。遅延は header.js 側で 40ms×最大3段。 */
@media (max-width: 767px) {
.js-rv {
transform: translateY(14px);
transition: opacity .45s ease, transform .45s ease;
}
}
@media (max-width: 767px) {
/* ---- v3-1 FV: 320px幅でもコピーが切れないよう下限を下げる ----
以前の @media (max-width:400px){font-size:23px} は、ファイル後方の
v2ブロックの clamp() に後勝ちで上書きされて効いていなかった。
ここで clamp の下限そのものを下げて一本化する。 */
.fv-section__main-copy .fv-section__h1 { font-size: clamp(21px, 6.5vw, 48px); }
/* ---- v3-2 飾り背景テキスト: 画面内に収め、見出しと重ねない ----
・font-size を下げて最長の "Information" が390px幅に収まるように
・left/right のマイナスオフセットを0にして端で文字が切れないように
・business だけは見出しと同じ高さに置かれていて完全に重なっていたので、
他セクションと同じ「セクション下端」へ移す */
.top-section__bg-text,
.top-section--news .top-section__bg-text,
.top-section--business .top-section__bg-text,
.top-section--voice .top-section__bg-text,
.top-section--recruit .top-section__bg-text {
font-size: clamp(52px, 15vw, 200px);
left: 0;
right: auto;
text-align: left;
}
.top-section--business .top-section__bg-text {
top: auto;
bottom: 20px;
transform: translateY(50%);
}
.top-section--voice .top-section__bg-text {
left: auto;
right: 0;
text-align: right;
}
/* ---- v3-4 採用帯の写真2枚: 左右の余白を他要素（20px）に揃える ----
.recruit-images は .top-section__container の外にあるため
コンテナのpaddingが効かず、画面の左右いっぱいに張り付いていた。 */
.recruit-images {
width: auto;
margin-inline: 20px;
}
/* ---- v3-5 ドロワーメニュー: 行全体をタップできるように ----
従来はリンクが文字幅（約82px）しかなく、行の余白を押しても反応しなかった。 */
.top-header__nav ul li {
width: 100%;
align-self: stretch;
}
.top-header__nav ul li a {
display: block;
width: 100%;
text-align: center;
}
}
/* ---- 共通ユーティリティ: 途中で折り返させたくない箇所（住所の番地など） ----
「府内4-1-／17」のようにハイフンの後ろで改行されるのを防ぐ。
PC・SP共通（短い文字列にしか付けないので横はみ出しの心配はない）。 */
.u-nowrap { white-space: nowrap; }
/* ---- v3-6 ドロワーメニュー: 画面が低いとき（横向き・小型端末）に項目が重なるのを防ぐ ----
flex の既定でリストが縮み、リンクの中身がはみ出して下の
「ご相談やご質問など／お問い合わせ」ブロックと重なって表示されていた。
縮まないようにして、入り切らないときは（指定済みの overflow-y:auto で）スクロールさせる。
ドロワー自体は 1099px以下で有効なので、この指定も同じ範囲に合わせる。 */
@media (max-width: 1099px) {
.top-header.is-menu-open .top-header__nav > ul,
.top-header.is-menu-open .top-header__nav-extra {
flex-shrink: 0;
}
}
/* ==================================================
お客様の声（TOP）: SPの見え方を整理（2026-09-03・ユーザー指摘）
390px幅で確認した問題は2つ。
① 次のカードが58px覗いていて、そこに本文が折り返して入るため
「アパ／ライ」「厳し／クリ／ブラ」のような**半端な文字の列**が右端に出ていた。
カードの内側paddingが22pxなので、58px覗くと36px分の本文が見えてしまう。
② 背景の .voice-bg-card（ぼかした写真＋グレーのオーバーレイの角丸パネル）が、
SPではカード(281px)より少しだけ大きい(335px)ため、カードの周りに
細い帯としてしか出ず、緑がかった汚れのようにしか見えていなかった。
写真は width:60% しか敷かれていないので、残りはただのグレー。
PC（768px超）の見た目は変更しない。
================================================== */
@media (max-width: 767px) {
/* ② 背景パネルは出さず、セクション地をグレーにして白カードを立たせる。
グレーは他セクション（数字で見る／募集要項）と同じ --color-bg-gray。 */
.voice-bg-card { display: none; }
.top-section--voice { background: var(--color-bg-gray); }
/* 地がグレーになると、ウォーターマークの色（--color-bg-gray）が背景と同色になって
完全に消えてしまうので、SPだけ一段濃くする。 */
.top-section--voice .top-section__bg-text { color: #e4e6ea; }
/* ① 右端をフェードさせて、次のカードを「文字」ではなく「続きの気配」にする。
・末尾にフェード幅ぶんのダミー余白を入れてあるので、最後までスクロールしても
最後のカードがフェードに食われない。
・mask 非対応ブラウザでは単に今までどおり覗くだけで、壊れはしない。 */
.voice-cards {
--voice-fade: 80px;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--voice-fade)), rgba(0,0,0,.25) calc(100% - 44px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - var(--voice-fade)), rgba(0,0,0,.25) calc(100% - 44px), transparent 100%);
}
/* フェード分の余白をダミーのフレックスアイテムで作る。
scroller の padding-right を増やすと flex-basis:84% の基準が縮んで
カード自体が細くなってしまうため（実測 281px→227px）、こちらで確保する。 */
.voice-cards::after {
content: "";
flex: 0 0 80px; /* --voice-fade と同じ幅にする */
align-self: stretch;
}
}
/* ==================================================
ヘッダー「事業内容」のサブメニュー（2026-09-03・ユーザー要望）
商業印刷全般／アッセンブリ／梱包作業／発送業務／資材保管業務 を
ヘッダーから直接選べるようにした。リンク先は /business/?tab=◯◯。
・1100px超（PCナビ）… ホバー／フォーカスで開くドロップダウン
・1099px以下（ドロワー）… 開閉ボタン付きのアコーディオン（header.js）
※ .top-header__nav ul（display:flex / height:100px）は入れ子のULにも効いてしまうので、
打ち消しは必ず同じ詳細度（.top-header__nav .top-header__subnav）以上で書くこと。
================================================== */
/* ---------- PC：ホバー／フォーカスで開くドロップダウン ---------- */
@media (min-width: 1100px) {
.top-header__nav-toggle { display: none; } /* 開閉ボタンはドロワー専用 */
.top-header__nav-item--has-sub {
position: relative;
align-self: stretch; /* li をヘッダーの高さいっぱいにして、ドロップダウンを帯の下端から出す */
display: flex;
align-items: center;
}
.top-header__subwrap {
position: absolute;
top: 100%;
left: 50%;
min-width: 210px;
/* ドロワー用に header.js が入れるインラインの height を打ち消す。
PCではドロップダウンなので常に自然な高さで出す（!important はそのためだけ）。 */
height: auto !important;
overflow: visible;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-6px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.top-header__nav-item--has-sub:hover .top-header__subwrap,
.top-header__nav-item--has-sub:focus-within .top-header__subwrap {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.top-header__nav .top-header__subnav {
display: block;
height: auto;
gap: 0;
padding: 8px 0;
background: #000c21;
box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}
.top-header__nav .top-header__subnav li a {
display: block;
padding: 11px 22px;
font-size: 14px;
font-weight: 500;
letter-spacing: 1.2px;
white-space: nowrap;
transition: background .2s;
}
/* 親ULの opacity ホバーを打ち消して、背景色で当たりを示す */
.top-header__nav .top-header__subnav li a:hover {
opacity: 1;
background: rgba(255, 255, 255, .1);
}
}
/* ---------- SP／タブレット：タップで開くアコーディオン ---------- */
@media (max-width: 1099px) {
.top-header__nav-item--has-sub { position: relative; }
/* 開閉ボタン。行の右端に重ねる。
ラベル部分は従来どおりリンクのままなので、文字を押せば事業内容ページへ行ける。
高さは a の 16px+16px パディング＋行送りぶん（実測56px）に合わせている。 */
.top-header__nav-toggle {
position: absolute;
top: 0;
right: 0;
width: 56px;
height: 56px;
display: grid;
place-items: center;
padding: 0;
border: none;
background: none;
color: #fff;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.top-header__nav-toggle svg {
width: 18px;
height: 18px;
transition: transform .32s ease;
}
.top-header__nav-item--has-sub.is-open .top-header__nav-toggle svg {
transform: rotate(180deg);
}
/* びよーんと伸びる本体。height:auto はアニメーションできないので、
header.js が開閉のたびに実測の px を入れて補間させる（開き切ったら auto に戻す）。
grid-template-rows: 0fr→1fr でも書けるが、height の補間は対応ブラウザの範囲が広いので
こちらを採用した。 */
.top-header__subwrap {
height: 0;
overflow: hidden;
transition: height .32s ease;
}
/* ドロワーの項目は行全体が中央揃え（v3-5の指定）なので、左のインデントや
縦のレールでは階層が伝わらない。薄い面で「事業内容にぶら下がる一群」だと示す。 */
.top-header__nav .top-header__subnav {
background: rgba(255, 255, 255, .05);
}
/* 親項目の下線（.top-header__nav ul li）は子リストには要らない。
グループ全体の区切りは、親 li の下線1本だけにする。 */
.top-header__nav .top-header__subnav li { border-bottom: none; }
.top-header__nav .top-header__subnav li a {
padding: 10px 6px;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, .8);
}
.top-header__nav .top-header__subnav li:first-child a { padding-top: 14px; }
.top-header__nav .top-header__subnav li:last-child a { padding-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.top-header__subwrap,
.top-header__nav-toggle svg { transition: none; }
}
/* ==================================================
総点検 2026-10-07（PC・スマホ）
「富士梱包HP 総点検と改善案（PC・スマホ）.docx」の指摘への対応。
全ページで読み込まれる top.css の末尾に置き、既存指定を後勝ちで上書きする。
・コンテンツ幅：最大 1100px ／ 左右余白 PC 40px・SP 20px に統一（--content-max / --gutter）
・ページヘッダー：template-parts/page-header.php（.page-head）に一本化
・本文：長文 16px・行間1.9／カード内 15px・1.8（SPはどちらも 15px・1.8）
================================================== */
:root {
--content-max: 1100px;
--gutter: 40px;
}
@media (max-width: 767px) {
:root { --gutter: 20px; }
}
/* ---------- PAGE HEADER（共通） ----------
高さ・英字見出し・縦の赤線・リード文の位置を全下層ページで揃える。
左端は本文（最大1100px）の左端に合わせる。 */
.page-head {
position: relative;
overflow: hidden;
background: #000c21;
padding: 100px var(--gutter) 56px; /* 上はヘッダー（100px）ぶん */
min-height: 280px;
display: flex;
align-items: flex-end;
}
/* 右下の薄い大英字は出さない（2026-10-07 ユーザー指示「右のうっすら出てる Company いらない」） */
.page-head__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--content-max);
margin: 0 auto;
display: flex;
align-items: flex-end;
gap: 48px;
}
.page-head__group {
display: flex;
align-items: stretch;
gap: 28px;
flex-shrink: 0;
}
.page-head__text {
display: flex;
flex-direction: column;
gap: 12px;
color: var(--color-white);
}
.page-head .page-head__en {
margin: 0;
font-family: var(--font-deco);
font-weight: 500;
font-size: 60px;
line-height: 1;
letter-spacing: .01em;
color: var(--color-white);
}
.page-head .page-head__ja {
margin: 0;
font-family: var(--font-ja);
font-weight: 500;
font-size: 16px;
line-height: 1.5;
letter-spacing: .15em;
color: var(--color-white);
}
.page-head__sep {
width: 5px;
background: var(--color-red);
align-self: stretch;
}
.page-head .page-head__lead {
margin: 0;
font-family: var(--font-ja);
font-weight: 700;
font-size: 18px;
line-height: 1.9;
letter-spacing: .06em;
color: var(--color-white);
}
/* 写真背景（採用ページ） */
.page-head__photo {
position: absolute;
inset: 0;
z-index: 0;
}
.page-head__photo img {
width: 100%;
height: 100%;
object-fit: cover;
max-width: none;
}
.page-head__photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0, 12, 33, .88) 0%, rgba(0, 12, 33, .6) 55%, rgba(0, 12, 33, .35) 100%);
}
@media (max-width: 767px) {
.page-head {
padding: 90px var(--gutter) 36px; /* 上はSPヘッダー（70px）＋余白 */
min-height: 200px;
}
.page-head__inner {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.page-head__group { gap: 20px; }
.page-head .page-head__en { font-size: 40px; }
.page-head .page-head__lead { font-size: 16px; line-height: 1.8; }
}
/* ---------- セクション見出し（h2 化に伴うリセット・SPの英字位置） ----------
SPで「品質・情報管理への／取り組み」が2行になると、英字「QUALITY」だけ右端に離れていた。
SPは英字を日本語の上に回して、全見出しで位置を揃える。 */
.section-heading .section-heading__title { margin: 0; }
@media (max-width: 767px) {
.section-heading .section-heading__title {
flex-direction: column;
align-items: flex-start;
gap: 8px;
line-height: 1.4;
}
.section-heading .section-heading__en { order: -1; line-height: 1; }
}
/* ---------- 本文の統一 ----------
以前はPCの本文だけで8種類（12〜16.5px）・行間1.25〜2.25倍が混在していた。 */
.top-page .contact-intro,
.top-page .company-timeline__text,
.top-page .business-panel__hero-desc,
.top-page .business-service-desc,
.top-page .business-shipping-text p,
.top-page .biz-service__intro-text p,
.top-page .recruit-message__lead,
.top-page .recruit-itv__body,
.top-page .privacy-item__body p,
.top-page .privacy-item__list li,
.top-page .news-single__content {
font-family: var(--font-ja);
font-size: 16px;
font-weight: 400;
line-height: 1.9;
letter-spacing: .04em;
}
.top-page .voice-card__text,
.top-page .company-philosophy__text,
.top-page .company-policy__list li,
.top-page .company-profile-table td,
.top-page .business-strength-card p,
.top-page .business-flow-item p:not(.business-flow-item__num),
.top-page .biz-faq__a p,
.top-page .biz-cert__text,
.top-page .equipment-item__desc,
.top-page .recruit-feature-card p:not(.recruit-feature-card__num),
.top-page .recruit-work-card p,
.top-page .recruit-voice-card p,
.top-page .recruit-env-item p {
font-family: var(--font-ja);
font-size: 15px;
font-weight: 400;
line-height: 1.8;
letter-spacing: .04em;
}
@media (max-width: 767px) {
.top-page .contact-intro,
.top-page .company-timeline__text,
.top-page .business-panel__hero-desc,
.top-page .business-service-desc,
.top-page .business-shipping-text p,
.top-page .biz-service__intro-text p,
.top-page .recruit-message__lead,
.top-page .recruit-itv__body,
.top-page .privacy-item__body p,
.top-page .privacy-item__list li,
.top-page .news-single__content {
font-size: 15px;
line-height: 1.8;
}
}
/* 1行が長くなりすぎる本文は約40文字で折る（認証の説明は1行70文字近くあった） */
.top-page .biz-cert__text,
.top-page .business-service-desc,
.top-page .company-timeline__text,
.top-page .privacy-item__body p,
.top-page .privacy-item__list li { max-width: 40em; }
/* ---------- トップ：お客様の声 ---------- */
.voice-card__title { text-wrap: balance; }
.voice-dots { display: none; }
@media (max-width: 767px) {
.voice-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 14px;
}
.voice-dots__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0, 12, 33, .2);
transition: background .2s, transform .2s;
}
.voice-dots__dot.is-active {
background: var(--color-blue);
transform: scale(1.25);
}
}
/* ---------- トップ：事業図 → SPはアイコン＋文字のリスト ----------
丸の中の説明文が約8pxで読めなかったため、SPでは図を出さず、
右列の事業リストにアイコンと説明を添えて代わりにする（PCは従来どおり図＋リスト）。
※2026-09-02 にはユーザー判断でSPも円配置を維持していたが、総点検（2026-10-07）の指摘で切り替えた。 */
.top-page .business-list__icon,
.top-page .business-list__desc { display: none; }
@media (max-width: 767px) {
.business-diagram { display: none; }
.business-list__item { gap: 14px; }
.top-page .business-list__icon {
display: block;
width: 44px;
height: 44px;
flex-shrink: 0;
object-fit: contain;
}
.business-list__content { flex: 1; min-width: 0; }
.top-page .business-list__desc {
display: block;
margin-top: 2px;
font-family: var(--font-ja);
font-size: 13px;
line-height: 1.6;
color: rgba(255, 255, 255, .8);
}
}
/* ---------- ページトップボタン（SP）----------
FAQの＋アイコンや本文に重なっていたので、小さくして端に寄せる。 */
@media (max-width: 767px) {
.back-to-top {
width: 40px;
height: 40px;
right: 10px;
bottom: calc(12px + env(safe-area-inset-bottom));
}
.back-to-top.is-visible { opacity: .85; }
.back-to-top svg { width: 14px; height: 14px; }
/* 採用ページは下部固定のエントリーバー（58px）の上に */
.recruit-page .back-to-top { bottom: calc(70px + env(safe-area-inset-bottom)); }
}
/* ==================================================
FOOTER（共通）2026-10-07 フッター改修指示書（footer-instructions.md）で作り直し
template-parts/footer-custom.php。旧 .top-footer の指定は全削除した。
・リンク色は `.top-page .site-footer a`（詳細度 0,2,1）で指定する。
各ページCSSの `.company-page a { color: inherit }`（0,1,1・後から読まれる）に
負けて下層ページだけプライバシーポリシーが #333 になっていたため。
・背景は既存の --color-footer（#262626）。指示書の案 #0A285B（ヘッダーと同じネイビー）は
先方合意後に --ft-bg を差し替えるだけで切り替わる。
・ホバーは色だけ（150ms）。transform は使わない。
================================================== */
.site-footer {
--ft-bg: var(--color-footer);
--ft-text: #fff;
--ft-sub: #c9d1de; /* 住所・子リンク・©・プライバシー */
--ft-label: #9fb0c9; /* 英字ラベル */
--ft-line: rgba(255, 255, 255, .16);
background: var(--ft-bg);
color: var(--ft-sub);
font-family: var(--font-ja);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer p { margin: 0; }
.top-page .site-footer a {
color: inherit;
text-decoration: none;
transition: color 150ms;
}
.top-page .site-footer a:hover { color: var(--ft-text); }
.top-page .site-footer a:focus-visible,
.site-footer summary:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.site-footer__inner {
max-width: calc(var(--content-max) + var(--gutter) * 2);
margin: 0 auto;
padding: 56px var(--gutter) 40px;
display: flex;
justify-content: space-between;
gap: 48px;
}
/* ---- 会社ブロック ---- */
.site-footer__company {
flex: 1 1 300px;
max-width: 420px;
display: flex;
flex-direction: column;
gap: 18px;
}
.top-page .site-footer__logo {
display: inline-flex;
align-items: flex-end;
gap: 6px;
align-self: flex-start;
color: var(--ft-text);
}
.site-footer__logo svg { width: 40px; height: 40px; display: block; }
.site-footer__logo span {
font-family: var(--font-logo);
font-weight: 700;
font-size: 13px;
letter-spacing: .1em;
line-height: 1;
padding-bottom: 6px;
}
.site-footer__name {
font-size: 15px;
font-weight: 700;
letter-spacing: .1em;
color: var(--ft-text);
}
.site-footer__offices {
display: flex;
gap: 32px;
}
.site-footer__office {
display: flex;
flex-direction: column;
font-style: normal;
font-size: 13px;
line-height: 1.8;
}
.top-page .site-footer__office-name { color: var(--ft-text); font-weight: 700; }
/* PC・タブレットは郵便番号を1行目に分ける（「〒… 埼玉県戸田市／南町12-13」と住所の途中で折れていた）。SPは1行に流す */
@media (min-width: 768px) {
.site-footer__zip { display: block; }
}
.top-page .site-footer__tel {
white-space: nowrap;
color: var(--ft-text);
font-family: var(--font-en);
font-weight: 600;
letter-spacing: .06em;
}
/* ---- ナビ（PC・タブレット：3列） ---- */
.site-footer__nav--pc {
display: grid;
grid-template-columns: repeat(3, minmax(120px, auto));
gap: 24px 48px;
align-content: start;
}
.site-footer__nav--sp { display: none; }
.site-footer__col {
display: flex;
flex-direction: column;
gap: 10px;
}
.site-footer__label {
font-family: var(--font-en);
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
line-height: 1.4;
color: var(--ft-label);
}
.top-page .site-footer__parent,
.top-page .site-footer__list--parent a {
font-size: 14px;
color: var(--ft-text);
}
.site-footer__list {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 14px;
line-height: 1.5;
}
.site-footer__sub { display: block; font-size: 12px; color: var(--ft-sub); }
.site-footer__ext {
display: inline-block;
width: 10px;
height: 10px;
margin-left: 4px;
vertical-align: .05em;
}
/* ---- 最下部の帯 ---- */
.site-footer__bottom { border-top: 1px solid var(--ft-line); }
.site-footer__bottom-inner {
max-width: calc(var(--content-max) + var(--gutter) * 2);
margin: 0 auto;
padding: 18px var(--gutter);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px 24px;
font-size: 12px;
}
.site-footer__copy {
font-family: var(--font-en);
font-size: 12px;
letter-spacing: .04em;
}
/* ---- タブレット（768〜1099px）：会社ブロック → ナビ3列の縦積み ---- */
@media (max-width: 1099px) {
.site-footer__inner {
flex-direction: column;
gap: 36px;
padding: 48px 32px 32px;
}
.site-footer__company { flex: none; max-width: none; } /* 縦積み時は flex-basis:300px が「高さ」になるので解除 */
.site-footer__bottom-inner { padding-inline: 32px; }
}
/* ---- SP（767px以下）---- */
@media (max-width: 767px) {
.site-footer__inner {
padding: 36px 20px 8px;
gap: 24px;
}
.site-footer__company { gap: 12px; }
.site-footer__logo svg { width: 36px; height: 36px; }
.site-footer__name { font-size: 14px; }
.site-footer__offices { flex-direction: column; gap: 6px; }
.site-footer__office {
display: block;
font-size: 12px;
}
.site-footer__office > * { margin-right: .8em; }
.site-footer__nav--pc { display: none; }
.site-footer__nav--sp { display: block; }
.site-footer__group,
.site-footer__grid--plain { border-top: 1px solid var(--ft-line); }
.site-footer__group summary {
height: 52px;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
cursor: pointer;
font-size: 14px;
font-weight: 700;
color: var(--ft-text);
}
.site-footer__group summary::-webkit-details-marker { display: none; }
.site-footer__chev {
width: 8px;
height: 8px;
margin-right: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform .2s;
}
.site-footer__group[open] .site-footer__chev { transform: translateY(2px) rotate(225deg); }
.site-footer__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 12px;
font-size: 13px;
}
.site-footer__group .site-footer__grid { padding-bottom: 8px; }
.top-page .site-footer__grid a {
display: flex;
align-items: center;
min-height: 44px;
padding: 12px 0;
line-height: 1.4;
}
.site-footer__grid--plain { font-size: 14px; }
.top-page .site-footer__grid--plain a { color: var(--ft-text); }
.site-footer__wide { grid-column: 1 / -1; }
.site-footer__bottom-inner {
flex-direction: column-reverse;
padding: 20px 20px 28px;
text-align: center;
}
.site-footer__copy { font-size: 11px; }
}
/* 採用ページ：下部固定のエントリーバー（約58px・900px以下で表示）に最下部の文字が隠れないよう、
その高さぶんをフッターの中に確保する（以前は body の padding で、フッター下に地色の帯が出ていた） */
@media (max-width: 900px) {
.recruit-page .site-footer__bottom-inner { padding-bottom: calc(18px + 58px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) {
.recruit-page .site-footer__bottom-inner { padding-bottom: calc(28px + 58px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
.site-footer__chev { transition: none; }
.top-page .site-footer a { transition: none; }
}
/* ---------- トップ：CONTACT帯（2026-10-07 ユーザー支給のデザイン画像どおり） ----------
白地・青文字・「CONTACT」の下に線なし。全ページ共通（下層ページの青背景版は廃止）。 */
.top-contact .top-contact__title::after { display: none; }
/* VOICE の大英字：デザイン画像どおり右端にかけて置く（旧 right:270px）。サイズ・下端で切れる見せ方は従来のまま。PCのみ */
@media (min-width: 1100px) {
.top-section--voice .top-section__bg-text { right: -20px; }
}
/* お知らせ「Information」・事業内容「Business」の大英字（PC）
配置はデザイン画像どおり（Information＝セクション下端にかかる／Business＝右上で右端にかかる）。
デザイン値 200px は 1440px 前後の画面で大きく見えるため、画面幅に比例させて約8割に抑える
（1920px で約163px／1440px で約122px）。Business の縦位置（旧 top:93px＝文字の高さの約46%）も同じ比率で追従させる。 */
@media (min-width: 1100px) {
.top-section--news .top-section__bg-text,
.top-section--business .top-section__bg-text {
--wm-size: clamp(120px, 8.5vw, 165px);
font-size: var(--wm-size);
}
.top-section--business .top-section__bg-text { top: calc(var(--wm-size) * .465); }
/* Information は文字の下端がセクションの境目に乗る位置に（デザイン画像では文字がほぼ全部見えている） */
.top-section--news .top-section__bg-text { bottom: 0; transform: translateY(20%); }
}
/* ==================================================
SP見直し 2026-10-07（390px で全ページを通し確認して出た指摘の修正）
================================================== */
/* ---- 12px未満だった文字を 12px に（ラベル・バッジ・タグ類） ---- */
.top-page .biz-movie__label,
.top-page .equipment-item__play-label,
.top-page .equipment-item__count,
.top-page .equipment-item__shots,
.top-page .recruit-work-card__tag,
.top-page .recruit-trip__cap,
.top-page .recruit-trip__year,
.top-page .company-access-info dt,
.top-page .company-access-card__office-en,
.top-page .entry-steps__item,
.top-page .entry-req,
.top-page .entry-any,
.top-page .cf7-required,
.top-page .itv-cta__label,
.top-page .itv-hero__vlabel,
.top-page .itv-profile dt { font-size: 12px; }
/* ---- お知らせ：行全体を押せるように（以前はタイトル文字だけ・高さ21px） ---- */
.top-page .news-item { position: relative; }
.top-page .news-item__title::before {
content: "";
position: absolute;
inset: 0;
}
/* ---- SPメニューの「お問い合わせ」：角丸 → 四角（サイトの他のボタンと同じ形に） ---- */
@media (max-width: 1099px) {
.top-header__nav-contact,
a.top-header__nav-contact:link,
a.top-header__nav-contact:visited { border-radius: 0; }
}
/* ---- 採用ページのページトップボタン：本文のカードに重なる位置にあるので一段小さく・控えめに ---- */
@media (max-width: 767px) {
.recruit-page .back-to-top { width: 36px; height: 36px; right: 8px; }
.recruit-page .back-to-top.is-visible { opacity: .7; }
}
/* ---- フッター（SP）：拠点名＋電話を1行目、住所を2行目に
（以前は「本社 〒… 埼玉県戸田市／南町12-13 048-…」と住所の途中で折れていた）。行数は従来と同じ ---- */
@media (max-width: 767px) {
.site-footer__office {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
column-gap: .8em;
}
.site-footer__office > * { margin-right: 0; }
.site-footer__office-name { order: 1; }
.site-footer__tel { order: 2; }
.site-footer__addr { order: 3; flex-basis: 100%; }
}
/* ---- トップの事業リスト：→（30px）だけでなく行全体を押せるように ---- */
.top-page .business-list__item { position: relative; }
.top-page .business-list__arrow::before {
content: "";
position: absolute;
inset: 0;
}
/* ---- フッターのプライバシーポリシー：見た目は変えずに押せる範囲を上下に広げる ---- */
.top-page .site-footer__privacy { padding: 12px 0; margin: -12px 0; }
/* ---- CONTACT帯（SPのみ）：中央揃え → 左揃え（2026-10-07 ユーザー判断） ----
前後のセクション（採用情報など）とフッターが左揃えで、CONTACTだけ中心線が変わって見えていたため。
見出し・案内文・ボタンの左端を本文の左端（20px）に揃え、ボタン幅は上の「採用について」と同じ（最大320px）。
PCはデザイン画像どおりの横1列のまま。全ページ共通（.top-contact）。 */
@media (max-width: 767px) {
.top-contact { padding: 48px var(--gutter); }
.top-contact__inner { align-items: flex-start; }
.top-contact__text {
align-items: flex-start;
text-align: left;
}
}
/* ---- 文節改行（assets/js/phrase.js・2026-10-07） ----
phrase.js が文節の区切りに を入れ、 に .js-phrase を付ける。
keep-all で 以外の位置では改行させない（本文の「くれまし／た。」対策）。
JSが動かない・Intl.Segmenter 非対応の環境では .js-phrase が付かず従来の改行のまま。
1文節が行幅を超えるときだけ break-word で文節の途中で折れる（はみ出し防止）。 */
.js-phrase .top-page {
word-break: keep-all;
overflow-wrap: break-word;
}
/* 親テーマ（Arkhe）が table に word-break: break-all を当てていて、表の中（会社概要・募集要項）だけ
語の途中で折れていた。商品カード名にも旧指定の normal が残っていたので、文節改行に揃える */
.js-phrase .top-page table,
.js-phrase .top-page th,
.js-phrase .top-page td,
.js-phrase .top-page .biz-product-card__label { word-break: keep-all; }
/* ---- トップ事業リード：SPもPCと同じ4行の区切りに（2026-10-07 ユーザー指示） ----
最長行「包装・梱包・封入などの流通加工から、」(18字) が1行に収まるよう、SPは画面幅に比例させる
（390px で 17px、320px で 14px。上限17px）。 */
@media (max-width: 767px) {
.business-right__text {
font-size: min(17px, 4.4vw);
letter-spacing: .04em;
line-height: 1.8;
}
}
/* ---- お客様の声（SP）：文章を置ける幅を広げる（2026-10-07） ----
1行15文字しか入らず行数が多かった。カード幅 84%→88%・内側余白 22→18px で1行約17文字に。
右に次のカードが少し覗く（横にスクロールできると分かる）作りは維持。 */
@media (max-width: 767px) {
.voice-card {
flex: 0 0 88%;
max-width: 360px;
padding: 18px;
}
}
/* ==================================================
お客様の声・採用情報の背景（2026-10-07 ユーザー支給 VOICE.webp / RECRUIT.webp）
================================================== */
/* ---- お客様の声：写真カードは VOICE.webp から切り出した画像（ぼかし・右端のフェード焼き込み済み）。
以前のCSSぼかし・半透明・グレーのオーバーレイはやめ、画像をそのまま見せる。
PC（1100px以上）はデザインどおりセクション幅の55%（左50px・高さ700px）。右の「VOICE」は従来のCSS文字。 */
.voice-bg-card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center; /* 幅が狭いときは左側を切って、右端のフェードを残す */
filter: none;
transform: none;
opacity: 1;
}
.voice-bg-card__overlay { display: none; }
@media (min-width: 1100px) {
.voice-bg-card { right: auto; width: 55%; }
}
/* ---- 採用情報：RECRUIT.webp（青地＋左下に「Recruit」）を背景に。画面幅いっぱいに合わせて左下に置く。
画像の上に余る部分は同じ青（--color-blue）なので継ぎ目は出ない。CSSの「Recruit」文字は重なるので出さない。
SP（767px以下）は従来どおり（写真・文字の並びが違うため）。 */
@media (min-width: 768px) {
.top-section--recruit {
background: var(--color-blue) url("../../../../uploads/2026/10/top-recruit-bg.webp") left bottom / 100% auto no-repeat;
}
.top-page .top-section--recruit .top-section__bg-text { display: none; }
}
/* ---- 事業内容の背景：ユーザー支給 BUSINESS.webp（2026-10-07）。画像自体が完成形の暗さなので、
以前の「#191a1b の地＋overlay合成・不透明度60%」はやめて画像をそのまま見せる。 */
.business-bg__base { background: #000; }
.business-bg img {
mix-blend-mode: normal;
opacity: 1;
object-position: left center;
}
/* ---- FVコピー（画像・2026-10-07 デザイナー支給） ----
文字だった頃と同じくらいの大きさ（1920pxでメイン約880px幅）。サブはメインの約71%（支給画像の比率どおり）。
登場アニメーション（revealUp）は従来どおり h1 / p に掛かっている。 */
.fv-section__main-copy .fv-section__h1--img,
.fv-section__sub-copy .fv-section__sub-copy-en--img {
font-size: 0;
line-height: 0;
text-shadow: none;
}
.fv-section__h1--img img,
.fv-section__sub-copy-en--img img {
display: block;
height: auto;
max-width: none;
margin: 0 auto;
filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .35));
}
.fv-section__h1--img img { width: clamp(320px, 46vw, 880px); }
.fv-section__sub-copy-en--img img { width: clamp(228px, 32.7vw, 626px); }
.fv-section__sub-copy { margin-top: clamp(6px, .9vw, 16px); }
@media (max-width: 767px) {
.fv-section__h1--img img { width: min(84vw, 420px); }
.fv-section__sub-copy-en--img img { width: min(59.7vw, 298px); }
}
/* ---- FVコピーの登場：白い四角から文字が「にゅん」と上に出てくる（2026-10-07 ユーザー指示） ----
① 文字の位置に白い四角が左から右へ伸びる（clip-path）
② 四角が上に向かって縮んで消えるのと同時に、下から文字が少し伸びながら上がってくる（既存の revealUp）
文字は四角の下にいる（z-index）ので、四角が縮んだ下側から順に見えてくる＝四角から出てくるように見える。
サブコピーは0.3秒遅れて同じ動き。 */
.fv-section__main-copy,
.fv-section__sub-copy { position: relative; }
.fv-section__main-copy::after,
.fv-section__sub-copy::after {
content: "";
position: absolute;
inset: 0 -12px 6px; /* 文字より左右に少し大きく（下の余白ぶんは除く） */
background: #fff;
z-index: 2;
pointer-events: none;
clip-path: inset(0 100% 0 0);
animation: fvBox 1.15s cubic-bezier(.65, 0, .35, 1) .2s both;
}
.fv-section__sub-copy::after { animation-delay: .5s; }
@keyframes fvBox {
0% { clip-path: inset(0 100% 0 0); } /* 幅0 */
38% { clip-path: inset(0 0 0 0); } /* 左→右に伸び切る */
52% { clip-path: inset(0 0 0 0); } /* 一瞬止める */
100% { clip-path: inset(0 0 100% 0); } /* 上に向かって縮んで消える */
}
/* 文字は四角が縮み始めるタイミングで上がり始める */
.fv-section__main-copy .fv-section__h1 { position: relative; z-index: 1; animation-delay: .78s; }
.fv-section__sub-copy p { position: relative; z-index: 1; animation-delay: 1.08s; }
@media (prefers-reduced-motion: reduce) {
.fv-section__main-copy::after,
.fv-section__sub-copy::after { display: none; }
.fv-section__main-copy .fv-section__h1,
.fv-section__sub-copy p { animation: none; }
}
/* ---- FVコピーの登場：Figmaプロトタイプの録画（2026-10-07）にタイミングを合わせて作り直し ----
録画をコマ送り（1/30秒）で読み取った動き（最初の線が出た時点を0とする）：
メイン … 0〜0.17秒 細い線が上下に広がって白い四角になる → 0.49秒まで止まる
→ 0.49〜0.65秒 四角が上に縮んで消え、その下から文字がフェードインしながら少し上がる
サブ … 同じ動きを0.17秒遅れで（四角0.17〜0.27秒・止まる〜0.62秒・消える〜0.72秒・文字0.63〜0.73秒）
直前のブロック（左→右に伸びる版）を上書きする。ページ表示から0.15秒後に開始。 */
.fv-section__main-copy::after {
inset: 0 0 8px; /* 文字と同じ大きさ（下の余白ぶんは除く） */
clip-path: inset(50% 0 50% 0);
animation: fvBoxMain .65s linear .15s both;
}
.fv-section__sub-copy::after {
inset: 0 0 6px;
clip-path: inset(50% 0 50% 0);
animation: fvBoxSub .55s linear .32s both;
}
@keyframes fvBoxMain {
0% { clip-path: inset(50% 0 50% 0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } /* 細い線 */
26% { clip-path: inset(0 0 0 0); } /* 0.17秒 四角に */
75% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(.6, 0, .4, 1); } /* 0.49秒まで止まる */
100% { clip-path: inset(0 0 100% 0); } /* 上に縮んで消える */
}
@keyframes fvBoxSub {
0% { clip-path: inset(50% 0 50% 0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
18% { clip-path: inset(0 0 0 0); }
82% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
100% { clip-path: inset(0 0 100% 0); }
}
.fv-section__main-copy .fv-section__h1 { animation: fvTextIn .2s cubic-bezier(.2, .8, .3, 1) .65s both; }
.fv-section__sub-copy p { animation: fvTextIn .2s cubic-bezier(.2, .8, .3, 1) .78s both; }
@keyframes fvTextIn {
from { opacity: 0; transform: translateY(18%); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.fv-section__main-copy::after,
.fv-section__sub-copy::after { display: none; }
.fv-section__main-copy .fv-section__h1,
.fv-section__sub-copy p { animation: none; }
}
/* ---- FVコピー：Figma録画との比較で直したところ（2026-10-07） ----
① サブの四角がメインと同じ幅になっていた → 枠を文字画像の幅に合わせる（fit-content）
② 四角が文字より上下に大きかった（画像の透明な余白ぶん）→ 文字の範囲だけを覆う
画像内の文字の位置（実測）：メイン 上12.8%・下16.7%・左右約2.8% ／ サブ 上21.1%・下15.6%・左右3.1%
③ メインとサブの文字の間隔が約66pxあった（Figmaは約36px）→ 余白をなくす
（画像の透明な余白だけで、1920px幅のとき文字と文字の間が約37pxになる） */
.fv-section__main-copy,
.fv-section__sub-copy {
width: fit-content;
margin-inline: auto;
padding-bottom: 0;
}
.fv-section__sub-copy { margin-top: 0; }
.fv-section__main-copy::after { inset: 12.8% 2.7% 16.7% 2.9%; }
.fv-section__sub-copy::after { inset: 21.1% 3.1% 15.6% 3.1%; }
/* ④ コピー全体の縦位置：Figma録画ではFV（高さ1000px）の中央より約90px上にある → PCは top 50%→39%（文字の中心がFV中央より約90px上） */
@media (min-width: 1100px) {
.fv-section__copy { top: 39%; }
}
/* ⑤ 四角が上がるのに合わせて文字が下から付いてくる（2026-10-07 Figma録画のコマ送りで再確認）
Figmaでは、四角の下端が上がっていくのに文字の上端がぴったり付いてくるので「四角が上に上がり、
その下から文字が出てくる」ように見える。以前は文字が先に動き終わって止まっていたので、
四角が消えるのと同じ時間・同じ緩急で、文字1行ぶん（メインは画像高さの70.5%・サブは63%）下から上げる。
下からせり上がる様子が見えるよう、枠で切らない（overflow: visible）。 */
.fv-section__main-copy,
.fv-section__sub-copy { overflow: visible; }
.fv-section__main-copy .fv-section__h1 { animation: fvTextUpMain .16s cubic-bezier(.6, 0, .4, 1) .64s both; }
.fv-section__sub-copy p { animation: fvTextUpSub .1s cubic-bezier(.6, 0, .4, 1) .77s both; }
@keyframes fvTextUpMain {
from { opacity: .25; transform: translateY(70.5%); }
to { opacity: 1; transform: none; }
}
@keyframes fvTextUpSub {
from { opacity: .25; transform: translateY(63%); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.fv-section__main-copy .fv-section__h1,
.fv-section__sub-copy p { animation: none; }
}
/* ⑥ 最終形（2026-10-07 ユーザー説明「四角が上ににゅんと出て、四角の上は固定のまま下の部分が上がると文字が見える」）
・四角：下端を固定して上に伸びて出る → 止まる → 上端を固定して下端が上がって消える
・文字：動かさない。四角が出きるまでは非表示、出きった瞬間に（四角の裏で）表示しておき、
四角の下端が上がった分だけ見えてくる。
⑤の「文字が下から付いてくる」は誤りだったので上書きする。 */
@keyframes fvBoxMain {
0% { clip-path: inset(100% 0 0 0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); } /* 高さ0（下端） */
26% { clip-path: inset(0 0 0 0); } /* 0.17秒 上に伸び切る */
75% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(.6, 0, .4, 1); } /* 0.49秒まで止まる */
100% { clip-path: inset(0 0 100% 0); } /* 下端が上がって消える */
}
@keyframes fvBoxSub {
0% { clip-path: inset(100% 0 0 0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
18% { clip-path: inset(0 0 0 0); }
82% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
100% { clip-path: inset(0 0 100% 0); }
}
.fv-section__main-copy::after { clip-path: inset(100% 0 0 0); }
.fv-section__sub-copy::after { clip-path: inset(100% 0 0 0); }
/* 文字は四角が伸び切った時点（メイン0.32秒・サブ0.42秒）で一瞬で表示。それまでは見えない */
.fv-section__main-copy .fv-section__h1 { animation: fvTextShow 1ms linear .32s both; }
.fv-section__sub-copy p { animation: fvTextShow 1ms linear .42s both; }
@keyframes fvTextShow {
from { opacity: 0; transform: none; }
to { opacity: 1; transform: none; }
}
/* ==================================================
コンテンツバー（見出し下の線）2026-10-07 デザイナー支給 Contents_bar.webp に統一
画像（2288x8・2倍書き出し）を実測：左端に赤の太線 約112px×4px（#C9242C）＋ 全幅の細いグレー線 1px（#656864）。
赤は細線の上に乗る形（下揃え）。以前の「青→赤→薄グレーの3色バー」は全ページでこれに置き換え。
濃い地（.section-heading--white）では細線を白の半透明にする。
・.section-heading__bar（トップ・企業情報・設備・お問い合わせ・プライバシー）… ここ
・.recruit-sec-bar（採用）… recruit.css ／ .business-mid-heading（事業内容）… business.css
================================================== */
:root {
--cbar-red: var(--color-red);
--cbar-red-w: 112px;
--cbar-red-h: 4px;
--cbar-line: #656864;
--cbar-line-dark: rgba(255, 255, 255, .45);
}
.section-heading__bar,
.section-heading--white .section-heading__bar {
height: var(--cbar-red-h);
margin-top: 16px;
background:
linear-gradient(var(--cbar-red), var(--cbar-red)) left bottom / var(--cbar-red-w) var(--cbar-red-h) no-repeat,
linear-gradient(var(--cbar-line), var(--cbar-line)) left bottom / 100% 1px no-repeat;
}
.section-heading--white .section-heading__bar {
background:
linear-gradient(var(--cbar-red), var(--cbar-red)) left bottom / var(--cbar-red-w) var(--cbar-red-h) no-repeat,
linear-gradient(var(--cbar-line-dark), var(--cbar-line-dark)) left bottom / 100% 1px no-repeat;
}
/* ---- お知らせ（Information）の背景：ユーザー支給 NEWS.webp（2026-10-07）。
白地＋左下に「Information」（#F3F3F3＝従来のCSS文字と同色）。採用情報と同じく画面幅いっぱい・左下基準で敷き、
CSSの「Information」は重なるので出さない。SP（767px以下）は従来どおり。 */
@media (min-width: 768px) {
.top-section--news {
background: var(--color-white) url("../../../../uploads/2026/10/top-news-bg.webp") left bottom / 100% auto no-repeat;
}
.top-page .top-section--news .top-section__bg-text { display: none; }
}
/* ---- 飾りの大英字を文字画像に（2026-10-07） ----
デザインの書体（Helvetica Neue LT Pro・有償）がサイトで使えず、Windows では Inter/Arial に置き換わって
形が違って見えていたため、デザイナー書き出しの文字画像を使う。aria-hidden の飾り。
・Business：支給 Business (2).webp（1231x209・1.5倍書き出し）→ 1920px幅で 821px（=42.76vw）、セクション右上ぴったり。 */
.top-page .top-section--business .top-section__bg-text--img {
top: 0;
right: 0;
bottom: auto;
left: auto;
transform: none;
font-size: 0;
line-height: 0;
color: transparent;
}
.top-section__bg-text--img img {
display: block;
height: auto;
max-width: none;
}
.top-section--business .top-section__bg-text--img img { width: 42.76vw; }
@media (max-width: 767px) {
.top-page .top-section--business .top-section__bg-text--img { top: 0; }
.top-section--business .top-section__bg-text--img img { width: 56vw; }
}
/* 「Business」の下端を「事業内容」の下線にぴったり乗せる（2026-10-07 支給 BUSINESS (3).webp の配置どおり）。
下線の位置はセクション上端から PC/タブレット 159px・SP 136px で一定、文字画像の高さは幅に比例（幅×209/1231）。
→ top = 下線の位置 − 文字画像の高さ（PC 42.76vw → 高さ7.26vw ／ SP 56vw → 高さ9.51vw） */
.top-page .top-section--business .top-section__bg-text--img { top: calc(159px - 7.26vw); }
@media (max-width: 767px) {
/* 2026-10-08：SPの下線の位置が 136px → 115px に変わっていて文字が線の下にはみ出していたので追従（幅に関係なく115pxで一定） */
.top-page .top-section--business .top-section__bg-text--img { top: calc(115px - 9.51vw); }
}
/* ---- VOICE：VOICE.webp から切り出した文字画像（840x190・#F3F3F3 の透過）2026-10-07 ----
デザイン（富士梱包_TOP.webp）どおり、セクション右下にぴったり・下端で少し切れる位置。
画像は VOICE.webp（2880幅＝1920px時の1.5倍）の右下をそのまま切り出したので、幅 840/2880 = 29.17vw・right 0・bottom 0 で原寸どおり。
SP（1099px以下はレイアウトが変わる）は従来のCSS文字（--sp-only）。 */
.top-section__bg-text--voice { display: none; }
@media (min-width: 1100px) {
.top-page .top-section--voice .top-section__bg-text--sp-only { display: none; }
.top-page .top-section--voice .top-section__bg-text--voice {
display: block;
top: auto;
left: auto;
right: 0;
bottom: 0;
transform: none;
font-size: 0;
line-height: 0;
}
.top-section__bg-text--voice img { width: 29.17vw; }
}
/* ---- 大英字 Information / VOICE / Recruit も支給の文字画像に（2026-10-08） ----
支給：Information.webp（1543x180）・VOICE (1).webp（803x169）・_recruit.webp（966x180）。
いずれも 1.5倍書き出し・文字の下が切れた形（セクション下端に乗せる前提）なので bottom:0 に置く。
・Information／Recruit：PC（768px以上）は背景画像に焼き込み済みで非表示のまま（既存ルール）。SPだけで使う。
・VOICE：SP（1099px以下）と PC の両方で使う。
SPの大きさは従来のCSS文字（font-size 15vw＝デザイン200pxの比率）に合わせ、画像幅 × 0.05vw。 */
.top-page .top-section__bg-text--word {
top: auto;
bottom: 0;
left: 0;
right: auto;
transform: none;
font-size: 0;
line-height: 0;
}
.top-section--news .top-section__bg-text--word img { width: 77.15vw; } /* 1543 × .05 */
.top-section--recruit .top-section__bg-text--word img { width: 48.3vw; } /* 966 × .05 */
.top-page .top-section--voice .top-section__bg-text--word { left: auto; right: 0; }
.top-section--voice .top-section__bg-text--word img { width: 40.15vw; } /* 803 × .05 */
@media (max-width: 767px) {
/* SPはVOICEの地がグレー（#f3f3f3）で、画像の文字色 #F3F3F3 と同色になって消えるため一段濃く（従来の #e4e6ea 相当） */
.top-section--voice .top-section__bg-text--word img { filter: brightness(.94); }
}
/* PC：新画像は旧切り出し（840x190）の文字部分と同寸。旧画像の右余白 9px（2880幅基準）だけ空けて右下に */
@media (min-width: 1100px) {
.top-page .top-section--voice .top-section__bg-text--voice { right: .3125vw; }
.top-section__bg-text--voice img { width: 27.88vw; } /* 803 / 2880 */
}
/* 見た目だけ消して、スクリーンリーダーには読ませる（2026-10-08・トップ「採用情報」の見出しで使用） */
.u-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ---- トップ「採用情報」のバランス：支給 RECRUIT (1).webp（2880x675＝1920pxの1.5倍）どおり（2026-10-08） ----
1920px換算：セクション高さ 450px（背景画像 RECRUIT.webp と同じ比率で「Recruit」が下端に乗る）／
本文 上端約118px／ボタン 上端222px（本文との間 43px）／
写真 右＝300x250・上端83px、左＝300x200・上端167px、間 52px（右側が高い。以前は左が高かった）。PC（1100px以上）のみ。 */
@media (min-width: 1100px) {
.top-section--recruit { min-height: 450px; }
.top-section--recruit .top-section__container {
gap: 43px;
padding: 118px 0 80px;
}
.recruit-images {
flex-direction: row-reverse; /* 大きい写真（main）を右に */
gap: 52px;
top: 83px;
}
}
/* ---------- CONTACT帯の青地版（.top-contact--blue）：事業内容・設備一覧ページで使用（2026-10-08 ユーザー指示・支給画像の色味） ----------
青地・白文字・白ボタン（.btn-outline）。ボタンはホバーで濃い青になるので、青地の上で埋もれないよう白の内枠を付ける。
（最初は事業内容ページ専用で business.css に置いていたが、設備一覧でも使うのでこちらへ移動） */
.top-contact.top-contact--blue { background: var(--color-blue); }
.top-contact--blue .top-contact__text { color: var(--color-white); }
.top-contact--blue .btn-outline { box-shadow: inset 0 0 0 1px var(--color-white); }
/* ---- 改行・レスポンシブ修正指示書（2026-10-08）への対応：はみ出し防止の安全策 ----
テストサーバーでは日本語の文節区切り（）が入らず、keep-all で折り返せない長い文が
横並び・グリッドを押し広げて見切れていた（原因は inc/phrase.php の fujikon_phrase_server_ok を参照）。
区切りが入る環境でも、念のため「中身の長さで箱が広がらない」ようにしておく。
・グリッドの列は各CSSで 1fr → minmax(0, 1fr) に置換済み。 */
/* 親テーマの td,th { word-break: break-all }（数字・住所が途中で割れる）を、文節処理が無い環境でも打ち消す */
.top-page th,
.top-page td { word-break: normal; }
/* CONTACT帯：説明文は改行禁止（nowrap）だったので、縦積みになる幅では文節で折り返せるように */
.top-contact__text { min-width: 0; }
@media (max-width: 1099px) {
.top-contact__text { max-width: 100%; }
.top-contact__desc { white-space: normal; }
}
/* トップ採用の本文：幅いっぱいまでで止める */
.recruit-text { max-width: min(520px, 100%); }
/* 電話番号のリンクは途中で改行しない（「048-／430-0585」対策・2026-10-08） */
.top-page a[href^="tel:"] { white-space: nowrap; }
/* ---- ハンバーガーメニュー内の「お問い合わせ」ボタンを赤に（2026-10-08 ユーザー指示）。バーの赤ボタンと同じ色・同じホバー ---- */
@media (max-width: 1099px) {
.top-header__nav-contact,
a.top-header__nav-contact:link,
a.top-header__nav-contact:visited {
background: var(--color-red);
color: var(--color-white);
transition: background-color .2s;
}
a.top-header__nav-contact:hover,
a.top-header__nav-contact:focus-visible {
background: var(--color-red-hover);
color: var(--color-white);
}
}
/* ---- ハンバーガーメニュー内の電話番号（2026-10-08 ユーザー指示） ----
赤い「お問い合わせ」の下に、同じ幅の青い四角（--color-blue）を1つ。中に2行（本社／岩槻営業所）、行ごとにタップで発信。
赤ボタン・電話の各行とも、アイコンを左から24pxの同じ位置にそろえ、文字の書き出しもそろえる。 */
.top-header__nav-tels { display: none; }
@media (max-width: 1099px) {
.top-header__nav-contact,
a.top-header__nav-contact:link,
a.top-header__nav-contact:visited {
justify-content: flex-start;
gap: 12px;
padding: 0 24px;
}
.top-header__nav-contact svg { width: 18px; flex-shrink: 0; }
.top-header.is-menu-open .top-header__nav-tels {
display: flex;
flex-direction: column;
width: min(280px, 100%);
margin-top: -10px; /* 親の gap 20px を、赤ボタンとの間だけ 10px に */
background: var(--color-blue);
}
.top-header__nav-tel,
a.top-header__nav-tel:link,
a.top-header__nav-tel:visited {
display: flex;
align-items: center;
gap: 12px;
height: 52px;
padding: 0 24px;
color: var(--color-white);
font-family: var(--font-ja);
font-weight: 700;
transition: background-color .2s;
}
.top-header__nav-tel + .top-header__nav-tel { border-top: 1px solid rgba(255, 255, 255, .25); }
a.top-header__nav-tel:hover,
a.top-header__nav-tel:focus-visible { background: var(--color-blue-hover); color: var(--color-white); }
.top-header__nav-tel svg { width: 18px; height: 18px; flex-shrink: 0; }
.top-header__nav-tel-num { font-family: var(--font-en); font-size: 17px; letter-spacing: .06em; white-space: nowrap; }
.top-header__nav-tel-name { margin-left: auto; font-size: 12px; letter-spacing: .05em; opacity: .85; white-space: nowrap; }
}