@charset "UTF-8";
/* =========================================================
   指定フォント（2026-10-01 支給）
   欧文：Helvetica Now Text（Medium / Bold）
   和文：Tazugane Gothic StdN（Medium / Bold）
   ※支給フォントはデスクトップ用ライセンス（埋め込み制限：Preview & Print）のため、
     フォントファイルはサイトに同梱せず、閲覧端末にインストールされたものを local() で参照する。
     公開時はMonotypeのWebフォントライセンスで取得したwoff2を fonts/ に置けば url() から読み込まれる。
     どちらもない環境では Noto Sans JP（Google Fonts）で表示。
   ========================================================= */
@font-face { font-family: "KSL Latin"; font-weight: 100 600; font-display: swap;
  src: local("Helvetica Now Text Medium"), local("HelveticaNowText-Medium"), url("../fonts/HelveticaNowText-Medium.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-205E; }
@font-face { font-family: "KSL Latin"; font-weight: 700 900; font-display: swap;
  src: local("Helvetica Now Text Bold"), local("HelveticaNowText-Bold"), url("../fonts/HelveticaNowText-Bold.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-205E; }
@font-face { font-family: "KSL JP"; font-weight: 100 600; font-display: swap;
  src: local("Tazugane Gothic StdN Medium"), local("TazuganeGothicStdN-Medium"), url("../fonts/TazuganeGothicStdN-Medium.woff2") format("woff2"); }
@font-face { font-family: "KSL JP"; font-weight: 700 900; font-display: swap;
  src: local("Tazugane Gothic StdN Bold"), local("TazuganeGothicStdN-Bold"), url("../fonts/TazuganeGothicStdN-Bold.woff2") format("woff2"); }
/* =========================================================
   KSL（コクヨサプライロジスティクス）PC版 共通スタイル
   デザインPDF（アートボード幅1120px）の値をpxでそのまま採用
   ========================================================= */

:root {
  --w: 1120px;
  --c-text: #333333;
  --c-text2: #3a3a3a;
  --c-sub: #666666;
  --c-sub2: #717171;
  --c-note: #b3b3b3;
  --c-line: #cccccc;
  --c-gray: #f1f1f1;
  --c-dark: #1f1f1f;
  --c-green-bg: #e9fdcc;
  --c-blue: #0095ba;
  --c-blue-dark: #006d81;
  --c-teal-dark: #004f5e;
  --c-red: #fa5951;
  --c-red-line: #d3232e;
  /* ラブロジ4色 */
  --c-cyan: #08ccf9;
  --c-green: #07c37f;
  --c-lavender: #afc1ff;
  --c-coral: #fa5951;
  --c-lime: #c9ef8a;
  --c-pink: #fea8a8;
  --font: "KSL Latin", "KSL JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-num: "KSL Latin", "Apple SD Gothic Neo", "Noto Sans JP", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: var(--w);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500; /* 本文はMedium（デザインより1段階太く） */
  line-height: 2.5;
  color: var(--c-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 0;
}
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- レイアウト ---------- */
.inner { position: relative; width: var(--w); margin: 0 auto; }
.sec { position: relative; overflow: hidden; }
.sec > .inner { height: 100%; }
.abs { position: absolute; }
.ttl__en:not(.abs), .ttl__ja:not(.abs) { position: relative; }
.nw { white-space: nowrap; }

/* ---------- ヘッダー ---------- */
.site-header { position: sticky; top: 0; z-index: 100; height: 78px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.site-header .inner { height: 100%; }
.site-header__logo { position: absolute; left: 25px; top: 28px; }
.site-header__logo img { width: auto; height: 22px; } /* KSL社名ロゴ（横組, 443×28） */
/* グローバルメニュー（PC：右上テキストリンク／SP：ハンバーガー） */
.site-nav { position: absolute; right: 25px; top: 0; height: 100%; }
.site-nav ul { display: flex; align-items: center; height: 100%; gap: 22px; }
.site-nav a { font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .06em; color: var(--c-text); white-space: nowrap; transition: color .2s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--c-blue); }
.site-nav__contact a { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; background: var(--c-blue); color: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 7px) 100%, 0 100%); }
.site-nav__contact a:hover, .site-nav__contact a[aria-current="page"] { color: #fff; opacity: .85; }
.site-nav__toggle { display: none; }
html { scroll-padding-top: 90px; }

/* ---------- 見出し（— LABEL ＋ 透かし英字 ＋ 和文見出し） ---------- */
.ttl { position: relative; }
.ttl__bg {
  position: absolute;
  left: 0; top: 0;
  font-weight: 900;
  font-size: 132px;
  line-height: 1;
  z-index: 0;
  letter-spacing: 0;
  color: #f2f2f2;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.ttl__en {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .3em;
  white-space: nowrap;
  color: var(--c-text);
}
.ttl__en::before {
  content: "";
  flex: none;
  width: 21px;
  height: 2px;
  margin-right: 8px;
  background: var(--c-blue);
}
.ttl__ja {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--c-text);
}

/* ---------- 矢印サークル付きリンク ---------- */
.arrow {
  display: inline-block;
  flex: none;
  width: 24px; height: 24px;
  background: url("../img/common/arrow.svg") center / 100% 100% no-repeat;
}
.arrow--l { width: 45px; height: 45px; background-image: url("../img/common/arrow-w.svg"); }
.more {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--c-text);
  transition: opacity .2s;
}
.more:hover { opacity: .6; }

/* ---------- 右下カット（斜め） ---------- */
.cut { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cy, 30px)), calc(100% - var(--cx, 30px)) 100%, 0 100%); }

