@charset "UTF-8";
/* ==========================================================================
   IVYCS コーポレートサイト（PC）
   命名: l-（レイアウト）c-（部品）u-（ユーティリティ）。ページ専用classは作らない
   数値: Figma（XDから変換）と元XDファイルの実測値。デザイン幅1440px・内容幅1160px
   寸法は vw で書く。PC は 1440px＝100vw（24px → 1.667vw）、SP（1023px 以下）は 390px＝100vw（16px → 4.103vw）
   1px の線と、それを打ち消す -1px だけは px のまま
   文字の上下位置は、XDのベースライン座標から「行の高さ／2 ＋ 係数×文字サイズ」を引いて合わせている
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --color-text: #000;
  --color-teal: #1a9091;
  --color-green-dark: #125546;
  --color-gray-bg: #f5f5f5;
  --color-line: #adadad;
  --color-navy-overlay: rgba(21, 53, 90, .3);

  --grad-campus: linear-gradient(180deg, #1a9091, #6facad);
  --grad-food: linear-gradient(180deg, #de908a, #e2b7b3);
  --grad-facility: linear-gradient(180deg, #397bac, #76abd1);
  --grad-cafe: linear-gradient(180deg, #c9a156, #c7a86b);

  /* 事業ページの色。u-theme-* で差し替える（既定はキャンパスライフの teal） */
  --theme: var(--color-teal);
  --theme-grad: var(--grad-campus);

  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en: "Lato", var(--font-ja);
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-helvetica: "Helvetica Neue", Helvetica, Arial, var(--font-ja);

  --container: 80.556vw;
  --header-h: 5.556vw;

  --bg-gradient-01: url(../img/bg/gradient-01.webp?v=e506327b);
  --bg-gradient-02: url(../img/bg/gradient-02.webp?v=67787628);

  /* 丸矢印のグリフ（線1px）。円の大きさごとに座標を持つ */
  --glyph-arrow-40: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000'%3E%3Cpath d='M14 20h12M20 15l6 5-6 5'/%3E%3C/svg%3E");
  --glyph-arrow-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000'%3E%3Cpath d='M6 12h12M12 7l6 5-6 5'/%3E%3C/svg%3E");
  --glyph-back-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000'%3E%3Cpath d='M18 12H6M12 7l-6 5 6 5'/%3E%3C/svg%3E");
  --glyph-down-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000'%3E%3Cpath d='M12 6v12M7 12l5 6 5-6'/%3E%3C/svg%3E");
  --glyph-external-40: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000'%3E%3Cpath d='M14 26l12-12M20 14h6v6'/%3E%3C/svg%3E");
  --glyph-up-60: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23000'%3E%3Cpath d='M30 26V14M25 20l5-6 5 6'/%3E%3C/svg%3E");
  --glyph-external-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000'%3E%3Cpath d='M0 12L12 0M6 .5h5.5V6'/%3E%3C/svg%3E");
  --glyph-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000'%3E%3Cpath d='M14 2l-8 8 8 8'/%3E%3C/svg%3E");
  --glyph-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000'%3E%3Cpath d='M6 2l8 8-8 8'/%3E%3C/svg%3E");
  --glyph-window-18: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000'%3E%3Cpath d='M8 .5H.5v17h17V10M8 10L17.5.5M11 .5h6.5V7'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-ja);
  font-size: 1.111vw;
  line-height: 2;
  color: var(--color-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  /* XD は約物を詰めないので、Chrome の既定（「」の連続を半角に詰める）を止める */
  text-spacing-trim: space-all;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button { transition: opacity .3s; }
/* ページ内リンク先がヘッダー（80px）に隠れないように */
[id]:not(body) { scroll-margin-top: 8.333vw; }
a:hover { opacity: .75; }

/* ==========================================================================
   Layout
   ========================================================================== */
.l-container { position: relative; width: var(--container); margin-inline: auto; }

.l-grid { display: grid; }
.l-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 2.778vw; }
.l-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 2.153vw; }
.l-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 1.736vw; }

.l-stack > * + * { margin-top: 2.778vw; }

/* 左ラベル（縦書き等）＋右本文 */
.l-split { display: grid; grid-template-columns: 6.944vw 1fr; align-items: start; }
.l-split--services { margin-top: 4.167vw; }
.l-split--service-list { min-height: 31.597vw; padding-top: 17.986vw; }
.l-split--faq { margin-top: 6.736vw; }
.l-split--panel { grid-template-columns: 13.889vw 1fr; }
.l-split--access { grid-template-columns: 13.333vw 1fr; }