/* ---------- タグ（右下カット） ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  color: var(--c-text);
  --cx: 6px; --cy: 10px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cy)), calc(100% - var(--cx)) 100%, 0 100%);
}
.tag--press { background: var(--c-cyan); }
.tag--media { background: var(--c-pink); }
.tag--daily { background: var(--c-lime); }
.tag--award { background: #adc3fe; }
.tag--sustainability { background: #58c185; }
.tag--info { background: #e3e3e3; } /* お知らせ：タブなし（「すべて」にのみ表示） */

/* ---------- フッター ---------- */
/* パンくずリスト（フッターの直上。現行サイトと同じ形：TOP ＞ 親ページ ＞ 現在のページ。左端はフッターのリード文に揃える） */
.breadcrumb .inner { padding: 28px 87px 16px; }
.breadcrumb ol { font-size: 12px; line-height: 1.6; letter-spacing: .04em; color: var(--c-text); }
.breadcrumb li { display: inline; } /* 長い記事タイトルも行の途中から自然に折り返す */
.breadcrumb li + li::before { content: ">"; margin: 0 10px; color: var(--c-sub); }
.breadcrumb a { color: var(--c-sub); transition: color .2s; }
.breadcrumb a:hover { color: var(--c-text); }

.site-footer { background: var(--c-gray); }
.site-footer .inner { height: 445px; } /* 見出しとリンクの間を詰めた分（20px）低く */
.site-footer__lead {
  position: absolute; left: 87px; top: 84px;
  width: 290px;
  font-size: 12px; line-height: 1.8; color: var(--c-sub); /* 行間：現行サイト基準 1.8 */
}
.site-footer__group {
  position: absolute; left: 87px; top: 162px; /* リード文の行間変更に合わせて22px繰り上げ */
  display: flex; gap: 53px;
  font-size: 12px; line-height: 34px; color: var(--c-sub);
}
.site-footer__col { position: absolute; top: 77px; }
.site-footer__col h3 {
  font-size: 12px; font-weight: 500; line-height: 34px; letter-spacing: .04em; color: var(--c-text);
  margin-bottom: 10px; /* 見出しとリンクの間：リンク同士の間隔（6px）より少し広い程度 */
}
.site-footer__col li { font-size: 12px; line-height: 34px; color: var(--c-sub); margin-bottom: 6px; }
.site-footer__col a:hover { color: var(--c-text); }
.site-footer__col--about { left: 476px; top: 80px; }
.site-footer__col--business { left: 691px; }
.site-footer__col--recruit { left: 898px; }
/* フッター最下部（個人情報保護方針・ご利用規約・コピーライト） */
.site-bottom { background: #fff; }
.site-bottom .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 60px; }
.site-bottom__links { display: flex; gap: 40px; }
.site-bottom__links a { font-size: 12px; color: var(--c-sub); transition: color .2s; }
.site-bottom__links a:hover { color: var(--c-text); }
.site-bottom__copy small { font-size: 10px; letter-spacing: .02em; color: var(--c-note); }

/* ---------- よくあるご質問：アコーディオン（js/main.js） ---------- */
.faq-list { position: relative; width: 823px; }
.faq { position: relative; border-bottom: 1px solid #d9d9d9; }
.faq + .faq { margin-top: 34px; }
.faq__q {
  position: relative; display: block; width: 100%; padding: 0 60px 25px 0; text-align: left;
  font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: .06em; color: var(--c-text2); white-space: nowrap;
  transition: opacity .2s;
}
.faq__q:hover { opacity: .7; }
.faq__ic { position: absolute; left: 770px; top: -1px; width: 26px; height: 26px; border: .8px solid #393939; border-radius: 50%; }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; left: 6px; top: 12px; width: 13px; height: 1px; background: #393939; transition: transform .3s; }
.faq__ic::before { transform: rotate(90deg); }
.faq.is-open .faq__ic::before { transform: rotate(0); }
.faq__a { overflow: hidden; transition: height .3s ease; }
.faq__a p { margin-top: -2px; padding-bottom: 33px; margin-left: -1px; font-size: 12px; line-height: 20px; color: var(--c-sub2); white-space: nowrap; }

/* ---------- スクロールインアニメーション（js/main.js が .is-inview を付与） ----------
   写真（背景不透過） : 写真の枠(.a-photo)にストライプ→斜めの帯が左から覆い→右へ抜けて写真が現れる
   人物・イラスト（透過）: .js-cut … 下からイン
   見出し・背景文字   : .a-left / .a-right / .a-up / .a-down（JSで自動付与）
   ※ opacity / transform を直接上書きしないよう visibility＋individual transform(translate) で制御 */
:root {
  /* 写真が現れる時の帯（コクヨカラー単色。ページごとに body.veil-red / .veil-blue で切替） */
  --veil-a: #ffe7e9;   /* 待機中ストライプ（淡） */
  --veil-b: #ffd3d7;   /* 待機中ストライプ（濃） */
  --veil-band: #ff3e4f; /* 斜めの帯 */
}
.veil-blue { --veil-a: #e1f4fe; --veil-b: #c6eafd; --veil-band: #00adfa; }
.a-veil { display: none; }
/* 写真（背景不透過）全体の明るさを少し上げる（数値で一括調整可） */
img.js-photo { filter: brightness(1.08) saturate(1.03); }
@media (prefers-reduced-motion: no-preference) {
  .js-anim .a-target:not(.is-inview) { visibility: hidden; }
  .js-anim .a-target.is-inview { animation: var(--a-name) var(--a-dur, .9s) cubic-bezier(.22, .61, .36, 1) var(--a-delay, 0s) both; }
  .js-anim .js-cut, .js-anim .a-up { --a-name: a-up; }
  .js-anim .a-down { --a-name: a-down; }
  .js-anim .a-left { --a-name: a-left; }
  .js-anim .a-right { --a-name: a-right; }
  .js-anim .a-wm { --a-dur: 1.4s; }

  /* 写真 */
  .js-anim .a-photo { isolation: isolate; } /* ベールの重なりを写真枠の中に閉じ込める（上に重なる要素より前に出ない） */
  .js-anim .a-photo .a-veil {
    display: block; position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
    background: repeating-linear-gradient(120deg, var(--veil-a) 0 12px, var(--veil-b) 12px 24px);
  }
  .js-anim .a-photo .a-veil::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--pad, 60px)); width: calc(100% + 2 * var(--pad, 60px));
    background: var(--veil-band); transform: skewX(-30deg); translate: -100% 0;
  }
  .js-anim .a-photo.is-inview .a-veil { animation: a-veil 1.2s linear var(--a-delay, 0s) both; }
  .js-anim .a-photo.is-inview .a-veil::before { animation: a-band 1.2s var(--a-delay, 0s) both; }
}
@keyframes a-veil {
  0%, 44%  { background-image: repeating-linear-gradient(120deg, var(--veil-a) 0 12px, var(--veil-b) 12px 24px); visibility: visible; }
  45%, 99% { background-image: none; visibility: visible; }
  100%     { background-image: none; visibility: hidden; }
}
@keyframes a-band {
  0%   { translate: -100% 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  45%  { translate: 0 0;     animation-timing-function: cubic-bezier(.6, 0, .25, 1); }
  100% { translate: 100% 0; }
}
@keyframes a-up    { from { opacity: 0; translate: 0 40px; } }
@keyframes a-down  { from { opacity: 0; translate: 0 -40px; } }
@keyframes a-left  { from { opacity: 0; translate: -40px 0; } }
@keyframes a-right { from { opacity: 0; translate: 60px 0; } }

/* =========================================================
   スマホ（〜767px）共通　※デザイン：KSL完成デザイン/スマフォ（アートボード幅375px）
   PCは絶対配置のため、SPでは各ページCSSの @media ブロックでフローレイアウトに組み直す
   ========================================================= */
.sp-only { display: none; }
@media (max-width: 767px) {
  body { min-width: 0; }
  .pc-only { display: none !important; }
  .sp-only { display: revert; }
  br.sp-only { display: inline; }
  .inner { width: auto; max-width: 375px; margin: 0 auto; } /* 375pxデザインを基準に、それより広い端末では中央揃え */
  :root { --bleed: max(0px, (100vw - 375px) / 2); } /* 中央揃え時の左右の余白幅（画面端まで伸ばす要素用） */
  main .sec { height: auto; }

  /* ヘッダー（375幅で高さ45px・ロゴ幅84px） */
  .site-header { height: 45px; }
  .site-header__logo { left: 13px; top: 16px; }
  .site-header__logo img { height: 13px; }
  html { scroll-padding-top: 55px; }
  .site-nav__toggle { display: block; position: absolute; right: 8px; top: 3px; width: 40px; height: 40px; z-index: 2; }
  .site-nav__toggle span { position: absolute; left: 10px; width: 20px; height: 2px; background: var(--c-text); transition: transform .3s, opacity .3s; }
  .site-nav__toggle span:nth-child(1) { top: 13px; }
  .site-nav__toggle span:nth-child(2) { top: 19px; }
  .site-nav__toggle span:nth-child(3) { top: 25px; }
  .site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .site-nav { position: fixed; left: 0; right: 0; top: 45px; height: auto; max-height: calc(100vh - 45px); overflow-y: auto; background: #fff; box-shadow: 0 8px 16px rgba(0,0,0,.08); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s; }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .site-nav ul { display: block; height: auto; padding: 8px 24px 28px; }
  .site-nav li { border-bottom: 1px solid #eee; }
  .site-nav a { display: block; padding: 18px 4px; font-size: 14px; }
  .site-nav__contact { border-bottom: 0 !important; margin-top: 20px; }
  .site-nav__contact a { justify-content: center; height: 48px; padding: 0; font-size: 14px; }

  /* 見出し */
  .ttl__bg { font-size: 60px; }
  .ttl__en { font-size: 14px; line-height: 20px; }
  .ttl__en::before { width: 21px; }
  .ttl__ja { font-size: 26px; line-height: 43px; letter-spacing: .02em; }

  /* 矢印リンク */
  .more { gap: 16px; }

  /* フッター（y13828〜 / 背景#f0f0f0） */
  .breadcrumb .inner { padding: 22px 20px 14px; }
  .site-footer { background: #f0f0f0; }
  .site-footer .inner { height: auto; padding: 45px 0 59px; }
  .site-footer__lead, .site-footer__group, .site-footer__col { position: static; }
  .site-footer__lead { width: auto; margin: 0 40px 0 44px; font-size: 12px; line-height: 1.8; }
  .site-footer__group { display: block; margin: 34px 0 0 40px; line-height: 42px; }
  .site-footer__col { margin: 38px 0 0 38px; }
  .site-footer__col h3 { margin-bottom: 10px; }
  .site-footer__col + .site-footer__col { margin-top: 35px; }
  .site-footer__col li { line-height: 34px; margin-bottom: 6px; }
  .site-footer__col--business, .site-footer__col--recruit { margin-left: 33px; }
  .site-bottom .inner { display: block; height: auto; padding: 22px 0 26px; text-align: center; }
  .site-bottom__links { justify-content: center; gap: 28px; }
  .site-bottom__copy { margin-top: 10px; line-height: 1.6; }
}

/* ---------- 人物写真：通常 → 笑顔（js/main.js）
   切替時に、写真表示アニメと同じ「全塗りの斜め帯」が横切り、帯が覆った瞬間に笑顔⇔通常が入れ替わる
   PC：マウスホバーで笑顔／外れると通常　スマホ：タップで笑顔 ---------- */
.ppl-pic { position: absolute; display: block; overflow: hidden; background: #e6eef0; isolation: isolate; }
.ppl-pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.ppl-pic__b { opacity: 0; }
.ppl-pic.is-smile .ppl-pic__b { opacity: 1; }
.ppl-pic__band { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; visibility: hidden; }
.ppl-pic.is-sweep .ppl-pic__band { visibility: visible; } /* 切替中だけ表示（待機中に帯の端が見えないように） */
.ppl-pic__band::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--pad, 60px)); width: calc(100% + 2 * var(--pad, 60px));
  background: var(--veil-band); transform: skewX(-30deg); translate: -100% 0;
}
.ppl-pic.is-sweep .ppl-pic__band::before { animation: a-band .8s both; }

/* ---------- 視覚的に隠す（読み上げ・見出し構造用） ---------- */
.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- ページの先頭へ戻るボタン（制作マニュアル 4.1.7(1)）
   スクロールで表示（js/main.js が .is-show を付与） ---------- */
.pagetop {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%; background: #333; box-shadow: 0 4px 12px rgba(0,0,0,.15);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s, transform .3s, visibility .3s, background .2s;
}
.pagetop.is-show { opacity: 1; visibility: visible; transform: none; }
.pagetop:hover { background: var(--c-blue); }
.pagetop::before { content: ""; position: absolute; left: 50%; top: 52%; width: 12px; height: 12px; border-top: 2px solid #fff; border-left: 2px solid #fff; transform: translate(-50%, -25%) rotate(45deg); }
.pagetop__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pagetop:focus-visible { opacity: 1; visibility: visible; outline: 2px solid var(--c-blue); outline-offset: 3px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 767px) {
  .pagetop { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}