/* ---------- Header ---------- */
.l-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: flex-start;
  height: var(--header-h);
  /* 背景はグラデ画像の上端80pxを切り出す（幅1697/1440、左-117px、上-25px 相当） */
  background: var(--bg-gradient-01) 45.45% -1.736vw / 117.85% auto no-repeat;
}
.l-header__logo { position: absolute; top: 2.083vw; left: 2.708vw; }
.l-header__logo img { width: 10.278vw; }
.l-header__nav { display: flex; margin-left: auto; padding-top: 1.667vw; }
.l-header__item { position: relative; height: 2.569vw; padding: 0 2.5vw 0 0.833vw; border-left: 1px solid #c9c9c9; }
.l-header__item:last-of-type { padding-right: 2.778vw; }
.l-header__item > a { display: block; height: 100%; color: #fff; }

.l-header__en { display: block; margin-top: -1px; font-family: var(--font-en); font-size: 0.833vw; line-height: 1; }
.l-header__ja { display: block; margin-top: 0.625vw; font-size: 1.042vw; font-weight: 500; line-height: 1; }
.l-header__menu-btn, .l-header__nav-cta { display: none; }
/* 事業紹介の4事業。PC は「事業紹介」にマウスを乗せると、ヘッダーの下に箱で出す。
   背景はヘッダーのグラデのこの位置の色（x844〜1194 を左から右へ）、文字は白・14.4px（1vw）、行46px（2026-10-24 の Slack の指示） */
.l-header__sub {
  position: absolute; top: 3.889vw; left: -8.056vw; z-index: 1;
  width: 24.306vw; background: linear-gradient(90deg, #3892a5, #0e77a4 33%, #016ca8 67%, #056eb1);
  opacity: 0; visibility: hidden; transform: translateY(-0.694vw);
  transition: opacity .3s, visibility .3s, transform .3s cubic-bezier(.22, 1, .36, 1);
}
/* 項目と箱のすき間（19px）でマウスが外れないように */
.l-header__sub::before { content: ""; position: absolute; inset: -1.319vw 0 auto; height: 1.319vw; }
.l-header__item:hover .l-header__sub, .l-header__item:focus-within .l-header__sub { opacity: 1; visibility: visible; transform: none; }
.l-header__sub li + li { border-top: 1px solid rgba(255, 255, 255, .25); }
.l-header__sub a { display: flex; align-items: center; justify-content: space-between; height: 3.194vw; padding: 0 1.111vw 0 1.389vw; color: #fff; font-size: 1vw; font-weight: 500; line-height: 1.5; }
/* マウスを乗せたらグローバルナビと同じく、文字がほんのり光る */
.l-header__sub a:hover { opacity: 1; text-shadow: 0 0 6px rgba(255, 255, 255, .7); }
.l-header__cta {
  flex-shrink: 0; width: 9.792vw; height: 5.556vw; padding: 1.667vw 0 0 2.847vw;
  border-bottom-left-radius: 1.667vw; background: #fff;
}

/* ---------- Footer ---------- */
.l-footer { position: relative; z-index: 1; padding: 7.569vw 0 8.889vw; background: var(--color-green-dark); color: #fff; }
.l-footer__brand { text-align: center; }
.l-footer__brand img { width: 13.889vw; margin-inline: auto; }
.l-footer__brand p { margin: 1.667vw -.2em 0 0; font-size: 1.111vw; font-weight: 700; line-height: 1; letter-spacing: .2em; }
.l-footer .c-banner-wide { margin-top: 4.653vw; }
.l-footer__business { display: grid; grid-template-columns: 38.889vw 38.889vw; gap: 2.778vw; margin-top: 5.556vw; }
.l-footer__heading { display: flex; align-items: baseline; gap: 1.319vw; margin: 0.243vw 0 0 -0.556vw; font-family: var(--font-en); font-size: 2.778vw; line-height: 1; }
.l-footer__heading span { position: relative; top: 0.208vw; font-family: var(--font-ja); font-size: 1.389vw; font-weight: 700; letter-spacing: .2em; }
.l-footer .l-grid--3 { margin-top: 5.556vw; }
.l-footer__rule { width: 66.667vw; margin: 4.931vw 0 0 5.417vw; border: 0; border-top: 1px solid #fff; }
.l-footer .c-bnr-list { margin-top: 4.097vw; }
.l-footer .c-pagetop { bottom: 1.389vw; }

/* トップ用：グレー帯に外部バナーだけ */
.l-footer--simple { height: 15.625vw; padding: 5.208vw 0 0; }
.l-footer--simple .c-bnr-list { margin-top: 0; }
.l-footer--simple .c-pagetop { top: 13.542vw; bottom: auto; }

.l-copyright { display: flex; align-items: center; justify-content: center; gap: 2.778vw; height: 5.833vw; font-family: var(--font-helvetica); font-size: 0.694vw; line-height: 1; text-align: center; background: #fff; }
/* ポリシーへの導線（デザインにないので、コピーライトの左に同じ大きさで置く） */
.l-copyright__link { font-family: var(--font-ja); text-decoration: underline; text-underline-offset: .3em; }
.l-copyright--green { padding-right: 2.014vw; background: var(--color-green-dark); color: #fff; }

/* ==========================================================================
   Components: 見出し・テキスト
   ========================================================================== */
.c-heading-en { font-family: var(--font-en); font-size: 2.778vw; line-height: 1; }

.c-lead { font-size: 3.611vw; font-weight: 300; line-height: 5.556vw; letter-spacing: .06em; }

.c-text { font-size: 1.111vw; line-height: 2.222vw; letter-spacing: .06em; }
.c-text--intro { min-height: 8.889vw; margin: 4.167vw 0 0 1px; } /* XD は行数（3〜4行）にかかわらず次の段が同じ位置なので、4行分の高さを取る */
.c-text--plain { letter-spacing: 0; }

/* 縦書きの見出し（主な業務内容・サービス一覧・Q&A） */
.c-side-label {
  justify-self: start; margin-top: 0.139vw;
  writing-mode: vertical-rl;
  font-size: 1.667vw; font-weight: 700; line-height: 1.944vw; letter-spacing: 0.278vw;
}
.c-side-label--upright { text-orientation: upright; font-family: var(--font-helvetica); }

/* teal の短い線＋teal 見出し＋下線 */
.c-heading-bar {
  width: 30.556vw; padding-bottom: 0.764vw; border-bottom: 1px solid var(--color-line);
  color: var(--theme); font-size: 2.222vw; line-height: 3.889vw; letter-spacing: .06em; white-space: nowrap;
}
.c-heading-bar::before { content: ""; display: block; width: 4.167vw; height: 0.278vw; margin-bottom: 1.597vw; background: var(--theme); }

/* 事業色を行ごとに敷いた白文字キャッチ。画面に入ったら、行ごとに 帯 → 文字 の順で左から右へ出す */
.c-marker-copy { display: flex; flex-direction: column; align-items: flex-start; }
.c-marker-copy > span {
  position: relative; display: block; height: 4.722vw; padding: 0 0.694vw 0.139vw 0.833vw; isolation: isolate;
  color: #fff; font-size: 2.778vw; font-weight: 300; line-height: 4.861vw; letter-spacing: .06em;
  --delay: 0s;
}
.c-marker-copy > span::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--theme); transform-origin: left; }
.c-marker-copy__text { display: block; }
.c-marker-copy > span:nth-child(2) { margin-top: 0.556vw; --delay: .25s; }
.c-marker-copy > span:nth-child(3) { margin-top: 0.764vw; --delay: .5s; }
@media (prefers-reduced-motion: no-preference) {
  .c-marker-copy > span::before { animation: marker-bg .7s cubic-bezier(.65, 0, .35, 1) var(--delay) both paused; }
  .c-marker-copy__text { animation: marker-text .7s cubic-bezier(.33, 1, .68, 1) calc(var(--delay) + .45s) both paused; }
  .c-marker-copy.is-inview > span::before, .c-marker-copy.is-inview .c-marker-copy__text { animation-play-state: running; }
}
@keyframes marker-bg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes marker-text { from { clip-path: inset(0 100% 0 0); transform: translateX(var(--marker-shift, -1.111vw)); } to { clip-path: inset(0); transform: none; } }

/* ==========================================================================
   Components: アイコン・リンク・ボタン
   ========================================================================== */
/* 丸矢印。標準は40px・白80%＋背景ぼかし・黒線 */
.c-icon-arrow {
  position: relative; display: inline-block; flex-shrink: 0;
  width: 2.778vw; height: 2.778vw;
  border: 1px solid currentColor; border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(2.083vw); backdrop-filter: blur(2.083vw);
  color: #000;
  --glyph: var(--glyph-arrow-40);
}
.c-icon-arrow::before {
  content: ""; position: absolute; inset: -1px;
  background: currentColor;
  -webkit-mask: var(--glyph) center / 100% 100% no-repeat;
          mask: var(--glyph) center / 100% 100% no-repeat;
}
.c-icon-arrow--s { width: 1.667vw; height: 1.667vw; --glyph: var(--glyph-arrow-24); }
.c-icon-arrow--line { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: inherit; }
.c-icon-arrow--solid { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; color: inherit; }
.c-icon-arrow--external { --glyph: var(--glyph-external-40); }
.c-icon-arrow--down { --glyph: var(--glyph-down-24); }
.c-icon-arrow--back { --glyph: var(--glyph-back-24); }

.c-icon-external { display: inline-block; width: 1.25vw; height: 1.25vw; background: currentColor; -webkit-mask: var(--glyph-window-18) center / 100% 100% no-repeat; mask: var(--glyph-window-18) center / 100% 100% no-repeat; }

.c-link-arrow { display: inline-flex; align-items: center; gap: 2.292vw; font-family: var(--font-en); font-size: 2.778vw; line-height: 1; }
.c-link-arrow--s { gap: 1.944vw; font-family: var(--font-ja); font-size: 1.25vw; font-weight: 500; letter-spacing: .1em; }

.c-link-external { color: var(--theme); font-size: 1.111vw; line-height: 2.222vw; letter-spacing: .06em; }
.c-link-external::after {
  content: ""; display: inline-block; width: 0.833vw; height: 0.833vw; margin-left: 0.833vw; vertical-align: 0.139vw;
  background: currentColor;
  -webkit-mask: var(--glyph-external-12) center / 100% 100% no-repeat;
          mask: var(--glyph-external-12) center / 100% 100% no-repeat;
}

/* 白い角丸ボタン（右端に丸矢印） */
.c-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 22.222vw; height: 4.167vw; padding-right: 1.389vw;
  border-radius: 0.833vw; background: #fff; color: var(--color-text);
  font-size: 1.111vw; font-weight: 500; line-height: 2.222vw;
}
.c-btn .c-icon-arrow { position: absolute; top: 1.25vw; right: 1.111vw; border-color: #fff; color: var(--color-teal); }
/* グラデのボタン（404 の「TOPへ戻る」）。左に白い丸矢印。背景は XD どおりグラデ画像を左-204・上-49、614×370 で敷く */
.c-btn--gradient {
  overflow: hidden; padding-right: 0;
  background: var(--bg-gradient-01) -14.167vw -3.403vw / 42.639vw 25.694vw no-repeat; color: #fff;
}
.c-btn--gradient .c-icon-arrow { top: 1.25vw; right: auto; left: 1.111vw; }
.c-btn--outline {
  gap: 2.222vw; width: 11.111vw; padding: 0 0 0 1.111vw; border: 1px solid #000; border-radius: 0.556vw; background: none;
  font-family: var(--font-en); font-size: 0.833vw; font-weight: 400; letter-spacing: .2em;
}

/* 丸いTOPボタン */
.c-pagetop {
  position: absolute; right: 2.708vw; z-index: 2;
  width: 4.167vw; height: 4.167vw; padding-top: 2.153vw;
  border: 1px solid #000; border-radius: 50%;
  background: #fff; color: #000;
  font-family: var(--font-helvetica); font-size: 0.972vw; font-weight: 700; line-height: 1; text-align: center;
}
.c-pagetop::before {
  content: ""; position: absolute; inset: -1px; background: currentColor;
  -webkit-mask: var(--glyph-up-60) center / 100% 100% no-repeat;
          mask: var(--glyph-up-60) center / 100% 100% no-repeat;
}

/* 右端に固定する縦長のお問い合わせタブ */
.c-side-cta {
  position: fixed; top: 22.222vw; right: 0; z-index: 90;
  width: 5.903vw; height: 23.472vw;
  border-radius: 0.833vw 0 0 0.833vw;
  background: var(--bg-gradient-01) -35.625vw -12.292vw / 64.792vw 39.028vw no-repeat;
  color: #fff;
}
.c-side-cta__text { position: absolute; top: 2.222vw; left: 2.361vw; writing-mode: vertical-rl; font-size: 1.25vw; font-weight: 700; line-height: 1; letter-spacing: 0.139vw; }
.c-side-cta .c-icon-arrow { position: absolute; top: 19.306vw; left: 2.153vw; border-color: #fff; color: var(--color-teal); }

/* ==========================================================================
   Components: カード・パネル
   ========================================================================== */
/* 写真カード（事業4枚）。左上の色タグは --card-grad */
.c-card-photo { position: relative; display: block; height: 25vw; overflow: hidden; border-radius: 0.833vw; color: #fff; }
.c-card-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-card-photo::before { content: ""; position: absolute; inset: 0; background: var(--color-navy-overlay); }
.c-card-photo::after { content: ""; position: absolute; top: 0; left: 0; width: 1.389vw; height: 2.083vw; border-radius: 0.833vw 0 0.833vw 0; background: var(--card-grad); }
.c-card-photo__title { position: absolute; left: 1.389vw; bottom: 1.181vw; font-size: 1.389vw; font-weight: 500; line-height: 2.5vw; }
.c-card-photo .c-icon-arrow { position: absolute; right: 1.389vw; bottom: 1.389vw; }

/* 色グラデのタイル（事業4つ） */
.c-card-tile {
  display: flex; flex-direction: column; align-items: center;
  width: 15.556vw; height: 11.181vw; padding-bottom: 0.972vw;
  border-radius: 0.833vw; background: var(--card-grad); color: #fff;
  font-size: 1.25vw; font-weight: 500; line-height: 2.222vw; text-align: center;
}
.c-card-tile > span:first-child { display: flex; flex: 1; align-items: center; }
.c-card-tile .c-icon-arrow { color: var(--card-color); }

.c-card--campus   { --card-grad: var(--grad-campus); --card-color: #1a9091; }
.c-card--food     { --card-grad: var(--grad-food); --card-color: #de908a; }
.c-card--facility { --card-grad: var(--grad-facility); --card-color: #387cac; }
.c-card--cafe     { --card-grad: var(--grad-cafe); --card-color: #c9a156; }

/* 全幅の写真バナー（100年の歩み）。写真・色調・「100 YEAS of IVYCS」・縦書きまで入った完成画像（PC 2320×560／SP 716×560、デザイナー支給）を <picture> で切り替える */
.c-banner-wide { position: relative; display: block; height: 19.444vw; overflow: hidden; border-radius: 0.833vw; }
.c-banner-wide > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* マウスを乗せたときだけ白をうっすら重ねる（明るい画像なので、暗くせずに明るくする） */
.c-banner-wide::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(21, 53, 90, 0); }
.c-banner-wide .c-icon-arrow { position: absolute; right: 1.389vw; bottom: 1.389vw; z-index: 2; }

/* リンクカード（About Us・Company / 採用情報）。トップは2枚、フッターは3枚並び */
.c-card-half { position: relative; display: block; height: 13.889vw; overflow: hidden; border-radius: 0.833vw; }
.c-card-half > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-card-half--photo { display: flex; flex-direction: column; align-items: center; padding-top: 3.611vw; color: #fff; }
.c-card-half--photo::before { content: ""; position: absolute; inset: 0; background: var(--color-navy-overlay); }
.c-card-half__en, .c-card-half__ja { position: relative; line-height: 1; }
.c-card-half__en { font-family: var(--font-en); font-size: 2.778vw; }
.c-card-half__ja { margin: 1.667vw -.2em 0 0; font-size: 1.389vw; font-weight: 500; letter-spacing: .2em; }
.c-card-half .c-icon-arrow { position: absolute; right: 1.389vw; bottom: 1.389vw; }
/* About Us は写真を大きめに置いて左上を切り出す（497×331 を -65, -119 に） */
.c-card-half--about > img { inset: auto; top: -59.5%; left: -17.76%; width: 135.8%; height: auto; max-width: none; aspect-ratio: 497 / 331; }
.c-card-half--recruit .c-icon-arrow { z-index: 1; }
/* 採用情報はロゴ・文字まで入った完成バナー（PC 1120×400／SP 716×240、デザイナー支給）を <picture> で切り替える。3枚並びで横が足りないときもロゴ側を残す */
.c-card-half--recruit > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.c-card-half--recruit:hover > picture img { transform: scale(1.08); }
/* 会社写真は人物の手元が入るよう少し上寄りで切る */
.c-card-half--photo > img[src*="company"], .c-page-hero--photo .c-page-hero__bg img { object-position: 50% 35%; }

/* 白い角丸の箱 */
.c-panel {
  position: relative; border-radius: 0.833vw;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(2.083vw); backdrop-filter: blur(2.083vw);
  padding: 6.944vw 5.556vw;
}
.c-panel + .c-panel { margin-top: 2.778vw; }
.c-panel--news { padding: 3.889vw 6.944vw 4.514vw; border-radius: 1.389vw; background: rgba(255, 255, 255, .97); }
.c-panel__title { margin-left: -1px; font-family: var(--font-en); font-size: 1.667vw; line-height: 1; }
.c-panel__label { margin-top: -1px; font-size: 1.389vw; font-weight: 700; line-height: 2.222vw; }
.c-panel__rule { width: 69.375vw; margin: 3.611vw 0 4.028vw 1px; border: 0; border-top: 1px solid var(--color-teal); }

/* お知らせ */
.c-news-list { margin-top: 0.694vw; }
.c-news-list a { display: flex; align-items: center; height: 5.208vw; padding-top: 0.417vw; border-bottom: 1px solid #707070; }
.c-news-list time { width: 6.944vw; font-family: var(--font-helvetica); font-size: 1.111vw; font-weight: 700; line-height: 1; }
.c-news-list__title { flex: 1; font-size: 1.111vw; line-height: 1; letter-spacing: .1em; }
.c-news-list__more { display: flex; justify-content: flex-end; margin-top: 2.639vw; }

/* 縦長の写真を4枚並べた帯（フッター） */
.c-photo-strip { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); height: 23.889vw; overflow: hidden; border-radius: 0.833vw; }
.c-photo-strip::after { content: ""; position: absolute; inset: 0; background: var(--color-navy-overlay); }
.c-photo-strip img { width: 100%; height: 100%; object-fit: cover; }

/* 事業リンクの一覧（フッター） */
.c-link-list { margin-top: 1.146vw; }
.c-link-list a {
  display: flex; align-items: flex-end; justify-content: space-between;
  height: 4.931vw; padding: 0 1.458vw 0.972vw 1.389vw; border-bottom: 1px solid #fff;
  font-size: 1.25vw; font-weight: 500; line-height: 2.222vw;
}
.c-link-list .c-icon-arrow { margin-bottom: 1px; color: #fff; }

/* 外部バナー（デザインどおり中心から20px左に寄せる） */
/* 外部サイトへのボタン3つ。白い 1px 線の枠を横に並べ、区切りは隣り合う枠の線を重ねて 1 本に見せる */
.c-bnr-list { display: flex; width: 50vw; margin: 0 auto; }
.c-bnr-list li { flex: 1; }
.c-bnr-list li + li { margin-left: -1px; }
.c-bnr-list a { position: relative; display: flex; align-items: center; justify-content: center; height: 9.722vw; border: 1px solid #fff; font-size: 1.25vw; font-weight: 700; line-height: 1.944vw; letter-spacing: .06em; text-align: center; color: #fff; }
.c-bnr-list li:first-child a { border-radius: 0.833vw 0 0 0.833vw; }
.c-bnr-list li:last-child a { border-radius: 0 0.833vw 0.833vw 0; }
.c-bnr-list .c-icon-external { position: absolute; right: 1.528vw; bottom: 1.528vw; width: 1.25vw; height: 1.25vw; }

/* ==========================================================================
   Components: トップ
   ========================================================================== */
/* MV と、その上に重なる白いシートをまとめる。背景はグラデ画像 */
.c-hero-wrap { position: relative; padding-top: 2.083vw; isolation: isolate; }
.c-hero-wrap::before {
  content: ""; position: absolute; z-index: -1;
  top: -7.292vw; left: -5.97%; width: 113.54%; aspect-ratio: 1635 / 985;
  background: var(--bg-gradient-01) center / cover;
}
/* 開いた直後だけ出る大きなロゴ */
.c-hero-wrap__logo { position: absolute; top: 3.958vw; left: calc(50% - 19.722vw); z-index: 1; width: 39.306vw; pointer-events: none; }

.c-hero {
  /* 画面の高さ − ヘッダー80 − 上30 − 下20。1440×810 でデザインの 680px になる */
  position: sticky; top: calc(var(--header-h) + 2.083vw);
  height: clamp(33.333vw, calc(100svh - 9.028vw), 62.5vw);
  margin-inline: 2.778vw; overflow: hidden; border-radius: 1.667vw; color: #fff;
}
/* 次の写真を前の写真の上にゆっくり重ねる。前の写真は消さずに下に残すので、途中で暗くならない */
/* 写真の重なり順はこの中だけで完結させ、ロゴ・キャプション・進行バーより上に出ないようにする */
.c-hero__slides { position: absolute; inset: 0; z-index: 0; }
.c-hero__slides li { position: absolute; inset: 0; opacity: 0; transition: opacity 2.4s cubic-bezier(.37, 0, .63, 1); }
.c-hero__slides li.is-prev { z-index: 1; opacity: 1; transition: none; }
.c-hero__slides li.is-active { z-index: 2; opacity: 1; }
.c-hero__slides img { width: 100%; height: 100%; object-fit: cover; }
.c-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(205.6deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); }
.c-hero__body { position: absolute; left: 4.167vw; bottom: 3.958vw; z-index: 1; }
.c-hero__logo { width: 27.847vw; }
.c-hero__caption { margin-top: 2.014vw; font-family: var(--font-en); font-size: 1.111vw; line-height: 1; }
.c-hero__dots { display: flex; align-items: center; gap: 0.278vw; margin-top: 1.736vw; }
.c-hero__dots span { position: relative; width: 2.778vw; height: 0.139vw; overflow: hidden; background: rgba(255, 255, 255, .4); transition: height .3s; }
.c-hero__dots span::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.c-hero__dots span.is-active { height: 0.278vw; }
/* 表示中の写真の残り時間を、左から右へ伸びる白で見せる。伸びきったら main.js が次の写真へ送る */
.c-hero__dots span.is-active::after { animation: hero-progress var(--hero-interval, 5s) linear both; }
/* 最初の1枚だけ、開幕アニメーション（3秒）が終わってから伸ばし始める（開幕を一旦止めているので無効） */
/* .c-hero:not(.is-looped) .c-hero__dots span:first-child::after { animation-delay: 3s; } */
@media (prefers-reduced-motion: reduce) { .c-hero__dots span.is-active::after { animation: none; transform: none; } }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 開幕：大ロゴ＋帯状の写真（top_1）→ ロゴが上に抜けて写真が広がる（top_2）→ 文字が出る（top_4）
   一旦止めている。戻すときは、このコメントと上の animation-delay のコメント、src/index.html の大ロゴのコメントを外す
@media (prefers-reduced-motion: no-preference) {
  .c-hero-wrap__logo { animation: hero-logo 2.2s ease-in-out both; }
  .c-hero { animation: hero-open 2.2s ease-in-out both; }
  .c-hero::after, .c-hero__body { animation: fade-in .8s ease 2.2s both; }
}
*/
@media (prefers-reduced-motion: reduce) { .c-hero-wrap__logo { display: none; } }
@keyframes hero-logo { 0%, 40% { transform: none; opacity: 1; } 100% { transform: translateY(var(--intro-logo-y, -16.042vw)); opacity: 0; } }
@keyframes hero-open { 0%, 40% { clip-path: inset(var(--intro-clip, 15.417vw 0 1.319vw 0) round var(--hero-radius, 1.667vw)); } 100% { clip-path: inset(0 round var(--hero-radius, 1.667vw)); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* MV に重なる角丸のシート（デザインは不透明度97%だが、下に止めたMVが透けるので100%にしている） */
.l-sheet { position: relative; z-index: 2; margin-top: 2.778vw; padding: 8.819vw 0 4.375vw; overflow: hidden; border-radius: 2.778vw 2.778vw 0 0; isolation: isolate; }
.l-sheet::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; left: -11.94%; width: 123.89%; height: 100%;
  background: var(--bg-gradient-02) center / cover;
}
.l-sheet__mark { position: absolute; top: 6.736vw; left: calc(50% + 17.708vw); width: 35.347vw; }

.c-intro .c-lead { margin-left: 7.083vw; }
.c-intro__text { margin: 4.931vw 0 0 36.458vw; font-size: 1.25vw; line-height: 2.778vw; letter-spacing: .12em; }
.c-intro__more { display: flex; justify-content: flex-end; margin-top: 4.951vw; padding-right: 6.944vw; }
.c-intro__more .c-link-arrow { align-items: flex-start; }
.c-intro__more .c-icon-arrow { margin-top: 1.5px; }

.c-business { margin-top: 9.132vw; }
.c-business .l-grid { margin-top: 2.951vw; }
.c-rule { margin: 2.847vw 0 2.778vw; border: 0; border-top: 1px solid #000; }

/* ==========================================================================
   Components: 下層
   ========================================================================== */
/* 事業ページのタイトル。背景はグラデ画像（左端を白でぼかす） */
.c-page-title { position: relative; height: 16.667vw; isolation: isolate; }
.c-page-title__bg { position: absolute; inset: 0 0 auto; z-index: -1; height: 25.764vw; overflow: hidden; }
/* 背景は、XD の見出し背景（画像の重ね・白のぼかし・切り抜き）を幅1440×高さ371で1枚に書き出した画像（高解像度画面向けに2倍） */
.c-page-title__bg::before { content: ""; position: absolute; inset: 0; background: var(--title-bg) 0 0 / 100% 100% no-repeat; }
.c-page-title--campus { --title-bg: url(../img/bg/title-campus.webp?v=5de51f34); }
.c-page-title--food { --title-bg: url(../img/bg/title-food.webp?v=04d67aeb); }
.c-page-title--facility { --title-bg: url(../img/bg/title-facility.webp?v=aff52782); }
.c-page-title--cafe { --title-bg: url(../img/bg/title-cafe.webp?v=1bc3e75c); }
.c-page-title__inner { display: flex; justify-content: space-between; padding: 5.347vw 2.778vw 0; }
.c-page-title__label { display: block; font-family: var(--font-en); font-size: 1.389vw; font-weight: 700; line-height: 1; }
.c-page-title__en { display: block; margin-top: 0.451vw; font-family: var(--font-en); font-size: 4.167vw; font-weight: 400; line-height: 5vw; }
.c-page-title__ja {
  align-self: flex-start; margin-top: 2.986vw; padding-left: 2.778vw;
  border-left: 1px solid rgba(0, 0, 0, .3);
  font-family: var(--font-serif); font-size: 1.389vw; line-height: 2.014vw; letter-spacing: .12em;
}
/* 和文が3行のとき（ファシリティ）は、下端をそろえるため1行分上から始める */
.c-page-title__ja--3lines { margin-top: 1.042vw; }

/* キービジュアル＋重なるキャッチ */
.c-key-visual { position: relative; height: 28.681vw; }
.c-key-visual__image { width: 73.611vw; height: 26.389vw; margin-left: 6.944vw; border-radius: 0.833vw; object-fit: cover; }
.c-key-visual .c-marker-copy { position: absolute; top: 13.194vw; left: -6.944vw; }
.c-key-visual picture { display: contents; }

/* 文章＋写真の段 */
.c-media { display: grid; grid-template-columns: 30.556vw 38.889vw; gap: 4.167vw; align-items: start; }
.c-media:not(:last-of-type) { height: 22.222vw; }
/* 次の段まで 430px 空く段（ファシリティ・カフェの1段目。デザインどおり） */
.c-media:not(:last-of-type).c-media--long { height: 24.306vw; }
.c-media--text:not(:last-of-type) { height: auto; }
.c-media + .c-media { margin-top: 5.556vw; }
.c-media__sub { margin-top: 1.458vw; font-size: 1.389vw; font-weight: 500; line-height: 2.222vw; letter-spacing: .06em; }
.c-media__body .c-text { width: 30.486vw; margin-top: 1.25vw; }
.c-media__image img { width: 38.889vw; height: 22.222vw; object-fit: cover; }
.c-media__image--pair { position: relative; height: 22.222vw; }
.c-media__image--pair img:first-child { position: absolute; top: 0; left: 0.694vw; width: 35.625vw; height: 19.861vw; }
.c-media__image--pair img:last-child { position: absolute; top: 14.306vw; left: 23.889vw; width: 15vw; height: 7.917vw; }
.c-media-note { margin-top: 2.917vw; }
/* 小見出しがないときは、下線のすぐ下に本文 */
.c-media__body .c-heading-bar + .c-text { margin-top: 1.083vw; }
/* 写真のない段：見出しの下線と本文を内容幅いっぱいに */
.c-media--text { grid-template-columns: 1fr; }
.c-media--text .c-heading-bar { width: auto; }
.c-media--text .c-media__body .c-text { width: auto; }
.c-media--text + .c-media--text { margin-top: 5vw; }
.c-media--text + .c-media-note { margin-top: 5.208vw; }
/* 写真2枚の重ね（左右逆）：大きい写真が右上、小さい写真が左下で前 */
.c-media__image--pair-reverse { position: relative; height: 22.222vw; }
.c-media__image--pair-reverse img { position: absolute; }
.c-media__image--pair-reverse picture img { top: 0; left: 3.403vw; width: 35.486vw; height: 19.931vw; }
.c-media__image--pair-reverse > img { top: 12.153vw; left: 0; width: 17.917vw; height: 10.069vw; }

/* 事業色グラデの帯（実績一覧）。左は画面端まで、右は内容幅の端まで */
.c-panel-gradient { position: relative; z-index: 2; height: 19.306vw; margin-top: 9.167vw; padding-top: 1.91vw; color: #fff; }
.c-panel-gradient::before { content: ""; position: absolute; inset: 0 calc(50% - 40.278vw) 0 0; z-index: -1; border-radius: 0 0.833vw 0.833vw 0; background: var(--theme-grad); }
.c-panel-gradient__title { font-size: 1.667vw; font-weight: 700; line-height: 4.167vw; }
.c-panel-gradient__title small { margin-left: 0.278vw; font-size: 1.111vw; }
.c-panel-gradient__cols { display: grid; grid-template-columns: 26.458vw 25.069vw 1fr; margin-top: 0.938vw; font-size: 1.111vw; line-height: 2.083vw; letter-spacing: .06em; }
.c-panel-gradient__cols--row { display: flex; flex-wrap: wrap; column-gap: 2em; }

/* サービス一覧 */
.c-service-list { width: 66.667vw; padding-top: 2.465vw; border-top: 1.5px solid var(--color-line); font-size: 1.111vw; line-height: 2.083vw; letter-spacing: .06em; }
.c-service-list--bold { font-weight: 700; }
.c-service-list dd { padding-left: 1.06em; }

/* よくある質問 */
.c-faq__heading { margin-top: -0.764vw; font-size: 1.389vw; font-weight: 700; line-height: 4.167vw; letter-spacing: .06em; }
.c-faq { width: 66.667vw; margin-top: -0.694vw; }
.c-faq__item { border-bottom: 1.5px solid var(--color-line); }
.c-faq__q { display: flex; align-items: center; width: 100%; padding: 2.014vw 1.528vw 1.076vw 0; text-align: left; }
.c-faq__num { width: 4.097vw; color: var(--theme); font-family: var(--font-helvetica); font-size: 1.667vw; font-weight: 700; line-height: 2.222vw; }
.c-faq__text { flex: 1; font-size: 1.25vw; font-weight: 500; line-height: 1.944vw; letter-spacing: .06em; }
.c-faq__icon { position: relative; width: 1.667vw; height: 1.111vw; }
.c-faq__icon::before, .c-faq__icon::after { content: ""; position: absolute; background: var(--theme); transition: transform .2s; }
.c-faq__icon::before { top: 0.521vw; left: 0; width: 1.667vw; height: 1px; }
.c-faq__icon::after { top: 0; left: 0.799vw; width: 1px; height: 1.111vw; }
.c-faq__item.is-open .c-faq__icon::after { transform: scaleY(0); }
.c-faq__a { display: none; padding: 0.208vw 1.528vw 2.569vw 4.097vw; } /* 1021 版：回答は 16px・行28px、下の線まで 38px */
.c-faq__a .c-text { line-height: 1.944vw; }
.c-faq__item.is-open .c-faq__a { display: block; }

/* お問い合わせ帯 */
.c-contact {
  position: relative; z-index: 2;
  height: 22.014vw; margin: 9.722vw 0 -10.278vw; padding-top: 3.299vw;
  border-radius: 0.833vw; overflow: hidden; isolation: isolate;
  color: #fff; text-align: center;
}
/* 背景のグラデ（XD の配置：左 -328px・上 -33px、1532×923）。浮かせるために別の層にしている */
.c-contact::before { content: ""; position: absolute; top: -2.292vw; left: -22.778vw; z-index: -1; width: 106.389vw; height: 64.097vw; background: var(--bg-gradient-01) 0 0 / 100% 100% no-repeat; }
.c-contact__title { font-size: 1.667vw; font-weight: 700; line-height: 4.167vw; }
.c-contact .c-btn { margin-top: 1.632vw; }
.c-contact__tel { margin-top: 1.319vw; color: var(--color-gray-bg); font-size: 1.111vw; line-height: 1.944vw; letter-spacing: .06em; white-space: pre; }
.c-contact__tel strong { font-size: 1.25vw; font-weight: 700; }

/* 4事業の紹介（ぼかした写真の上） */
.c-business-nav { position: relative; z-index: 0; padding: 18.542vw 0 9.444vw; overflow: hidden; isolation: isolate; }
.c-business-nav::before {
  content: ""; position: absolute; z-index: -1; inset: 2.083vw 0 0;
  background: url(../img/photo/mv-04.webp?v=0747aa77) center / cover;
  filter: blur(2.639vw); opacity: .5;
}
.c-business-nav .l-container > * { margin-left: 6.944vw; }
.c-business-nav__title { font-size: 2.778vw; font-weight: 500; line-height: 4.167vw; letter-spacing: .06em; }
.c-business-nav .c-text { width: 66.667vw; margin-top: 1.278vw; }
.c-business-nav__list { display: flex; justify-content: space-between; width: 66.667vw; margin-top: 2.222vw; }

/* 写真全面の下層タイトル（About Us） */
.c-page-hero { position: relative; z-index: 1; height: 80.556vw; color: #fff; isolation: isolate; }
.c-page-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #000; }
.c-page-hero__bg img { position: absolute; top: 0; left: -28.54%; width: 128.54%; max-width: none; opacity: .4; }
.c-page-hero__bg::after { content: ""; position: absolute; top: -1.528vw; left: calc(50% + 7.778vw); width: 54.653vw; height: 39.931vw; background: url(../img/shape/about-ribbon.svg?v=1cbb0502) no-repeat; background-size: 100% 100%; opacity: .42; }
.c-page-hero__title { padding-top: 6.111vw; font-family: var(--font-en); font-size: 4.167vw; line-height: 5vw; text-align: right; }
.c-page-hero__title span { display: block; margin: 1.5vw -.2em 0 0; font-family: var(--font-ja); font-size: 1.389vw; font-weight: 500; line-height: 1; letter-spacing: .2em; }
.c-page-hero__lead { margin-top: 2.125vw; font-size: 2.222vw; font-weight: 300; line-height: 5vw; letter-spacing: .16em; }
.c-page-hero__text { width: 63.889vw; margin-top: 2.958vw; font-size: 1.111vw; line-height: 2.5vw; }

/* 会社について：写真＋紺の膜の低いタイトル */
.c-page-hero--photo { height: 27.778vw; }
.c-page-hero--photo .c-page-hero__bg img { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.c-page-hero--photo .c-page-hero__bg::after { inset: 0; width: auto; height: auto; background: var(--color-navy-overlay); opacity: 1; }

/* 黒地にグラデを重ねた箱（Mission / Vision） */
.c-panel-dark { position: absolute; top: 56.458vw; left: 19.028vw; width: 61.528vw; height: 33.056vw; padding: 5.278vw 0 0 5.486vw; overflow: hidden; border-radius: 0.833vw; background: #000; isolation: isolate; }
.c-panel-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-gradient-01) -6.528vw -7.917vw / 74.514vw 44.861vw no-repeat; opacity: .75; }
.c-label-row { display: grid; grid-template-columns: 13.889vw 1fr; }
.c-label-row + .c-label-row { margin-top: 3.333vw; }
.c-label-row__label { position: relative; display: flex; align-items: center; padding-left: 1.667vw; font-family: var(--font-en); font-size: 2.778vw; line-height: 5vw; }
.c-label-row__label::before { content: ""; position: absolute; inset: 0.278vw auto 0.278vw 0; width: 1px; background: #fff; }
.c-label-row p { font-size: 1.111vw; line-height: 2.222vw; }

/* 項目＋内容の表 */
.c-dl-table { position: relative; margin-top: 0.139vw; }
.c-dl-table dl > div { display: grid; grid-template-columns: 10.833vw 1fr; padding: 0.903vw 0 0.833vw; border-bottom: 1px solid rgba(0, 0, 0, .1); font-size: 1.111vw; line-height: 1.806vw; }
.c-dl-table dl > div:first-child { padding-top: 0; }
.c-dl-table dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.c-dl-table dt { font-weight: 700; }
.c-dl-table__figure { position: absolute; top: 16.181vw; right: 0; width: 18.125vw; height: 12.708vw; overflow: hidden; }
.c-dl-table__figure img { width: 23.056vw; max-width: none; height: 15.417vw; margin: -2.778vw 0 0 -4.931vw; object-fit: cover; }

/* 地図・アクセス */
.c-map { height: 27.778vw; margin-top: 0.139vw; }
.c-map img { width: 100%; height: 100%; object-fit: cover; }
.c-access { display: grid; grid-template-columns: 1fr auto; align-items: start; margin-top: 2.014vw; font-size: 1.111vw; line-height: 1.806vw; }
.c-access__route { grid-column: 1; margin-top: 1.806vw; }
.c-access .c-btn { grid-row: 1 / 3; grid-column: 2; margin-top: 1px; }

/* ---------- News・ポリシー ---------- */
/* 下層の本文エリア。News 一覧は白地にグラデ（XD の背景を書き出した画像）、ポリシーはグレー地に曲線2つ */
.l-page-body { position: relative; isolation: isolate; padding: 6.097vw 0 0; }
/* 一覧の件数が少ないとき（いまは5件）に下が空かないよう、高さは決めずに一覧の下を140px空ける（XD は12件＋ページ送りで高さ1389px） */
.l-page-body--news { padding-bottom: 9.722vw; overflow: hidden; background: #fff; }
/* 背景のグラデは浮かせるために別の層（XD から書き出した 1440×1389 の画像） */
.l-page-body--news::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 96.458vw; background: url(../img/bg/news-list.webp?v=02702fdf) 0 0 / 100% 100% no-repeat; }
.l-page-body--policy { padding-bottom: 9.542vw; overflow: hidden; background: var(--color-gray-bg); }
.l-page-body--policy::before, .l-page-body--policy::after { content: ""; position: absolute; z-index: -1; width: 54.375vw; height: 48.889vw; background: center / 100% 100% no-repeat; }
.l-page-body--policy::before { top: 0; right: 0; background-image: url(../img/bg/policy-top.webp?v=c563faef); }
.l-page-body--policy::after { bottom: 0; left: 0; background-image: url(../img/bg/policy-bottom.webp?v=4c9e6c2e); }

/* 英字＋和文の見出し（News / Policy） */
.c-page-heading__en { display: block; font-family: var(--font-en); font-size: 4.167vw; font-weight: 400; line-height: 5vw; }
.c-page-heading__ja { display: block; margin: 1.424vw -.2em 0 0; font-size: 1.389vw; font-weight: 500; line-height: 1; letter-spacing: .2em; }

/* News 一覧ページ：一覧は内容幅の 100px 内側、幅960px。日付は Lato */
.c-news-list--page { width: 66.667vw; margin: 4.076vw 0 0 6.944vw; }
.c-news-list--page time { font-family: var(--font-en); }

/* ページ送り（デザインどおり中心から 33px 左） */
.c-pager { display: flex; align-items: center; justify-content: center; gap: 3.333vw; margin-top: 4.375vw; padding-right: 4.653vw; font-family: var(--font-en); font-size: 1.389vw; font-weight: 700; line-height: 1; }
.c-pager__list { display: flex; gap: 1.458vw; }
.c-pager__list a, .c-pager__list span { position: relative; display: block; width: 1.389vw; text-align: center; }
.c-pager__list [aria-current] { color: rgba(0, 0, 0, .3); }
.c-pager__list [aria-current]::after { content: ""; position: absolute; top: calc(100% + 0.361vw); left: 0; width: 100%; height: 0.139vw; background: #000; }
.c-pager__prev, .c-pager__next { display: block; width: 1.389vw; height: 1.389vw; background: currentColor; -webkit-mask: var(--glyph) center / 100% 100% no-repeat; mask: var(--glyph) center / 100% 100% no-repeat; }
.c-pager__prev { --glyph: var(--glyph-chevron-left); }
.c-pager__next { --glyph: var(--glyph-chevron-right); }

/* News 詳細：日付・タイトル・本文 */
.c-article { width: 66.667vw; margin-left: 6.944vw; padding: 6.549vw 0 9.444vw; }
.c-article__date { display: block; font-family: var(--font-en); font-size: 1.111vw; font-weight: 700; line-height: 1; }
.c-article__title { margin-top: 2.243vw; padding-bottom: 2.771vw; border-bottom: 1px solid #000; font-size: 2.778vw; line-height: 4.167vw; }
.c-article__body { margin-top: 3.826vw; font-size: 1.111vw; line-height: 2.222vw; }
.c-article__body a { color: var(--color-teal); text-decoration: underline; }
.c-article__body p + p { margin-top: 2.222vw; }
/* 記事の下の News 枠。背景はグラデの帯（枠の 64px 上から） */
.c-news-band { position: relative; padding: 4.444vw 0 9.722vw; overflow: hidden; background: #fff; isolation: isolate; }
.c-news-band::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 44.861vw; background: url(../img/bg/news-detail.webp?v=d6267f81) 0 0 / 100% 100% no-repeat; }

/* 404：背景は News 一覧と同じ（PC は XD も同じ重ね方。SP は全体を40%に薄めた別の画像） */
.l-page-body--error { min-height: 50.694vw; padding-top: 11.375vw; }
.c-error__title { font-family: var(--font-en); font-size: 4.167vw; font-weight: 400; line-height: 5vw; }
.c-error__lead { margin-top: 2.41vw; font-size: 1.667vw; font-weight: 500; line-height: 2.5vw; letter-spacing: .04em; }
.c-error__text { margin-top: 1.076vw; font-size: 1.111vw; line-height: 2.222vw; letter-spacing: .04em; }
.c-error__text + .c-btn { margin-top: 5.278vw; }

/* 100年の歩み（XD：IVYCS_master_100th）。
   背景（グラデ＋葉）は画面に固定し、上に重ねた白いすりガラスの板（左上がりの斜め）がスクロールでせり上がってくる。
   年代の中身は XD の座標どおりに絶対配置する。座標は HTML の style に XD の px のまま書き（--x・--y・--w。--y は年代の上端から）、--px で vw に直す */
.c-history { --px: calc(100vw / 1440); position: relative; clip-path: inset(0); }
/* 固定の背景。親の clip-path で、このページの範囲の外（フッター）には出さない */
.c-history__bg { position: fixed; inset: 0; background: url(../img/history/bg.webp?v=890530aa) 50% 0 / cover no-repeat; }
.c-history__sheet {
  position: absolute; top: 39.444vw; right: 0; bottom: 0; left: 0;
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(2.083vw); backdrop-filter: blur(2.083vw);
  clip-path: polygon(0 0, 100% 42.576vw, 100% 100%, 0 100%);
}
/* 1963〜1987 の後ろの、薄いグレーの斜めの帯 */
.c-history__sheet::after {
  content: ""; position: absolute; top: 123.736vw; left: 0; width: 100%; height: 116.681vw;
  background: rgba(245, 245, 245, .6);
  clip-path: polygon(0 0, 100% 42.583vw, 100% 73.528vw, 0 100%);
}
.c-history__fv { position: relative; height: 59.722vw; }
.c-history__logo { position: absolute; top: 8.889vw; left: 32vw; z-index: 1; width: 40.472vw; }
.c-history__label {
  position: absolute; top: 0.417vw; left: 31.16vw;
  writing-mode: vertical-rl;
  color: #a18b65; font-family: var(--font-serif); font-size: 1.667vw; font-weight: 500; line-height: 1; letter-spacing: 0.139vw;
}
.c-history__fv-photo, .c-history-era__photo {
  position: absolute; top: calc(var(--y) * var(--px)); left: calc(var(--x) * var(--px)); width: calc(var(--w) * var(--px));
  aspect-ratio: var(--w) / var(--h); object-fit: cover;
}

/* 年代：大きな年号（右か左）と金の斜線、出来事（日付・見出し・本文）、写真 */
.c-history-era { --line-y: 0; --angle: 23.3deg; position: relative; height: calc(var(--h) * var(--px)); }
.c-history-era__year {
  position: absolute; top: calc((var(--line-y) - 115.4) * var(--px)); left: 56.111vw; width: 41.667vw;
  color: #c1b274; font-family: "EB Garamond", var(--font-serif); font-size: 13.889vw; font-weight: 400; line-height: 1; text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
}
.c-history-era__line {
  position: absolute; top: calc(var(--line-y) * var(--px)); left: 56.007vw; width: 47.937vw; height: 1px;
  background: #c1b374; transform-origin: 0 0; transform: rotate(var(--angle)) scaleX(var(--draw, 1));
}
.c-history-era--left { --angle: -23.3deg; }
.c-history-era--left .c-history-era__year { top: calc((var(--line-y) - 110.4) * var(--px)); left: 2.222vw; }
.c-history-era--left .c-history-era__line { left: -3.875vw; transform-origin: 100% 0; }
.c-history-era__photos { position: absolute; inset: 0; pointer-events: none; }

.c-history-entry { position: absolute; top: calc(var(--y) * var(--px)); left: calc(var(--x) * var(--px)); width: calc(var(--w, 600) * var(--px)); }
.c-history-entry__date { position: relative; padding-left: 0.972vw; color: #c1b274; font-size: 1.25vw; font-weight: 700; line-height: 1; }
.c-history-entry__date::before {
  content: ""; position: absolute; top: 50%; left: 0; width: 0.556vw; height: 0.556vw; margin-top: -0.278vw;
  border-radius: 50%; background: #c1b274;
}
/* 見出しに白い帯は敷かない。画面に入ったら文字が左から右へ流れるように現れる（2026-10-24 の Slack で B 案に決定。動きは下の prefers-reduced-motion 内）。文字は少し太め（Medium 500。W6 相当は太すぎとのこと） */
.c-history-entry__title { margin-top: 1.597vw; color: var(--color-green-dark); font-family: var(--font-serif); font-size: 2.778vw; font-weight: 500; line-height: 1.425; white-space: nowrap; width: fit-content; }
/* ↑ マスクは見出しの箱の中にしかかからないので、箱を文字幅に合わせる（本文の幅600pxより長い見出しの末尾が切れないように） */
.c-history-entry__text { margin-top: 2.056vw; font-size: 1.111vw; line-height: 1.75; }
.c-history-entry--sub .c-history-entry__date { font-size: 0.972vw; }
.c-history-entry--sub .c-history-entry__text { margin-top: 0.91vw; font-size: 0.972vw; line-height: 1.7143; }

/* 2026：縦の金線・年号・100周年のメッセージ・About Us へのボタン */
.c-history-end { position: relative; height: 62.465vw; color: var(--color-green-dark); font-family: var(--font-serif); text-align: center; }
.c-history-end__line { display: block; width: 1px; height: 8.333vw; margin: 0 auto; background: #c1b374; transform-origin: 50% 0; transform: scaleY(var(--draw, 1)); }
.c-history-end .c-history-era__year { position: static; width: auto; margin-top: 2.09vw; }
.c-history-end__lead { margin-top: 2.201vw; font-size: 1.667vw; line-height: 1.4375; }
.c-history-end__title { margin-top: 0.729vw; font-size: 5.833vw; line-height: 1.2; }
.c-history-end__text { margin-top: 1.549vw; font-size: 1.667vw; line-height: 1.4375; }
/* ボタンのグラデは XD どおり、ボタンの左-90・上-261 に 614×370 で敷く。丸矢印は右 */
.c-history-end__btn { margin-top: 4.208vw; font-family: var(--font-ja); background-position: -6.25vw -18.125vw; }
.c-history-end__btn .c-icon-arrow { right: 1.111vw; left: auto; }

/* ポリシーの白い箱 */
.c-doc { margin-top: 5.903vw; padding: 5.458vw 6.944vw 5.306vw; background: #fff; font-size: 1.111vw; line-height: 2.222vw; }
.c-doc + .c-doc { margin-top: 1.389vw; }
.c-doc__title { color: var(--color-teal); font-size: 2.778vw; line-height: 4.167vw; }
.c-doc__title + p { margin-top: 2.431vw; }
.c-doc h3 { margin-top: 2.41vw; font-size: 1.389vw; font-weight: 700; line-height: 2.222vw; }
.c-doc h3 + p { margin-top: 1.271vw; }
.c-doc__list { padding-left: 2.153vw; }
.c-doc__date { margin-top: 2.222vw; }
.c-doc--small { margin-top: 6.694vw; padding: 2.472vw 6.944vw 2.806vw; }
.c-doc-sign { margin-top: 5.25vw; font-size: 1.111vw; line-height: 2.222vw; text-align: right; }
.c-doc-note { margin: 2.472vw 0 0 6.944vw; font-size: 1.111vw; line-height: 2.222vw; }

/* ==========================================================================
   Utilities
   ========================================================================== */
/* PC だけ・SP だけ出す */
.u-sp { display: none; }

/* 事業ページの色（main に付ける）。キャンパスライフは既定の teal なので付けない */
.u-theme-food     { --theme: #de908a; --theme-grad: linear-gradient(180deg, #de908a, #ddaba7); }
.u-theme-facility { --theme: #397bac; --theme-grad: var(--grad-facility); }
.u-theme-cafe     { --theme: #c9a156; --theme-grad: var(--grad-cafe); }

/* グレー背景（事業ページ：実績一覧の帯が上に139px重なる／お問い合わせ帯が下に148px はみ出す） */
.u-bg-gray { position: relative; z-index: 1; display: flow-root; margin-top: -9.653vw; background: var(--color-gray-bg); isolation: isolate; }

/* 実績一覧の帯がないとき（カフェ）：重ねずに 140px 離し、サービス一覧の線まで 120px */
.l-container + .u-bg-gray { margin-top: 9.722vw; }
.l-container + .u-bg-gray .l-split--service-list { min-height: 21.944vw; padding-top: 8.333vw; }
/* サービス一覧がないとき（ファシリティ）：Q&A がグレーの上端から 279px */
.u-bg-gray > .l-container > .l-split--faq:first-child { margin-top: 19.375vw; }

/* グレーにグラデ画像を乗算で重ねる（About Us） */
.u-bg-multiply { z-index: 0; margin-top: 0; padding: 12.292vw 0 8.333vw; overflow: hidden; }
.u-bg-multiply::before, .u-bg-multiply::after {
  content: ""; position: absolute; top: -15.764vw; z-index: -1;
  width: 123.819vw; height: 178.819vw;
  background: var(--bg-gradient-02) center / cover;
  mix-blend-mode: multiply; opacity: .97;
}
.u-bg-multiply::before { left: calc(50% - 61.944vw); }
/* 2枚目は画面の左端から 29.5vw までだけ見せる。切り抜きの左端は、浮かせたときに画面に入らないよう画面の外（-4.4vw）まで広げている */
.u-bg-multiply::after { left: -82.431vw; clip-path: inset(0 11.875vw 0 78vw); }
/* About Us：箱を置かずに名称の由来だけ */
.u-bg-multiply > .l-container > .l-split--panel { padding: 4.694vw 0 1.139vw; }
.u-bg-multiply > .l-container > .l-split--panel .c-text { max-width: 55.556vw; }
.u-bg-multiply > .l-container > .l-split--panel .c-panel__label { margin-top: 0.167vw; }
/* 会社について：最初の箱を写真のタイトルに75px重ねる。重なった分は切らずに見せる */
.u-bg-multiply--overlap { z-index: 2; padding-top: 0; overflow: visible; clip-path: inset(-5.208vw -100vw 0); }
.u-bg-multiply--overlap::before, .u-bg-multiply--overlap::after { top: 0; height: 129.861vw; }
.u-bg-multiply--overlap .c-panel:first-child { margin-top: -5.208vw; }
.u-bg-multiply--overlap .c-panel + .c-panel { margin-top: 3.472vw; }

/* ==========================================================================
   動き（redlobster-saiyo.jp の動き方を参考に、この作りで書き直したもの）
   ========================================================================== */
/* 画面に入ったら下からふわっと浮き上がる（main.js が is-inview を付ける）。JS が動かないときは最初から見せる */
.js .u-fade-up { opacity: 0; transform: translateY(6.944vw); transition: opacity 1s ease, transform 1.5s cubic-bezier(.22, 1, .36, 1); }
.js .u-fade-up.is-inview { opacity: 1; transform: none; }

/* MV の写真：表示中にゆっくり縮みながら横へ流れる。次の写真の下に残る間も同じ動きを続ける */
.c-hero__slides img { transform: scale(1.1) translateX(-1%); }
.c-hero__slides li.is-active img, .c-hero__slides li.is-prev img { animation: hero-kenburns 9s linear both; }
@keyframes hero-kenburns { from { transform: scale(1.1) translateX(-1%); } to { transform: scale(1) translateX(1%); } }

/* ナビ：マウスを乗せると和文の下に線が左から伸びる（離すと右へ抜ける） */
.l-header__item > a:hover, .l-header__cta:hover { opacity: 1; }
.l-header__item > a:hover { text-shadow: 0 0 6px rgba(255, 255, 255, .7); }
.l-header__ja { position: relative; width: fit-content; }
.l-header__ja::after {
  content: ""; position: absolute; left: 0; bottom: -0.417vw; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.l-header__item > a:hover .l-header__ja::after, .l-header__cta:hover .l-header__ja::after { transform: scaleX(1); transform-origin: left; }

/* 写真カード：マウスを乗せると写真がゆっくり拡大し、紺の膜が少し濃くなる */
.c-card-photo:hover, .c-banner-wide:hover, .c-card-half:hover { opacity: 1; }
.c-card-photo > img, .c-banner-wide > picture img, .c-card-half > img { transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.c-card-photo:hover > img, .c-banner-wide:hover > picture img, .c-card-half:hover > img { transform: scale(1.08); }
.c-card-photo::before, .c-banner-wide::before, .c-card-half--photo::before { transition: background-color .6s; }
.c-card-photo:hover::before, .c-card-half--photo:hover::before { background-color: rgba(21, 53, 90, .45); }
.c-banner-wide:hover::before { background-color: rgba(255, 255, 255, .15); }

/* 事業ページのお問い合わせタブ：最初から出しておき、下スクロールで右へ引っ込め、上スクロールで戻す（main.js が html に is-tabs-hidden を付ける） */
.c-side-cta { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.is-tabs-hidden .c-side-cta { transform: translateX(calc(100% + 1.389vw)); }

/* 背景のグラデ：ふわふわ浮かぶ（トップの MV の後ろ・白いシート、事業ページの見出しの図形、お問い合わせ帯、News 一覧・詳細、About・会社について、ポリシー）。
   往復ではなく、上下左右に寄り道しながら1周して戻るループ。拡大・縮小（呼吸）と、トップはわずかな傾きも混ぜる。
   端が見えないよう、拡大した分の余白の中だけで動かす */
@media (prefers-reduced-motion: no-preference) {
  .c-hero-wrap::before { animation: bg-float 14s ease-in-out infinite; will-change: transform; }
  .l-sheet::before { animation: bg-float-sheet 18s ease-in-out infinite; will-change: transform; }
  .c-contact::before { animation: bg-float 14s ease-in-out infinite; will-change: transform; }
  .l-page-body--news::before, .c-news-band::before { animation: bg-float-sheet 16s ease-in-out infinite; will-change: transform; }
  /* About・会社について：グレー地に重ねたグラデ（2枚は同じ動きにして、重なりの境目をずらさない） */
  .u-bg-multiply::before, .u-bg-multiply::after { animation: bg-float-sheet 18s ease-in-out infinite; will-change: transform; }
  /* About・会社についての写真タイトル：写真と帯状の図形（About）。会社についての紺の膜は写真と一緒に動かさない */
  .c-page-hero__bg img { animation: bg-float-sheet 20s ease-in-out infinite; will-change: transform; }
  .c-page-hero:not(.c-page-hero--photo) .c-page-hero__bg::after { animation: bg-float-sheet 16s ease-in-out -6s infinite; will-change: transform; }
  /* About の Mission / Vision の箱のグラデ（PC。SP は箱がはみ出す作りなので動かさない） */
  .c-panel-dark::before { animation: bg-float 14s ease-in-out infinite; will-change: transform; }
  /* 事業ページの下の「4つの事業」のぼかした写真 */
  .c-business-nav::before { animation: bg-float-sheet 18s ease-in-out infinite; will-change: transform; }
  /* トップの白いシート右上の大きなマーク：上下にゆらゆら */
  .l-sheet__mark { animation: mark-float 8s ease-in-out infinite; }
  /* ポリシー：右上・左下の曲線。時間をずらして、別々に浮かぶ */
  .l-page-body--policy::before { animation: bg-float-sheet 16s ease-in-out infinite; will-change: transform; }
  .l-page-body--policy::after { animation: bg-float-sheet 16s ease-in-out -8s infinite; will-change: transform; }
  /* 見出しの図形は左端（白くぼかした側）を固定して、拡大と上下だけで動かす */
  .c-page-title__bg::before { transform-origin: 0 50%; animation: bg-float-title 12s ease-in-out infinite; will-change: transform; }
}
@keyframes mark-float { 0%, 100% { transform: none; } 50% { transform: translateY(-1.389vw) rotate(1.5deg); } }
@keyframes bg-float {
  0%, 100% { transform: scale(1.04); }
  25% { transform: scale(1.06) translate(-1.2%, 1%) rotate(-.6deg); }
  50% { transform: scale(1.05) translate(.8%, 1.6%) rotate(.4deg); }
  75% { transform: scale(1.07) translate(1.2%, -.6%) rotate(-.3deg); }
}
@keyframes bg-float-sheet {
  0%, 100% { transform: scale(1.04); }
  33% { transform: scale(1.05) translate(-1.5%, .6%); }
  66% { transform: scale(1.045) translate(1.2%, -.5%); }
}
@keyframes bg-float-title {
  0%, 100% { transform: scale(1.03); }
  30% { transform: scale(1.06) translateY(1.2%); }
  60% { transform: scale(1.05) translateY(-1%); }
  80% { transform: scale(1.07) translateY(.4%); }
}

/* About Us・会社についての写真タイトル：開いたら タイトル → キャッチ（1行ずつ下からせり上がる）→ 本文 の順に出す（会社についてはタイトルだけ） */
.c-page-hero__lead > span { display: inline-block; overflow: hidden; vertical-align: top; }
.c-page-hero__lead > span > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .c-page-hero__title { animation: hero-text-up 1.2s cubic-bezier(.22, 1, .36, 1) .2s both; }
  /* 事業ページの見出し（英字 → 和文）、トップの MV のロゴとキャプション */
  .c-page-title__inner > * { animation: hero-text-up 1.2s cubic-bezier(.22, 1, .36, 1) .2s both; }
  .c-page-title__inner > .c-page-title__ja { animation-delay: .4s; }
  .c-hero__body { animation: hero-text-up 1.4s cubic-bezier(.22, 1, .36, 1) .4s both; }
  .c-page-hero__lead > span > span { animation: line-up 1s cubic-bezier(.22, 1, .36, 1) both; }
  .c-page-hero__lead > span:nth-of-type(1) > span { animation-delay: .6s; }
  .c-page-hero__lead > span:nth-of-type(2) > span { animation-delay: .8s; }
  .c-page-hero__lead > span:nth-of-type(3) > span { animation-delay: 1s; }
  .c-page-hero__text { animation: hero-text-up 1.4s cubic-bezier(.22, 1, .36, 1) 1.4s both; }
}
/* News 一覧・詳細・ポリシー：開いたら 見出し → 一覧（上から1行ずつ）→ ページ送り、日付 → タイトル → 本文 の順に浮き上がる */
@media (prefers-reduced-motion: no-preference) {
  .l-page-body .c-page-heading, .c-news-list--page li, .c-pager, .c-article__date, .c-article__title, .c-article__body { animation: hero-text-up 1.2s cubic-bezier(.22, 1, .36, 1) both; }
  .l-page-body .c-page-heading { animation-delay: .2s; }
  .c-news-list--page li:nth-child(1) { animation-delay: 0.45s; }
  .c-news-list--page li:nth-child(2) { animation-delay: 0.51s; }
  .c-news-list--page li:nth-child(3) { animation-delay: 0.57s; }
  .c-news-list--page li:nth-child(4) { animation-delay: 0.63s; }
  .c-news-list--page li:nth-child(5) { animation-delay: 0.69s; }
  .c-news-list--page li:nth-child(6) { animation-delay: 0.75s; }
  .c-news-list--page li:nth-child(7) { animation-delay: 0.81s; }
  .c-news-list--page li:nth-child(8) { animation-delay: 0.87s; }
  .c-news-list--page li:nth-child(9) { animation-delay: 0.93s; }
  .c-news-list--page li:nth-child(10) { animation-delay: 0.99s; }
  .c-news-list--page li:nth-child(11) { animation-delay: 1.05s; }
  .c-news-list--page li:nth-child(12) { animation-delay: 1.11s; }
  .c-news-list--page li:nth-child(n+13) { animation-delay: 1.15s; }
  .c-pager { animation-delay: 1.2s; }
  .c-article__date { animation-delay: .2s; }
  .c-article__title { animation-delay: .35s; }
  .c-article__body { animation-delay: .6s; }
}
/* 100年の歩み：開いたらロゴ → 写真が順に浮かぶ。年代は画面に入ったら 年号（数字がカウントアップ。main.js）・金線が伸びる → 日付 → 見出しの文字が左から右へ流れて現れる → 本文 → 写真 */
@media (prefers-reduced-motion: no-preference) {
  .c-history__logo img { animation: hero-text-up 1.4s cubic-bezier(.22, 1, .36, 1) .3s both; }
  .c-history__label { animation: hero-text-up 1.4s cubic-bezier(.22, 1, .36, 1) .7s both; }
  .c-history__fv-photo { animation: fade-in 1.6s ease .5s both; }
  .c-history__fv-photo:nth-child(2) { animation-delay: .6s; }
  .c-history__fv-photo:nth-child(3) { animation-delay: .7s; }
  .c-history__fv-photo:nth-child(4) { animation-delay: .8s; }
  .c-history__fv-photo:nth-child(5) { animation-delay: .9s; }
  .c-history__fv-photo:nth-child(6) { animation-delay: 1s; }
  .c-history__fv-photo:nth-child(7) { animation-delay: 1.1s; }
  .c-history__fv-photo:nth-child(8) { animation-delay: 1.2s; }
  .c-history__fv-photo:nth-child(9) { animation-delay: 1.3s; }

  .js .c-history-era__year { opacity: 0; transition: opacity 1.2s ease; }
  .js .c-history-era__line, .js .c-history-end__line { --draw: 0; transition: transform 1.6s cubic-bezier(.65, 0, .35, 1); }
  .js .c-history-era__year.is-inview { opacity: 1; }
  .js .c-history-era__line.is-inview, .js .c-history-end__line.is-inview { --draw: 1; }

  .js .c-history-entry__date, .js .c-history-entry__text { opacity: 0; transform: translateY(1.389vw); transition: opacity .8s ease, transform 1s cubic-bezier(.22, 1, .36, 1); }
  /* 見出しは左から右へ流れて現れる。マスクは幅の220%で、透明→不透明の境目（46%〜54%）が右へ抜ける。
     初期は右端そろえ＝箱が画像の54.5〜100%（全部透明）、表示後は左端そろえ＝0〜45.5%（全部不透明） */
  .js .c-history-entry__title { -webkit-mask: linear-gradient(90deg, #000 46%, transparent 54%) 100% 0 / 220% 100% no-repeat; mask: linear-gradient(90deg, #000 46%, transparent 54%) 100% 0 / 220% 100% no-repeat; transition: -webkit-mask-position 1.4s cubic-bezier(.65, 0, .35, 1) .2s, mask-position 1.4s cubic-bezier(.65, 0, .35, 1) .2s; }
  .js .c-history-entry__text { transition-delay: 1s; }
  .js .c-history-entry--sub .c-history-entry__text { transition-delay: .2s; }
  .js .c-history-entry.is-inview .c-history-entry__date, .js .c-history-entry.is-inview .c-history-entry__text { opacity: 1; transform: none; }
  .js .c-history-entry.is-inview .c-history-entry__title { -webkit-mask-position: 0 0; mask-position: 0 0; }

  .js .c-history-era__photo { opacity: 0; translate: 0 2.083vw; transition: opacity 1.2s ease, translate 1.4s cubic-bezier(.22, 1, .36, 1); }
  .js .c-history-era__photo:nth-child(2) { transition-delay: .2s; }
  .js .c-history-era__photo:nth-child(3) { transition-delay: .4s; }
  .js .c-history-era__photo.is-inview { opacity: 1; translate: none; }

  .js .c-history-end__body, .js .c-history-end__btn { opacity: 0; transform: translateY(1.389vw); transition: opacity 1s ease .3s, transform 1.2s cubic-bezier(.22, 1, .36, 1) .3s; }
  .js .c-history-end__body.is-inview, .js .c-history-end__btn.is-inview { opacity: 1; transform: none; }
}

@keyframes hero-text-up { from { opacity: 0; transform: translateY(2.083vw); } to { opacity: 1; transform: none; } }
@keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .u-fade-up { opacity: 1; transform: none; transition: none; }
  .c-hero__slides li img { animation: none !important; transform: none; }
  .c-card-photo > img, .c-banner-wide > picture img, .c-card-half > img { transition: none; }
}

/* ==========================================================================
   SP（262.308vw 以下）
   XD の SP デザイン（幅390px：トップ・事業紹介・About Us・会社について）の実測値
   ========================================================================== */
@media (max-width: 1023px) {
  :root { --container: auto; --marker-shift: -4.103vw; --header-h: 15.385vw; }
  body { font-size: 4.103vw; }
  [id]:not(body) { scroll-margin-top: 20.513vw; }
  br.u-pc, .u-pc { display: none; }
  .u-sp { display: revert; }

  .l-container { max-width: 174.359vw; padding-inline: 4.103vw; }
  .l-grid--2, .l-grid--3 { grid-template-columns: 1fr; gap: 5.128vw; }
  .l-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 3.59vw; }
  .l-stack > * + * { margin-top: 5.128vw; }
  .l-split, .l-split--panel, .l-split--access { grid-template-columns: 1fr; }
  .l-split--services { margin-top: 14.615vw; }
  .l-split--service-list { padding-top: 33.462vw; }
  .l-split--faq { margin-top: 18.974vw; }

  /* ヘッダー：ナビはメニューボタンで開く全画面メニュー。採用情報はヘッダーの下に縦のタブで出す */
  .l-header { background: var(--bg-gradient-01) 0 -6.41vw / 202.308vw auto no-repeat; }
  .l-header__logo { top: 4.872vw; left: 4.103vw; }
  .l-header__logo img { width: 26.667vw; }
  .l-header__menu-btn { position: relative; display: block; width: 16.667vw; height: 15.385vw; margin-left: auto; }
  .l-header__menu-btn span { display: none; }
  .l-header__menu-btn::before, .l-header__menu-btn::after {
    content: ""; position: absolute; left: 0; width: 13.333vw; height: 0.513vw; background: #000; transition: transform .3s;
  }
  .l-header__menu-btn::before { top: 6.154vw; }
  .l-header__menu-btn::after { top: 8.718vw; }
  .l-header.is-open .l-header__menu-btn::before { transform: translateY(1.282vw) rotate(20deg); }
  .l-header.is-open .l-header__menu-btn::after { transform: translateY(-1.282vw) rotate(-20deg); }
  .l-header__nav {
    position: fixed; inset: var(--header-h) 0 0; z-index: -1;
    flex-direction: column; margin: 0; padding: 4.103vw 4.103vw 10.256vw; overflow-y: auto;
    background: var(--bg-gradient-01) center / cover;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .l-header.is-open .l-header__nav { opacity: 1; visibility: visible; }
  .l-header__item, .l-header__item:last-of-type { height: auto; padding: 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .5); }
  .l-header__item > a { height: auto; padding: 4.615vw 1.026vw; }
  .l-header__en { font-size: 3.077vw; }
  .l-header__ja { margin-top: 2.051vw; font-size: 4.615vw; }
  .l-header__sub { position: static; width: auto; margin: -2.051vw 0 0; padding: 0 1.026vw 4.103vw 4.103vw; background: none; opacity: 1; visibility: inherit; transform: none; transition: none; }
  /* ↑ visible にすると、閉じたメニュー（visibility: hidden）の中でもリンクだけ押せてしまい、下のページのリンクを横取りする。親に合わせる */
  .l-header__sub::before { display: none; }
  .l-header__sub li, .l-header__sub li + li { border: 0; }
  .l-header__sub a { position: relative; display: block; height: auto; padding: 2.051vw 0 2.051vw 4.103vw; color: #fff; font-size: 3.59vw; font-weight: 500; line-height: 1.5; }
  .l-header__sub a:hover { color: #fff; }
  .l-header__sub .c-icon-arrow { display: none; }
  .l-header__sub a::before { content: ""; position: absolute; top: calc(50% - 0.128vw); left: 0; width: 2.051vw; height: 1px; background: currentColor; }
  .l-header__nav-cta {
    display: block; margin-top: 8.205vw; padding: 4.103vw; border-radius: 3.077vw;
    background: #fff; font-size: 4.103vw; font-weight: 700; line-height: 1.5; letter-spacing: .2em; text-align: center;
  }
  .l-header__cta {
    position: absolute; top: 15.385vw; right: 0;
    display: flex; align-items: center; justify-content: center;
    width: 16.667vw; height: 24.103vw; padding: 0;
    border-radius: 0 0 0 3.077vw; box-shadow: 0 0.769vw 1.538vw rgba(0, 0, 0, .16);
  }
  .l-header__cta .l-header__en { display: none; }
  .l-header__cta .l-header__ja { margin: 0; writing-mode: vertical-rl; font-size: 3.333vw; line-height: 3.846vw; }
  .l-header.is-open .l-header__cta { display: none; }
  /* 写真のタイトルがあるページ（About Us・会社について）と、News・ポリシーはタブを出さない（XD どおり） */
  body:has(.c-page-hero, .l-page-body, .c-article) .l-header__cta { display: none; }

  /* フッター */
  .l-footer { padding: 16.41vw 0 20.513vw; }
  .l-footer__brand img { width: 51.282vw; }
  .l-footer__brand p { margin: 6.667vw -.2em 0 0; font-size: 3.59vw; }
  .l-footer .c-banner-wide { margin-top: 14.615vw; }
  .l-footer__business { grid-template-columns: 1fr; gap: 0; margin-top: 13.333vw; }
  .l-footer__heading { gap: 3.59vw; margin: 0 0 0 1px; font-size: 7.179vw; }
  .l-footer__heading span { top: 0; font-size: 4.103vw; }
  .c-link-list { margin-top: 0.769vw; }
  .c-link-list a { height: 17.436vw; padding: 0 4.872vw 2.051vw 3.077vw; font-size: 3.59vw; line-height: 8.205vw; }
  .c-link-list .c-icon-arrow { margin-bottom: 1.026vw; }
  .c-photo-strip { display: none; }
  .l-footer .l-grid--3 { margin-top: 9.231vw; }
  .l-footer__rule { width: auto; margin: 10.513vw 0 0; }
  .l-footer .c-bnr-list { margin-top: 10vw; }
  .l-footer .c-pagetop { right: 4.103vw; bottom: -7.692vw; }
  .l-footer--simple { height: 74.615vw; padding: 11.282vw 8.205vw 0; }
  .l-footer--simple .c-bnr-list { margin-top: 0; } /* 下層フッター用の margin-top（10vw）を打ち消す */
  .l-footer--simple .c-pagetop { top: 66.923vw; bottom: auto; }
  .c-bnr-list { flex-direction: column; width: auto; margin: 0; }
  .c-bnr-list li + li { margin-left: 0; margin-top: -1px; }
  .c-bnr-list a { justify-content: flex-start; height: 15.385vw; padding: 0 0 0 6.154vw; font-size: 4.615vw; line-height: 1; }
  .c-bnr-list li:first-child a { border-radius: 3.077vw 3.077vw 0 0; }
  .c-bnr-list li:last-child a { border-radius: 0 0 3.077vw 3.077vw; }
  .c-bnr-list__label br { display: none; }
  .c-bnr-list .c-icon-external { top: 50%; right: 4.103vw; bottom: auto; width: 4.615vw; height: 4.615vw; margin-top: -2.308vw; }
  .l-copyright, .l-copyright--green { flex-direction: column; gap: 2.564vw; height: 21.538vw; padding-right: 0; font-size: 2.051vw; }
  .l-copyright__link { font-size: 2.821vw; }

  /* 見出し・テキスト */
  .c-heading-en { font-size: 7.179vw; }
  .c-lead { font-size: 6.154vw; line-height: 11.282vw; letter-spacing: .06em; }
  .c-text { font-size: 4.103vw; line-height: 8.205vw; letter-spacing: .06em; }
  .c-text--intro { min-height: 0; margin: 9.128vw 0 0; }
  .c-side-label { margin: 0 0 10.385vw; writing-mode: horizontal-tb; font-size: 5.128vw; line-height: 7.179vw; letter-spacing: .06em; }
  .c-side-label--upright { margin-bottom: 2.308vw; font-family: var(--font-ja); font-size: 5.641vw; line-height: 9.231vw; }
  .c-heading-bar { width: auto; padding-bottom: 1.026vw; font-size: 6.154vw; line-height: 14.359vw; white-space: normal; }
  .c-heading-bar::before { width: 15.385vw; height: 1.026vw; margin-bottom: 3.333vw; }
  .c-marker-copy > span { height: 11.538vw; padding: 0 2.821vw 0 3.077vw; font-size: 6.154vw; line-height: 11.538vw; }
  .c-marker-copy > span:nth-child(2), .c-marker-copy > span:nth-child(3) { margin-top: 1.538vw; }

  /* アイコン・リンク・ボタン */
  .c-icon-arrow { width: 8.205vw; height: 8.205vw; -webkit-backdrop-filter: blur(7.692vw); backdrop-filter: blur(7.692vw); }
  .c-icon-arrow--s { width: 6.154vw; height: 6.154vw; }
  .c-icon-external { width: 3.59vw; height: 3.59vw; }
  .c-link-arrow { gap: 4.103vw; font-size: 7.179vw; }
  .c-link-arrow--s { gap: 3.077vw; font-size: 4.615vw; }
  .c-link-external { font-size: 3.59vw; line-height: 1.8; }
  .c-link-external::after { width: 3.077vw; height: 3.077vw; margin-left: 3.077vw; vertical-align: 0.513vw; }
  .c-btn { width: 100%; max-width: 82.051vw; height: 15.385vw; padding-right: 5.128vw; border-radius: 3.077vw; font-size: 4.103vw; line-height: 8.205vw; }
  .c-btn .c-icon-arrow { top: 4.615vw; right: 4.103vw; }
  .c-btn--outline { gap: 3.077vw; width: 30.769vw; height: 10.256vw; padding: 0 0 0 3.077vw; border-radius: 2.051vw; font-size: 3.077vw; }
  .c-pagetop { right: 4.103vw; width: 15.385vw; height: 15.385vw; padding-top: 7.949vw; font-size: 3.59vw; }

  /* 事業ページのお問い合わせタブ（採用情報タブの下） */
  .c-side-cta { top: 39.487vw; width: 16.41vw; height: 62.564vw; border-radius: 3.077vw 0 0 3.077vw; background: var(--bg-gradient-01) 30% 50% / auto 102.564vw no-repeat; }
  /* 文字とアイコンは XD（iPhone – 7）の位置：文字は上から 21.5px、中心がタブの中央より少し右 */
  .c-side-cta__text { top: 5.513vw; left: calc(50% + 0.872vw); translate: -50% 0; font-size: 3.333vw; line-height: 3.846vw; letter-spacing: 0; }
  .c-side-cta .c-icon-arrow { top: auto; bottom: 5.641vw; left: calc(50% + 0.744vw); translate: -50% 0; }
  /* SP は採用情報のタブも同じ動き（最初から出しておき、下スクロールで引っ込め、上スクロールで戻す） */
  .l-header__cta { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
  .is-tabs-hidden .c-side-cta, .is-tabs-hidden .l-header__cta { transform: translateX(calc(100% + 4.103vw)); }
  /* メニューを開いている間も引っ込める（メニューに重なるため） */
  body:has(.l-header.is-open) .c-side-cta { transform: translateX(calc(100% + 4.103vw)); }

  /* カード・パネル */
  .c-card-photo { height: 58.462vw; border-radius: 3.077vw; }
  .c-card-photo::after { width: 5.128vw; height: 7.692vw; border-radius: 3.077vw 0 3.077vw 0; }
  .c-card-photo__title { top: 36.154vw; bottom: auto; left: 3.59vw; font-size: 4.103vw; line-height: 6.154vw; }
  .c-card-photo .c-icon-arrow { right: 2.564vw; bottom: 2.564vw; }
  .c-card-tile { width: auto; height: 41.282vw; padding-bottom: 3.59vw; border-radius: 3.077vw; font-size: 4.615vw; line-height: 8.205vw; }

  .c-banner-wide { height: 71.795vw; border-radius: 3.077vw; }
  .c-banner-wide .c-icon-arrow { right: 3.077vw; bottom: 3.077vw; }

  .c-card-half { height: 51.282vw; border-radius: 3.077vw; }
  .c-card-half--photo { padding-top: 16.154vw; }
  .c-card-half__en { font-size: 7.179vw; }
  .c-card-half__ja { margin: 4.872vw -.2em 0 0; font-size: 4.103vw; }
  .c-card-half .c-icon-arrow { right: 3.077vw; bottom: 3.077vw; }
  .c-card-half--recruit { height: 30.769vw; }

  .c-panel { padding: 11.282vw 4.103vw; border-radius: 3.077vw; -webkit-backdrop-filter: blur(7.692vw); backdrop-filter: blur(7.692vw); }
  .c-panel + .c-panel { margin-top: 5.128vw; }
  .c-panel--news { padding: 6.923vw 5.128vw 8.974vw; border-radius: 5.128vw; }
  .c-panel__title { margin: 0; font-size: 7.179vw; }
  .c-panel__label { margin: 0 0 5.385vw; font-size: 5.128vw; line-height: 8.205vw; }

  .c-news-list { margin-top: 1.795vw; }
  .c-news-list a {
    display: grid; grid-template-columns: 1fr auto; column-gap: 3.077vw; row-gap: 3.077vw; align-items: center;
    height: auto; padding: 4.615vw 0 5.897vw;
  }
  .c-news-list time { width: auto; font-family: var(--font-en); font-size: 3.59vw; }
  .c-news-list__title { grid-column: 1; overflow: hidden; font-size: 3.59vw; letter-spacing: .1em; white-space: nowrap; text-overflow: ellipsis; }
  .c-news-list .c-icon-arrow { grid-column: 2; grid-row: 1 / 3; }
  .c-news-list__more { margin-top: 9.231vw; }

  /* トップ */
  .c-hero-wrap { padding-top: 0; --intro-clip: 30% 0 4% 0; --intro-logo-y: -41.026vw; --hero-radius: 5.128vw; }
  .c-hero-wrap::before { top: calc(var(--header-h) * -1); left: 0; width: 100%; height: 164.872vw; aspect-ratio: auto; }
  .c-hero-wrap__logo { top: 7.436vw; left: calc(50% - 34.615vw); width: 69.231vw; }
  .c-hero { top: calc(var(--header-h) - 1.026vw); height: 161.538vw; margin: -1.026vw 4.103vw 0; border-radius: 5.128vw; }
  .c-hero__slides li:nth-child(6) img { object-position: 84% 50%; }
  .c-hero__body { left: 4.103vw; bottom: 11.282vw; }
  .c-hero__logo { width: 62.821vw; }
  .c-hero__caption { margin-top: 7.692vw; font-size: 3.59vw; }
  .c-hero__dots { gap: 1.026vw; margin-top: 5.128vw; }
  .c-hero__dots span { width: 7.179vw; height: 0.513vw; }
  .c-hero__dots span.is-active { height: 1.026vw; }
  .l-sheet { margin-top: 8.462vw; padding: 19.487vw 0 20.513vw; border-radius: 6.154vw 6.154vw 0 0; }
  /* シート上部（334px）は白。その下にグラデを60%で敷く */
  .l-sheet::before { left: 0; width: 100%; background: linear-gradient(#fff, #fff) 0 0 / 100% 85.641vw no-repeat, linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)), url(../img/bg/gradient-sp.webp?v=b65f0e85) -50.256vw 0 / 201.538vw auto no-repeat, #fff; }
  .l-sheet__mark { top: 100.256vw; left: 7.692vw; width: 44.103vw; }
  .c-intro .c-lead { margin-left: 0; }
  .c-intro__text { margin: 9.128vw 0 0; font-size: 4.103vw; line-height: 9.231vw; letter-spacing: .06em; }
  .c-intro__more { margin-top: 9.59vw; padding-right: 3.846vw; }
  .c-intro__more .c-link-arrow { align-items: center; }
  .c-intro__more .c-icon-arrow { margin-top: 0; }
  .c-business { margin-top: 17.436vw; }
  .c-business .l-grid { margin-top: 5.897vw; }
  .c-rule { margin: 8.462vw 0 10.256vw; }

  /* 事業ページ */
  .c-page-title { height: auto; }
  .c-page-title__bg { height: 95.128vw; }
  /* キャンパスは XD の SP の見出し背景を書き出した画像。フード・ファシリティ・カフェは SP デザインがないので、PC の画像の図形が見える位置を高さいっぱいで切り出す */
  .c-page-title__bg::before { background-position: 60% 0; background-size: auto 100%; }
  .c-page-title--campus .c-page-title__bg::before { background: url(../img/bg/title-campus-sp.webp?v=b684ff5e) 0 0 / 100% 100% no-repeat; }
  .c-page-title__inner { flex-direction: column; padding: 10.769vw 4.103vw 0; }
  .c-page-title__label { font-size: 4.103vw; }
  .c-page-title__en { margin-top: 2.308vw; font-size: 8.205vw; line-height: 10.256vw; }
  .c-page-title__ja, .c-page-title__ja--3lines { margin-top: 6.41vw; padding-left: 3.077vw; font-size: 4.103vw; line-height: 5.769vw; }
  .c-key-visual { height: 103.333vw; margin-top: 10.513vw; }
  /* 写真は XD どおり 115% に拡大して右寄りを切り出す（658×439 の画像を 342×380 の窓で切る） */
  .c-key-visual__image { width: 168.718vw; max-width: none; height: 112.462vw; position: relative; top: -16.179vw; left: -58.179vw; margin: 0; border-radius: 0; clip-path: inset(16.179vw 18.744vw 0 62.282vw round 3.077vw); }
  .c-key-visual .c-marker-copy { top: 65.641vw; left: 0; }
  /* SP 用に切り抜いた画像（342×380）があるときは、そのまま置く */
  .c-key-visual__image--sp { position: static; width: 87.692vw; height: 97.436vw; margin-left: 4.103vw; clip-path: none; border-radius: 3.077vw; }

  .c-media { grid-template-columns: 1fr; gap: 7.282vw; }
  .c-media:not(:last-of-type), .c-media:not(:last-of-type).c-media--long { height: auto; }
  .c-media + .c-media { margin-top: 15.385vw; }
  .c-media__sub { margin-top: 5.385vw; font-size: 5.128vw; line-height: 8.205vw; }
  .c-media__body .c-text { width: auto; margin-top: 3.846vw; }
  .c-media__image img { width: 100%; height: auto; aspect-ratio: 358 / 205; }
  .c-media__image--pair { height: 53.333vw; }
  .c-media__image--pair img:first-child { top: 0; left: 0; width: 85.641vw; height: 47.692vw; aspect-ratio: auto; }
  .c-media__image--pair img:last-child { top: 34.359vw; left: auto; right: 0; width: 36.154vw; height: 18.974vw; aspect-ratio: auto; }
  .c-media-note { margin-top: 8.205vw; }
  .c-media__body .c-heading-bar + .c-text { margin-top: 3.846vw; }
  .c-media--text + .c-media--text { margin-top: 15.385vw; }
  .c-media--text + .c-media-note { margin-top: 8.205vw; }
  /* 写真2枚の重ねは、SP では1枚に組んだ画像（SP 用）だけを出す */
  .c-media__image--pair-reverse { height: auto; }
  .c-media__image--pair-reverse img, .c-media__image--pair-reverse picture img { position: static; width: 100%; height: auto; }
  .c-media__image--pair-reverse > img { display: none; }

  .c-panel-gradient { height: auto; margin-top: 20.513vw; padding: 6.154vw 0 11.538vw; }
  .c-panel-gradient::before { inset: 0 4.103vw 0 0; border-radius: 0 3.077vw 3.077vw 0; }
  .c-panel-gradient .l-container { padding-right: 8.205vw; }
  .c-panel-gradient__title { font-size: 5.128vw; line-height: 15.385vw; }
  .c-panel-gradient__title small { display: block; margin: -4.103vw 0 1.026vw; font-size: 3.59vw; line-height: 6.154vw; }
  .c-panel-gradient__cols { grid-template-columns: 1fr; margin-top: 0.513vw; font-size: 4.103vw; line-height: 7.692vw; letter-spacing: .06em; }

  .u-bg-gray { margin-top: -12.821vw; }
  .c-service-list { width: auto; margin-top: -10.769vw; padding-top: 0; border-top: 0; font-size: 4.103vw; line-height: 6.154vw; letter-spacing: .06em; }
  .c-service-list--bold { margin-top: -7.692vw; line-height: 7.692vw; }
  .l-split--service-list, .l-container + .u-bg-gray .l-split--service-list { min-height: 0; }
  .l-container + .u-bg-gray { margin-top: 20.513vw; }
  .l-container + .u-bg-gray .l-split--service-list { padding-top: 20.513vw; }
  .u-bg-gray > .l-container > .l-split--faq:first-child { margin-top: 33.462vw; }
  .c-service-list dt { margin-top: 2.564vw; padding-left: 1.026vw; line-height: 7.692vw; }
  .c-service-list dd { padding-left: 1em; }

  .c-faq__heading { margin-top: 0; font-size: 4.615vw; line-height: 8.205vw; letter-spacing: .06em; }
  .c-faq { width: auto; margin-top: -1.538vw; }
  /* 1021 版（sp_IVYCS_Q&A）：質問 18px・行32px・幅277px、線から質問まで 27.5px、質問から線まで 16px、アイコン 18×14 */
  .c-faq__q { align-items: flex-start; padding: 7.051vw 0 4.167vw; }
  .c-faq__num { width: 11.026vw; margin-top: -0.769vw; font-size: 4.615vw; line-height: 8.205vw; }
  .c-faq__text { flex: 0 1 71.026vw; font-size: 4.615vw; line-height: 8.205vw; letter-spacing: .06em; }
  .c-faq__icon { flex-shrink: 0; width: 4.615vw; height: 3.59vw; margin: 1.795vw 0 0 auto; }
  .c-faq__icon::before { top: 1.795vw; width: 4.615vw; }
  .c-faq__icon::after { left: 2.308vw; height: 3.59vw; }
  .c-faq__a { padding: 0 0 9.744vw 11.026vw; }
  .c-faq__a .c-text { line-height: 7.179vw; }

  .c-contact { height: auto; margin: 20.513vw 0 -30vw; padding: 4.103vw 4.872vw 9.744vw; border-radius: 3.077vw; }
  .c-contact::before { inset: 0; width: auto; height: auto; background-position: center; background-size: cover; }
  .c-contact__title { font-size: 5.128vw; line-height: 15.385vw; }
  .c-contact .c-btn { margin-top: 2.308vw; }
  .c-contact__tel { margin-top: 5.897vw; font-size: 3.59vw; line-height: 7.179vw; white-space: normal; }
  .c-contact__tel strong { font-size: 4.615vw; }

  .c-business-nav { padding: 49.487vw 0 20.513vw; }
  .c-business-nav::before { inset: 7.692vw 0 0; filter: blur(10.256vw); }
  .c-business-nav .l-container > * { margin-left: 0; }
  .c-business-nav__title { font-size: 7.179vw; line-height: 12.308vw; }
  .c-business-nav .c-text { width: auto; margin-top: 4vw; }
  .c-business-nav__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.051vw; width: auto; margin-top: 13.692vw; }

  /* About Us：1段落目までが写真の上。残りは白地、Mission / Vision は写真の帯に重ねる */
  .c-page-hero { height: auto; }
  .c-page-hero__bg { bottom: auto; height: 154.103vw; }
  .c-page-hero__bg img { left: -93.077vw; width: 231.026vw; }
  .c-page-hero__bg::after { top: 0; left: 34.872vw; width: 102.564vw; height: 74.872vw; background-size: auto; }
  .c-page-hero .l-container { padding-inline: 8.205vw 4.103vw; }
  .c-page-hero__title { margin-right: 3.59vw; padding-top: 7.179vw; font-size: 10.256vw; line-height: 18.462vw; }
  .c-page-hero__title span { margin-top: -0.513vw; font-size: 4.615vw; }
  .c-page-hero__lead { margin-top: 15.641vw; font-size: 5.641vw; line-height: 11.282vw; letter-spacing: .16em; }
  .c-page-hero__text { width: auto; margin-top: 6.923vw; font-size: 4.103vw; line-height: 9.231vw; }
  .c-page-hero__text p + p { margin-top: 14.359vw; color: var(--color-text); }
  .c-page-hero { display: flow-root; }
  /* Mission / Vision の箱：下に237px はみ出してグレー地に重なる。写真の帯は箱の40px上から、グレー地の始まりまで */
  .c-panel-dark { position: relative; top: auto; left: auto; width: auto; height: auto; margin: 19.744vw 0 -60.769vw -4.103vw; padding: 10.256vw 4.103vw 18.974vw; overflow: visible; border-radius: 3.077vw; background: none; }
  .c-panel-dark::before { animation: none; border-radius: inherit; opacity: 1; background: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), var(--bg-gradient-01) center / cover; }
  .c-panel-dark::after {
    content: ""; position: absolute; inset: -10.256vw auto 60.769vw -4.103vw; z-index: -2; width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(../img/photo/about-hero.webp?v=195e7611) -93.077vw 0 / 181.026vw auto no-repeat, #000;
  }
  .c-label-row { grid-template-columns: 1fr; }
  .c-label-row + .c-label-row { margin-top: 9.487vw; }
  .c-label-row__label { padding-left: 2.308vw; font-size: 7.179vw; line-height: 8.718vw; }
  .c-label-row__label::before { inset: 0 auto 0 0; }
  .c-label-row p { margin-top: 4.103vw; font-size: 4.103vw; line-height: 8.205vw; }

  .u-bg-multiply { margin-top: 0; padding: 75.641vw 0 13.077vw; }
  .u-bg-multiply::before { top: -23.846vw; left: -41.026vw; width: 288.974vw; height: 286.667vw; }
  .u-bg-multiply::after { display: none; }
  .u-bg-multiply > .l-container > .l-split--panel { padding: 0; }
  .u-bg-multiply > .l-container > .l-split--panel .c-panel__label { margin: 0 0 3.744vw; }
  .u-bg-multiply > .l-container > .l-split--panel .c-text { max-width: none; }

  /* 会社について */
  .c-page-hero--photo { height: 67.179vw; }
  .c-page-hero--photo .c-page-hero__bg { height: 100%; }
  .c-page-hero--photo .c-page-hero__bg img { left: 0; width: 100%; }
  .c-page-hero--photo::after { display: none; }
  .u-bg-multiply--overlap { padding: 0 0 25.641vw; clip-path: inset(-20.513vw -100vw 0); }
  .u-bg-multiply--overlap::before { top: -5.128vw; left: -157.692vw; width: 457.179vw; height: 525.128vw; }
  .u-bg-multiply--overlap .c-panel:first-child { margin-top: -20.513vw; }
  .u-bg-multiply--overlap .c-panel + .c-panel { margin-top: 5.128vw; }
  .u-bg-multiply--overlap .c-panel:last-child { padding-bottom: 14.359vw; }
  .c-dl-table { margin-top: 0; }
  .c-dl-table dl > div { grid-template-columns: 1fr; padding: 2.821vw 0; font-size: 3.59vw; line-height: 5.641vw; }
  .c-dl-table__figure { display: none; }
  .c-map { height: 66.667vw; margin-top: 5.385vw; }
  .c-access { column-gap: 2.051vw; margin-top: 3.333vw; font-size: 3.59vw; line-height: 6.667vw; }
  .c-access__route { grid-column: 1 / -1; margin-top: 4.103vw; }

  /* 404（XD の SP：sp_IVYCS_404） */
  .l-page-body--news.l-page-body--error { min-height: 182.308vw; padding: 20.897vw 0 0; }
  .l-page-body--news.l-page-body--error::before { height: 182.308vw; background-image: url(../img/bg/error-404-sp.webp?v=19fd4956); }
  .l-page-body--news.l-page-body--error .l-container { padding-inline: 8.205vw; }
  .c-error__title { margin-left: 2.051vw; font-size: 10.256vw; line-height: 15.385vw; }
  .c-error__lead { margin-top: 7.18vw; font-size: 5.128vw; line-height: 9.231vw; }
  .c-error__text { margin-top: 6.154vw; font-size: 4.103vw; line-height: 8.205vw; }
  .c-error__text + .c-btn { margin-top: 14.462vw; }
  .c-btn--gradient { max-width: none; width: 82.051vw; background-position: -52.308vw -12.564vw; background-size: 157.436vw 94.872vw; }
  .c-btn--gradient .c-icon-arrow { top: 4.615vw; left: 4.103vw; }

  /* 100年の歩み（XD の SP：FV と 1926〜1971。1972 年以降は同じ並べ方で続ける） */
  .c-history { --px: calc(100vw / 390); }
  .c-history__bg { background-image: url(../img/history/bg-sp.webp?v=5c9947b9); }
  .c-history__sheet { top: 171.897vw; clip-path: polygon(0 0, 100% 42.538vw, 100% 100%, 0 100%); }
  .c-history__sheet::after { display: none; }
  .c-history__fv { height: 204.615vw; }
  .c-history__logo { top: 57.949vw; left: 18.692vw; width: 78.897vw; }
  .c-history__label { top: 0.923vw; left: 61.256vw; font-size: 5.128vw; letter-spacing: 0.513vw; }
  .c-history__fv-photo, .c-history-era__photo { top: calc(var(--sp-y) * var(--px)); left: calc(var(--sp-x) * var(--px)); width: calc(var(--sp-w) * var(--px)); }
  .c-history-era, .c-history-era--left { --angle: 23.67deg; height: auto; padding: 24.615vw 4.103vw 30.769vw; }
  .c-history-era__year, .c-history-era--left .c-history-era__year { top: -12.795vw; left: 32.308vw; width: 76.923vw; font-size: 20.513vw; }
  .c-history-era__line, .c-history-era--left .c-history-era__line { top: 0; left: 41.923vw; width: 63.564vw; transform-origin: 0 0; }
  /* 写真は最初の出来事のあとに並べる（ブロックの高さは --sp-h） */
  .c-history-era__photos { position: relative; inset: auto; height: calc(var(--sp-h) * var(--px)); margin: 14.359vw -4.103vw 0; }
  .c-history-entry { position: static; width: auto; }
  .c-history-entry + .c-history-entry { margin-top: 11.538vw; }
  .c-history-era__photos + .c-history-entry { margin-top: 16.667vw; }
  .c-history-entry__date, .c-history-entry--sub .c-history-entry__date { font-size: 4.103vw; }
  /* 見出しは右の余白（16px）まで使う（「青山学院購買会を吸収合併。」が1行に入るように） */
  .c-history-entry__title { margin: 5.897vw -4.103vw 0 0; font-size: 7.179vw; line-height: 1.4286; white-space: normal; }
  .c-history-entry__text, .c-history-entry--sub .c-history-entry__text { margin-top: 5.538vw; font-size: 4.103vw; line-height: 1.75; }
  .c-history-entry--sub .c-history-entry__text { margin-top: 4.256vw; }
  .c-history-end { height: auto; padding: 0 4.103vw 25.641vw; }
  .c-history-end__line { height: 15.385vw; }
  .c-history-end .c-history-era__year { margin-top: 4.103vw; }
  .c-history-end__lead { margin-top: 4.103vw; font-size: 4.103vw; line-height: 1.75; }
  .c-history-end__title { margin-top: 1.026vw; font-size: 12.308vw; line-height: 1.3; }
  .c-history-end__text { margin-top: 3.077vw; font-size: 4.103vw; line-height: 1.75; }
  .c-history-end__btn { margin-top: 10.256vw; }
  .c-history-end__btn .c-icon-arrow { right: 4.103vw; left: auto; }

  /* News・ポリシー（XD の SP：iPhone – 9〜11） */
  .l-page-body { padding-top: 10.128vw; }
  .l-page-body--news { min-height: 0; padding-bottom: 27.692vw; }
  .l-page-body--news::before { height: 296.923vw; background-image: url(../img/bg/news-list-sp.webp?v=e8473def); }
  .l-page-body--policy { padding-bottom: 20.513vw; }
  .l-page-body--policy::before { width: 65.128vw; height: 67.179vw; background-image: url(../img/bg/policy-top-sp.webp?v=9150808f); }
  .l-page-body--policy::after { display: none; }
  .l-page-body .l-container { padding-inline: 4.103vw; }
  .c-page-heading { margin-left: 4.103vw; }
  .c-page-heading__en { font-size: 10.256vw; line-height: 12.308vw; }
  .c-page-heading__ja { margin-top: 2.744vw; font-size: 4.615vw; }
  .c-news-list--page { width: auto; margin: 11.128vw 0 0; }
  .c-pager { gap: 13.846vw; margin-top: 16.103vw; padding-right: 0; font-size: 5.128vw; }
  .c-pager__list { gap: 5.385vw; }
  .c-pager__list a, .c-pager__list span { width: 5.128vw; }
  .c-pager__list [aria-current]::after { top: calc(100% + 1.538vw); height: 0.513vw; }
  .c-pager__prev, .c-pager__next { width: 5.128vw; height: 5.128vw; }
  .c-article { width: auto; margin: 0; padding: 10.385vw 0 25.256vw; }
  .c-article__date { font-size: 3.59vw; }
  .c-article__title { margin-top: 4.359vw; padding-bottom: 5.128vw; font-size: 7.179vw; line-height: 12.308vw; }
  .c-article__body { margin-top: 9.231vw; padding-inline: 0.513vw; font-size: 4.103vw; line-height: 8.205vw; }
  .c-article__body p + p { margin-top: 8.205vw; }
  .c-news-band { padding: 15.256vw 0 30.256vw; }
  .c-news-band::before { height: 148.846vw; background-image: url(../img/bg/news-detail-sp.webp?v=ce86004b); }
  .c-doc { margin-top: 16.41vw; padding: 9.949vw 4.103vw 10.256vw; font-size: 4.103vw; line-height: 8.205vw; }
  .c-doc + .c-doc { margin-top: 5.128vw; }
  .c-doc__title { font-size: 7.179vw; line-height: 10.769vw; }
  .c-doc__title + p { margin-top: 4.821vw; }
  .c-doc h3 { margin-top: 8.897vw; font-size: 5.128vw; line-height: 8.205vw; }
  .c-doc h3 + p { margin-top: 4.692vw; }
  .c-doc__list { padding-left: 5.128vw; }
  .c-doc__date { margin-top: 8.205vw; }
  .c-doc--small { margin-top: 10.256vw; padding: 7.692vw 4.103vw; }
  .c-doc-sign { margin-top: 10.256vw; font-size: 4.103vw; line-height: 8.205vw; }
  .c-doc-note { margin: 7.692vw 0 0 4.103vw; font-size: 4.103vw; line-height: 8.205vw; }

  /* 動き：浮き上がる距離を SP に合わせる。ナビの下線は SP メニューでは出さない */
  .js .u-fade-up { transform: translateY(10.256vw); }
  .l-header__ja::after { display: none; }
}