@charset "UTF-8";
/* =========================================================================
   キクコト採用ブランディング — レイアウト・クローン（モック）
   中身はすべてダミー。抽出したのは配置・余白・カラー・動きのルールのみ。
   詳細な設計意図は ../LAYOUT-SYSTEM.md を参照。
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. トークン
      3つの寸法システムを "あえて" 混在させる（元サイトの仕様）
        A. --px-scale : 段階縮小（ヒーロー以外のほぼ全域）
        B. --vw-pc    : PC相対（ヒーローのみ）
        C. --vw-sp    : SP相対（スマホ全般）
   ------------------------------------------------------------------------- */
:root {
  --color-blue: var(--c-main, #6F40FA);
  --color-white: var(--c-base, #FFFFFF);
  --color-gray: #E9E8EE;
  --color-orange: var(--c-accent, #E95D00);
  --color-deeporange: #DA5700;
  --color-btn: var(--c-accent, #FF9500);
  --color-card-advantage: #F1EFF9;
  --color-card-case: #D9D8FF;
  --color-list-bg: #F5F4F8;
  --color-case-txt: #6C669F;
  --color-date: #B3AFCA;
  --color-text: var(--c-text, #222222);

  --gradation-blue: linear-gradient(to right, #8F5EFF, #5D1CF4);
  --gradation-blue-tp: linear-gradient(to bottom, rgba(143, 94, 255, 0.8), #5D1CF4);
  --gradation-title: linear-gradient(to right, #9D4DEE, #5D00BA);

  --px-scale: 1;
  --width-content: calc(1274px * var(--px-scale));

  --vw-pc: calc(100vw / 1512);
  --vw-sp: calc(100vw / 390);

  --hover-transition: opacity 0.3s ease;
  --hover-opacity: 0.7;

  /* ヘッダー高さ：1200px以下で 113px → 72px（本文の767pxとは別の切替点） */
  --header-h: 113px;

  --color-footer-bg: #EEEEEE;
  --color-footer-line: #CCCCCC;
  --color-footer-line2: #D7D7D7;
  --color-footer-txt: #5F5F5F;
  --color-footer-dash: #0E7D3B;
  --color-drawer-bg: #F9F9F9;
  --color-drawer-line: #E5E5E5;
}

@media (min-width: 1200px) and (max-width: 1399px) { :root { --px-scale: 0.857; } }
@media (min-width: 992px)  and (max-width: 1199px) { :root { --px-scale: 0.71;  } }
@media (min-width: 768px)  and (max-width: 991px)  { :root { --px-scale: 0.548; } }
@media screen and (max-width: 1200px) { :root { --header-h: 72px; } }
@media screen and (max-width: 767px)  { :root { --width-content: calc(334 * var(--vw-sp)); } }

/* -------------------------------------------------------------------------
   1. リセット / 共通
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-body, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif);
  background: #fff;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

p { font-size: calc(15px * var(--px-scale)); line-height: 1.8; letter-spacing: 0.1em; }

.block_pc { display: block; }
.block_sp { display: none; }
.sp { display: none; }
.onlysp { display: none; }

.flex { display: flex; }
.flex.jc_c  { justify-content: center; }
.flex.jc_sb { justify-content: space-between; }
.flex.ai_fs { align-items: flex-start; }
.flex.ai_fe { align-items: flex-end; }
.flex.ai_c  { align-items: center; }

/* --- アイコン（Lucide / stroke-width 2px・絵文字は使用しない） --------- */
.ic {
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.ic-file-down {
  width: calc(32px * var(--px-scale));
  height: calc(37px * var(--px-scale));
  -webkit-mask-image: var(--lucide-file-down); mask-image: var(--lucide-file-down);
}
.ic-chevron-up {
  width: 24px; height: 24px;
  -webkit-mask-image: var(--lucide-chevron-up); mask-image: var(--lucide-chevron-up);
}
:root {
  /* Lucide Icons — stroke-width:2 / round cap・join */
  --lucide-file-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M12 18v-6"/><path d="m9 15 3 3 3-3"/></svg>');
  --lucide-chevron-up: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>');
}

/* -------------------------------------------------------------------------
   2. 見出し・ボタン（共通部品）
   ------------------------------------------------------------------------- */
.dot-title {
  font-size: calc(32px * var(--px-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: calc(16px * var(--px-scale));
}

/* 資料DL誘導：テキスト（両脇に "\ /" の斜め棒）→ ボタン の縦積み */
.download-content {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(14px * var(--px-scale));
  margin: 0 auto;
}
.download-content > p {
  font-size: calc(17px * var(--px-scale));
  text-align: center;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding-inline: calc(17px * var(--px-scale));
  position: relative;
}
.download-content > p > span { color: var(--color-orange); }
.download-content > p::before,
.download-content > p::after {
  content: "";
  width: calc(2.5px * var(--px-scale));
  height: calc(22px * var(--px-scale));
  background: var(--color-orange);
  position: absolute;
  left: 0;
  bottom: calc(4px * var(--px-scale));
  transform: rotate(-30deg);          /* 左は -30deg */
}
.download-content > p::after {
  left: auto; right: 0;
  transform: rotate(30deg);           /* 右は +30deg（左右反転） */
}

/* ボタン3種：形は共通、塗りだけ違う。左右パディングは非対称（右が広い） */
.download-button { width: fit-content; }
.download-button a {
  display: flex;
  align-items: center;
  column-gap: calc(16px * var(--px-scale));
  color: var(--color-white);
  font-size: calc(23px * var(--px-scale));
  font-weight: 700;
  line-height: calc(37px * var(--px-scale));
  letter-spacing: 0.1em;
  background: var(--color-btn);
  padding: calc(24px * var(--px-scale)) calc(60px * var(--px-scale)) calc(24px * var(--px-scale)) calc(30px * var(--px-scale));
  border-radius: calc(80px * var(--px-scale));
  position: relative;
  transition: var(--hover-transition);
}
.download-button a:hover { opacity: var(--hover-opacity); }
.download-button a::after {
  content: "";
  width: calc(9px * var(--px-scale));
  height: calc(9px * var(--px-scale));
  border-top: solid calc(2px * var(--px-scale)) var(--color-white);
  border-right: solid calc(2px * var(--px-scale)) var(--color-white);
  position: absolute;
  right: calc(26px * var(--px-scale));
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
}

.contact-button { width: fit-content; }
.contact-button a {
  display: block;
  color: var(--color-deeporange);
  font-size: calc(23px * var(--px-scale));
  font-weight: 700;
  line-height: calc(37px * var(--px-scale));
  letter-spacing: 0.1em;
  background: var(--color-white);
  padding: calc(24px * var(--px-scale)) calc(60px * var(--px-scale)) calc(24px * var(--px-scale)) calc(50px * var(--px-scale));
  border: calc(2px * var(--px-scale)) solid var(--color-deeporange);
  border-radius: calc(80px * var(--px-scale));
  position: relative;
  transition: var(--hover-transition);
}
.contact-button a:hover { opacity: var(--hover-opacity); }
.contact-button a::after {
  content: "";
  width: calc(9px * var(--px-scale));
  height: calc(9px * var(--px-scale));
  border-top: solid calc(2px * var(--px-scale)) var(--color-deeporange);
  border-right: solid calc(2px * var(--px-scale)) var(--color-deeporange);
  position: absolute;
  right: calc(26px * var(--px-scale));
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
}

.page-link { width: fit-content; margin-inline: auto; }
.page-link a {
  display: block;
  color: var(--color-deeporange);
  font-size: calc(17px * var(--px-scale));
  font-weight: 700;
  line-height: calc(22px * var(--px-scale));
  letter-spacing: 0.12em;
  background: var(--color-white);
  padding: calc(22px * var(--px-scale)) calc(60px * var(--px-scale)) calc(22px * var(--px-scale)) calc(50px * var(--px-scale));
  border: calc(2px * var(--px-scale)) solid var(--color-orange);
  border-radius: calc(60px * var(--px-scale));
  position: relative;
  transition: var(--hover-transition);
}
.page-link a:hover { opacity: var(--hover-opacity); }
.page-link a::after {
  content: "";
  width: calc(9px * var(--px-scale));
  height: calc(9px * var(--px-scale));
  border-top: solid calc(2px * var(--px-scale)) var(--color-deeporange);
  border-right: solid calc(2px * var(--px-scale)) var(--color-deeporange);
  position: absolute;
  right: calc(20px * var(--px-scale));
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
}

/* -------------------------------------------------------------------------
   3. header（固定）
      切替点は 1200px。本文（767px）とは別系統なので注意。
        1201px以上 …… 横並びナビ（高さ113px）
        1200px以下 …… 高さ72px＋ハンバーガー＋全画面ドロワー
   ------------------------------------------------------------------------- */
header.general {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  padding: 0 40px;
  background: var(--color-white);
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .logo-recruit { width: 195px; }
header .logo-recruit img { width: 195px; height: auto; }

header.general nav ul { display: flex; align-items: center; }
header.general nav ul li.par {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
/* ■ ナビの間隔は px ではなく vw。画面幅に応じて 1vw → 0.8 → 0.6 → 0.4 と段階的に詰まる */
header.general nav ul li.par a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 1vw;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  transition: color .15s linear, background-color .15s linear;
}
@media screen and (max-width: 1470px) { header.general nav ul li.par a { padding: 0 0.8vw; } }
@media screen and (max-width: 1420px) { header.general nav ul li.par a { padding: 0 0.6vw; } }
@media screen and (max-width: 1270px) { header.general nav ul li.par a { padding: 0 0.4vw; } }
@media screen and (min-width: 1201px) and (max-width: 1215px) {
  header.general nav ul li.par a { font-size: 13.5px; }
}
@media screen and (min-width: 1201px) {
  header.general nav ul li.par a:hover { color: var(--color-btn); }
}

.header_btn {
  border-radius: 4px;
  margin-left: 15px;
  color: var(--color-white) !important;
  background: var(--color-btn) !important;
  border: 2px solid var(--color-btn);
}
@media screen and (min-width: 1201px) {
  .header_btn:hover { background: var(--color-white) !important; color: var(--color-btn) !important; }
}
header .logo-partner { width: 77px; margin-left: 15px; }
header .logo-partner img { width: 77px; }
/* ■ 右端3点（CTA・提携ロゴ）の margin-left も 15 → 11 → 5 → 0 と段階的に詰まる */
@media screen and (min-width: 1270px) and (max-width: 1290px) {
  .header_btn { margin-left: 11px; }
  header .logo-partner { margin-left: 5px; }
}
@media screen and (min-width: 1230px) and (max-width: 1270px) {
  .header_btn,
  header .logo-partner { margin-left: 5px; }
}
@media screen and (min-width: 1201px) and (max-width: 1230px) {
  .header_btn,
  header .logo-partner { margin-left: 0; }
}

.sp_ham { display: none; }
.menu-trigger {
  position: relative;
  width: 32px; height: 26px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.menu-trigger span {
  position: absolute; left: 0;
  display: block; width: 100%; height: 3px;
  background: #666666; border-radius: 3px;
  transition: all .4s;
}
.menu-trigger span:nth-of-type(1) { top: 0; }
.menu-trigger span:nth-of-type(2) { top: 0; bottom: 0; margin: auto; }
.menu-trigger span:nth-of-type(3) { bottom: 0; }
.menu-trigger.active span:nth-of-type(1) { transform: translateY(12px) rotate(-45deg); }
.menu-trigger.active span:nth-of-type(2) { opacity: 0; }
.menu-trigger.active span:nth-of-type(3) { transform: translateY(-12px) rotate(45deg); }

main { padding-top: var(--header-h); }

/* -------------------------------------------------------------------------
   4. hero — このサイトで最も非対称なブロック
   ------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }

/* PC用／SP用の2枚は visibility で切替（display:none にしない＝先読みを効かせる） */
.hero-img { position: relative; }
.hero-img_pc img { aspect-ratio: 1512 / 490; object-fit: cover; }
.hero-img_sp { visibility: hidden; position: absolute; inset: 0; pointer-events: none; }
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to right, #6F40FA 0%, rgba(111,64,250,.96) 38%, rgba(111,64,250,0) 62%);
}

/* 浮遊バッジ×3：サイズ・top・回転・遅延がすべてバラバラ（＝視線の高低差） */
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
.hero-circle {
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  border: calc(2 * var(--vw-pc)) dashed rgba(111, 64, 250, .45);
  display: grid;
  place-items: center;
  color: var(--color-blue);
  font-family: var(--font-head, "DM Sans", sans-serif);
  font-size: calc(20 * var(--vw-pc));
  font-weight: 700;
  letter-spacing: .04em;
  animation: float 3s ease-in-out infinite;
}
.hero-circle.img_01 {
  width: calc(260 * var(--vw-pc));
  top: calc(51 * var(--vw-pc));
  right: calc(585 * var(--vw-pc));
  transform: rotate(0.78deg);          /* ← 極小の傾き。0degに直さない */
  animation-delay: 0s;
}
.hero-circle.img_02 {
  width: calc(207 * var(--vw-pc));
  top: calc(13 * var(--vw-pc));
  right: calc(39 * var(--vw-pc));
  animation-delay: 1.5s;
}
.hero-circle.img_03 {
  width: calc(208 * var(--vw-pc));
  top: calc(190 * var(--vw-pc));
  right: 0;                            /* ← 画面右端で切れるのが正解 */
  animation-delay: 1s;
}

/* テキストは左上寄せ（上下中央でも左右中央でもない） */
.hero_contents {
  position: absolute;
  top: calc(55 * var(--vw-pc));
  left: calc(69 * var(--vw-pc));
  z-index: 1;
}
.hero_txt {
  color: var(--color-white);
  font-size: calc(19 * var(--vw-pc));
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  display: flex;
  flex-direction: column;
  row-gap: calc(13 * var(--vw-pc));
  margin-bottom: calc(30 * var(--vw-pc));
  white-space: nowrap;
}
/* 2行目：白い長方形の上にグラデ文字（background-clip: text） */
.hero_txt span:last-of-type {
  display: block;
  width: fit-content;
  font-size: calc(24 * var(--vw-pc));
  font-weight: 700;
  line-height: calc(32.35 * var(--vw-pc));
  background: var(--gradation-blue);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: calc(10 * var(--vw-pc)) calc(14 * var(--vw-pc));
  position: relative;
}
.hero_txt span:last-of-type::before {
  content: "";
  width: 100%; height: 100%;
  background: var(--color-white);
  position: absolute; top: 0; left: 0;
  z-index: -1;
}
.hero_title { width: calc(568 * var(--vw-pc)); }

/* ボタン群：左＝縦積み2段／右＝ボタン単体 を「下端揃え」で並べる → 上端はガタつく */
.hero_buttons {
  column-gap: calc(22 * var(--vw-pc));
  position: absolute;
  bottom: calc(54 * var(--vw-pc));
  left: calc(69 * var(--vw-pc));
  z-index: 1;
}
.hero_buttons .download-content { row-gap: calc(2.5 * var(--vw-pc)); margin: 0; }
.hero_buttons .download-content > p {
  color: var(--color-white);
  font-size: calc(15 * var(--vw-pc));
  letter-spacing: 0.1em;
  line-height: calc(31 * var(--vw-pc));
  padding-inline: calc(15 * var(--vw-pc));
}
.hero_buttons .download-content > p::before,
.hero_buttons .download-content > p::after {
  height: calc(15 * var(--vw-pc));
  background: var(--color-white);
  bottom: calc(7 * var(--vw-pc));
}

@media screen and (min-width: 768px) {
  .hero_buttons .download-button a {
    font-size: calc(17 * var(--vw-pc));
    line-height: calc(18 * var(--vw-pc));
    padding: calc(13 * var(--vw-pc)) calc(52 * var(--vw-pc)) calc(13 * var(--vw-pc)) calc(23 * var(--vw-pc));
    column-gap: calc(15 * var(--vw-pc));
    border-radius: calc(59 * var(--vw-pc));
  }
  .hero_buttons .download-button a .ic-file-down {
    width: calc(32 * var(--vw-pc));
    height: calc(37 * var(--vw-pc));
  }
  .hero_buttons .download-button a::after {
    width: calc(9 * var(--vw-pc));
    height: calc(9 * var(--vw-pc));
    transform: rotate(135deg) translateY(-50%);   /* ← ヒーロー内だけ矢印が下向き */
    top: 37%;
    right: calc(28 * var(--vw-pc));
    border-top: calc(2 * var(--vw-pc)) solid var(--color-white);
    border-right: calc(2 * var(--vw-pc)) solid var(--color-white);
  }
  .hero_buttons .contact-button a {
    font-size: calc(17 * var(--vw-pc));
    line-height: calc(37 * var(--vw-pc));
    border-radius: calc(59 * var(--vw-pc));
    padding: calc(13 * var(--vw-pc)) calc(52 * var(--vw-pc)) calc(13 * var(--vw-pc)) calc(42 * var(--vw-pc));
    border: none;                                  /* ← ヒーロー内は枠なし */
  }
  .hero_buttons .contact-button a::after {
    width: calc(9 * var(--vw-pc));
    height: calc(9 * var(--vw-pc));
    border-top: calc(2 * var(--vw-pc)) solid var(--color-orange);
    border-right: calc(2 * var(--vw-pc)) solid var(--color-orange);
    right: calc(25 * var(--vw-pc));
  }
}

/* -------------------------------------------------------------------------
   5. callout（課題 → 必要性 → メリット）
   ------------------------------------------------------------------------- */
/* 上ブロック（白）：上30 / 下33 の変則パディング */
.callout .box:first-of-type {
  padding-block: calc(30px * var(--px-scale)) calc(33px * var(--px-scale));
  position: relative;
}
/* ■ セクションをまたぐ白い三角（bottom:-60px でほぼ全高がはみ出す） */
.callout .box:first-of-type::before {
  content: "";
  width: calc(225px * var(--px-scale));
  height: calc(61px * var(--px-scale));
  background: var(--color-white);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  bottom: calc(-60px * var(--px-scale));
  left: 50%;
  transform: translateX(-50%);
}
/* 下ブロック（グレー）：上105 / 下80 ← 上が重い */
.callout .box:last-of-type {
  padding-block: calc(105px * var(--px-scale)) calc(80px * var(--px-scale));
  background: var(--color-gray);
}

.callout-title {
  font-size: calc(34px * var(--px-scale));
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.06em;
  margin-bottom: calc(35px * var(--px-scale));
}
.callout-title_sm {
  font-size: calc(22px * var(--px-scale));
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.12em;
  margin-bottom: calc(20px * var(--px-scale));
}

/* イラスト119px ＋ 吹き出し336px×3 の不揃いな横並び（均等4分割にしない） */
.callout-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  column-gap: calc(30px * var(--px-scale));
}
.callout-item:first-of-type { width: calc(119px * var(--px-scale)); }
.callout-item:not(:first-of-type) {
  width: calc(336px * var(--px-scale));
  background: var(--color-blue);
  border-radius: calc(14px * var(--px-scale));
  padding-block: calc(20px * var(--px-scale));
  position: relative;
}
/* ■ 吹き出しのしっぽ：中央ではなく「左から48px」／ rotate(-130deg) ／ 27px下へ突出 */
.callout-item:not(:first-of-type)::before {
  content: "";
  width: calc(32px * var(--px-scale));
  height: calc(49px * var(--px-scale));
  background: var(--color-blue);
  transform: rotate(-130deg);
  position: absolute;
  left: calc(48px * var(--px-scale));
  bottom: calc(-27px * var(--px-scale));
  clip-path: polygon(50% 0, 100% 30%, 0 100%);
}
.callout-item p {
  font-size: calc(18px * var(--px-scale));
  font-weight: 600;
  color: var(--color-white);
  text-align: center;
  letter-spacing: 0.08em;
}

.callout-listNecessity {
  max-width: var(--width-content);
  column-gap: calc(40px * var(--px-scale));
  margin: 0 auto calc(30px * var(--px-scale));
}
.callout-itemNecessity {
  width: 100%;
  height: calc(115px * var(--px-scale));
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: calc(28px * var(--px-scale));
  background: var(--color-white);
  border-radius: calc(14px * var(--px-scale));
}
.callout-itemNecessity span {
  font-family: var(--font-head, "DM Sans", sans-serif);
  color: var(--color-blue);
  font-weight: 700;
  font-size: calc(30px * var(--px-scale));
  letter-spacing: 0.06em;
}
.callout-itemNecessity p {
  font-weight: 500;
  font-size: calc(16px * var(--px-scale));
  line-height: 1.5;
  letter-spacing: 0.1em;
  max-width: calc(251px * var(--px-scale));
}

/* ■ グラデ見出し：下線が「右52%だけ」／ 下マージン90px（最大の間） */
.callout-subtitle {
  width: fit-content;
  font-size: calc(30px * var(--px-scale));
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: calc(24px * var(--px-scale));
  background: var(--gradation-title);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0 auto calc(90px * var(--px-scale));
  border-radius: calc(14px * var(--px-scale));
  padding-block: calc(28px * var(--px-scale));
  position: relative;
}
.callout-subtitle::before {
  content: "";
  width: 52%;
  height: calc(5px * var(--px-scale));
  background: var(--gradation-title);
  position: absolute;
  right: 0;
  bottom: 0;
}
.callout-subtitle span { font-size: calc(40px * var(--px-scale)); }

/* ■ メリットカード：四辺すべて違うパディング ＋ 上へ98px飛び出す装飾 */
.callout-merit {
  max-width: var(--width-content);
  background: var(--color-white);
  border-radius: calc(18px * var(--px-scale));
  padding: calc(40px * var(--px-scale)) calc(27px * var(--px-scale)) calc(60px * var(--px-scale)) calc(60px * var(--px-scale));
  margin: 0 auto calc(50px * var(--px-scale));
  position: relative;
}
.callout-merit::before {
  content: "";
  width: calc(137px * var(--px-scale));
  height: calc(160px * var(--px-scale));
  background: url('https://placehold.co/274x320/E9E8EE/6F40FA?text=ILLUST') no-repeat center / contain;
  position: absolute;
  top: calc(-98px * var(--px-scale));
  right: calc(35px * var(--px-scale));
}
.callout-merit > p {
  font-size: calc(17px * var(--px-scale));
  font-weight: 500;
  letter-spacing: 0.12em;
  margin-bottom: calc(56px * var(--px-scale));
}
/* ■ 左右非対称の2カラム（424 / calc(100% - 453) → 間の空きは29px） */
.callout-merit .flex-box:first-of-type { width: calc(424px * var(--px-scale)); }
.callout-merit .flex-box:last-of-type  { width: calc(100% - calc(453px * var(--px-scale))); }
.callout-merit .flex-box:first-of-type h3 {
  font-weight: 700;
  font-size: calc(25px * var(--px-scale));
  line-height: 1;
  color: var(--color-blue);
  letter-spacing: 0.06em;
  border-left: solid calc(5px * var(--px-scale));
  padding-left: calc(15px * var(--px-scale));
  margin-bottom: calc(36px * var(--px-scale));
}
.callout-merit_list {
  background: var(--color-list-bg);
  padding: calc(22px * var(--px-scale)) calc(26px * var(--px-scale));
}
.callout-merit_item {
  font-size: calc(18px * var(--px-scale));
  font-weight: 600;
  line-height: calc(40px * var(--px-scale));
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  column-gap: calc(12px * var(--px-scale));
}
.callout-merit_item:not(:last-of-type) { margin-bottom: calc(6px * var(--px-scale)); }
.callout-merit_item::before {
  content: "";
  flex-shrink: 0;
  width: calc(24px * var(--px-scale));
  height: calc(24px * var(--px-scale));
  border-radius: 50%;
  background: var(--color-blue);
}

/* -------------------------------------------------------------------------
   6. advantage（左右ジグザグ）
   ------------------------------------------------------------------------- */
.advantage { padding-block: calc(88px * var(--px-scale)) calc(80px * var(--px-scale)); }
.advantage .dot-title { margin-bottom: calc(74px * var(--px-scale)); }
.advantage-list { max-width: var(--width-content); margin: 0 auto; }

.advantage-item {
  background: var(--color-card-advantage);
  border-radius: calc(18px * var(--px-scale));
  padding: calc(44px * var(--px-scale)) calc(82px * var(--px-scale));
}
.advantage-item:not(:last-of-type) { margin-bottom: calc(40px * var(--px-scale)); }
.advantage-item .flex-box { max-width: calc(503px * var(--px-scale)); }

/* ■ 2番目だけパディングもカラム比率も違う（465 / 630 の非対称） */
.advantage-item:nth-of-type(2) {
  padding-inline: calc(50px * var(--px-scale)) calc(63px * var(--px-scale));
  position: relative;
}
.advantage-item:nth-of-type(2) .flex-box:first-of-type { max-width: calc(465px * var(--px-scale)); }
.advantage-item:nth-of-type(2) .flex-box:last-of-type  { max-width: calc(630px * var(--px-scale)); }
/* ■ 角に貼り付く装飾（right だけ px-scale をかけない生の14px） */
.advantage-item:nth-of-type(2)::before {
  content: "";
  width: calc(94px * var(--px-scale));
  height: calc(102px * var(--px-scale));
  background: url('https://placehold.co/188x204/F1EFF9/6F40FA?text=ILLUST') no-repeat center / contain;
  position: absolute;
  right: 14px;
  bottom: 0;
}

.advantage-item_point {
  font-family: var(--font-head, "Albert Sans", sans-serif);
  width: fit-content;
  color: var(--color-white);
  font-size: calc(20px * var(--px-scale));
  font-weight: 700;
  line-height: calc(30px * var(--px-scale));
  letter-spacing: 0.06em;
  background: var(--gradation-blue);
  padding: calc(7px * var(--px-scale)) calc(18px * var(--px-scale));
  border-radius: calc(50px * var(--px-scale));
  margin-bottom: calc(14px * var(--px-scale));
}
.advantage-item_point span { font-size: calc(26px * var(--px-scale)); }

.advantage-item h3 {
  color: var(--color-blue);
  font-size: calc(27px * var(--px-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
  padding-bottom: calc(19px * var(--px-scale));
  position: relative;
  white-space: nowrap;                 /* ← PCでは折り返さない */
}
.advantage-item_txt {
  letter-spacing: 0.1em;
  padding-top: calc(19px * var(--px-scale));
  border-top: 3px solid var(--color-white);
}
.advantage-item img { width: 97.81312%; }   /* ← 100%でも98%でもない半端な値 */

/* 事例カード2枚（1枚目と2枚目で左右パディングが違う） */
.advantage-companyItem {
  width: calc((100% - calc(26px * var(--px-scale))) / 2);
  background: var(--color-card-case);
  padding: calc(24px * var(--px-scale)) calc(22px * var(--px-scale));
  border-radius: calc(12px * var(--px-scale));
}
.advantage-companyItem:last-of-type { padding-inline: calc(14px * var(--px-scale)); }
.advantage-companyItem_img {
  width: min(100%, calc(256px * var(--px-scale)));
  margin: 0 auto calc(22px * var(--px-scale));
}
.advantage-companyItem_img img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(6px * var(--px-scale)); }
.advantage-companyItem_txt {
  color: var(--color-case-txt);
  font-size: calc(18px * var(--px-scale));
  font-weight: 500;
  line-height: calc(42px * var(--px-scale));
  letter-spacing: 0.12em;
  padding-left: calc(4px * var(--px-scale));
  position: relative;
  white-space: nowrap;
}
/* 箇条書きの点：left:-4px で枠の外側にはみ出す */
.advantage-companyItem_txt::before {
  content: "";
  width: calc(4px * var(--px-scale));
  height: calc(4px * var(--px-scale));
  background: var(--color-case-txt);
  border-radius: 100%;
  position: absolute;
  left: calc(-4px * var(--px-scale));
  bottom: calc(18px * var(--px-scale));
}
.advantage-companyItem:last-of-type .advantage-companyItem_txt:first-of-type { font-size: calc(17px * var(--px-scale)); }
.advantage-companyItem:last-of-type .advantage-companyItem_txt:last-of-type  { font-size: calc(16px * var(--px-scale)); letter-spacing: 0.05em; }
/* 数値は「約=27 / 1.9=38 / 倍=27」の3段階サイズ差 */
.advantage-companyItem_txt .lg   { color: var(--color-blue); font-size: calc(27px * var(--px-scale)); font-weight: 700; }
.advantage-companyItem_txt .x-lg { font-family: var(--font-head, "Albert Sans", serif); color: var(--color-blue); font-size: calc(38px * var(--px-scale)); font-weight: 700; letter-spacing: 0; }
.advantage-companyItem:last-of-type .advantage-companyItem_txt:last-of-type .lg { font-size: calc(20px * var(--px-scale)); letter-spacing: 0; }

/* -------------------------------------------------------------------------
   7. cta（グレー帯・下端揃え）
   ------------------------------------------------------------------------- */
.cta {
  column-gap: calc(22px * var(--px-scale));
  background: var(--color-gray);
  padding-block: calc(70px * var(--px-scale));
}
.cta .download-content { margin: 0; }

/* -------------------------------------------------------------------------
   8. plan（紫グラデ背景・カード2枚）
   ------------------------------------------------------------------------- */
.plan {
  background: var(--gradation-blue);
  padding-block: calc(94px * var(--px-scale)) calc(90px * var(--px-scale));
}
.plan .dot-title { color: var(--color-white); margin-bottom: calc(83px * var(--px-scale)); }
.plan .flex {
  max-width: var(--width-content);
  column-gap: calc(60px * var(--px-scale));
  margin: 0 auto calc(48px * var(--px-scale));
}
.plan .flex-box {
  width: 50%;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--color-white);
  border-radius: calc(14px * var(--px-scale));
  padding: calc(40px * var(--px-scale)) calc(45px * var(--px-scale)) calc(50px * var(--px-scale));
}
.plan .flex-box h3 {
  color: var(--color-blue);
  font-size: calc(23px * var(--px-scale));
  font-weight: 700;
  line-height: calc(33px * var(--px-scale));
  letter-spacing: 0.08em;
  border-left: calc(5px * var(--px-scale)) solid var(--color-blue);
  padding-left: calc(15px * var(--px-scale));
  margin-bottom: calc(32px * var(--px-scale));
}
/* flex:1 が入ることで、文章量が違ってもボタン位置が2枚で揃う */
.plan-img { display: flex; align-items: center; flex: 1; margin-bottom: calc(32px * var(--px-scale)); }
.plan .flex-box p {
  letter-spacing: 0.1em;
  padding-top: calc(30px * var(--px-scale));
  border-top: calc(3px * var(--px-scale)) solid var(--color-gray);
  margin-bottom: calc(26px * var(--px-scale));
}
.plan-button { width: fit-content; margin-inline: auto; }
.plan-button a {
  display: block;
  color: var(--color-white);
  font-size: calc(17px * var(--px-scale));
  font-weight: 700;
  text-align: center;
  line-height: calc(22px * var(--px-scale));
  letter-spacing: 0.12em;
  background: var(--color-btn);
  padding: calc(14px * var(--px-scale)) calc(51px * var(--px-scale)) calc(14px * var(--px-scale)) calc(42px * var(--px-scale));
  border-radius: calc(59px * var(--px-scale));
  position: relative;
  transition: var(--hover-transition);
}
.plan-button a:hover { opacity: var(--hover-opacity); }
.plan-button a::after {
  content: "";
  width: calc(9px * var(--px-scale));
  height: calc(9px * var(--px-scale));
  border-top: solid calc(2px * var(--px-scale)) var(--color-white);
  border-right: solid calc(2px * var(--px-scale)) var(--color-white);
  position: absolute;
  right: calc(20px * var(--px-scale));
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
}
.plan > p {
  color: var(--color-white);
  text-align: center;
  font-size: calc(30px * var(--px-scale));
  font-weight: 700;
  line-height: calc(50px * var(--px-scale));
  letter-spacing: 0.1em;
}

/* -------------------------------------------------------------------------
   9. flow
   ------------------------------------------------------------------------- */
.flow { padding-block: calc(90px * var(--px-scale)); }
.flow .dot-title { margin-bottom: calc(50px * var(--px-scale)); }
.flow-img { max-width: calc(1012px * var(--px-scale)); margin: 0 auto calc(36px * var(--px-scale)); }
.flow-txt {
  font-size: calc(16px * var(--px-scale));
  font-weight: 500;
  text-align: center;
  line-height: calc(29px * var(--px-scale));
  letter-spacing: 0.1em;
  margin-bottom: calc(24px * var(--px-scale));
}
.flow-contact .contact-button { margin: 0 auto calc(24px * var(--px-scale)); }
.flow-contact p {
  font-size: calc(13px * var(--px-scale));
  line-height: calc(22px * var(--px-scale));
  letter-spacing: 0.12em;
  text-align: center;
}

/* -------------------------------------------------------------------------
   10. download（グレー・3カラム）
   ------------------------------------------------------------------------- */
.download { background: var(--color-gray); padding-block: calc(80px * var(--px-scale)); }
.download .dot-title { margin-bottom: calc(64px * var(--px-scale)); }
.download .flex { width: var(--width-content); margin-inline: auto; }
.download-article {
  width: calc(398px * var(--px-scale));
  display: flex;
  flex-direction: column;
  row-gap: calc(20px * var(--px-scale));
}
.download-article figure { width: 100%; border-radius: calc(14px * var(--px-scale)); overflow: hidden; }
.download-article figure img {
  width: 100%;
  height: calc(220px * var(--px-scale));
  object-fit: cover;
  object-position: center;
  border-radius: calc(14px * var(--px-scale));
  transition: transform 1s;
}
/* flex:1 → 文章の行数が違ってもボタンが3枚で一直線に揃う */
.download-article_txt { flex: 1; font-weight: 500; text-align: center; line-height: calc(28px * var(--px-scale)); }
.download .page-link a {
  color: var(--color-white);
  background: var(--color-btn);
  border: none;
}
.download .page-link a::after {
  border-top: solid calc(2px * var(--px-scale)) var(--color-white);
  border-right: solid calc(2px * var(--px-scale)) var(--color-white);
  right: calc(26px * var(--px-scale));
}

/* -------------------------------------------------------------------------
   11. column（PC3カラム / SPスライダー）
   ------------------------------------------------------------------------- */
.column { padding-block: calc(80px * var(--px-scale)); }
.column .dot-title { margin-bottom: calc(54px * var(--px-scale)); }
/* ■ 最大幅が他より狭い（1154px） */
.column .flex {
  max-width: calc(1154px * var(--px-scale));
  column-gap: calc(40px * var(--px-scale));
  margin: 0 auto calc(30px * var(--px-scale));
}
/* ■ 幅の計算(20px間隔)と実際のgap(40px)が食い違い、3枚がわずかに詰まる */
.column-article {
  width: calc((100% - calc(20px * var(--px-scale)) * 2) / 3);
  display: flex;
  flex-direction: column;
}
/* flex:1 → タイトルが1行でも2行でも日付が下端で揃う */
.column-article figure { flex: 1; margin-bottom: calc(15px * var(--px-scale)); overflow: hidden; }
.column-article figure img {
  width: 100%;
  height: calc(250px * var(--px-scale));
  object-fit: cover;
  transition: transform 1s;             /* ← ゆっくり1秒 */
}
.column-article_txt { line-height: 1.6; }
.column-article_date {
  color: var(--color-date);
  font-size: 12px;
  line-height: calc(30px * var(--px-scale));
  font-weight: 500;
  letter-spacing: 0.06em;
}
.column-article:hover .column-article_txt { text-decoration: underline; }
.column-article:hover figure img { transform: scale(1.3); }

/* -------------------------------------------------------------------------
   12. page top（右下固定・オレンジの丸）
      初期は非表示。スクロール量が 300px を超えたら JS が .is-visible を付ける
   ------------------------------------------------------------------------- */
.page_top { display: none; }
.page_top.is-visible { display: block; }
.page_top a {
  position: fixed;
  right: 30px; bottom: 60px;
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  background: var(--color-btn);
  border-radius: 50%;
  color: #fff;
  z-index: 9999;
  cursor: pointer;
  transition: var(--hover-transition);
}
.page_top a:hover { opacity: var(--hover-opacity); }

/* =========================================================================
   13. footer
      ■ 切替点は 1200px（本文の767pxとは別系統）
          1201px以上 …… 横並び（ロゴ左＋ナビ右）
          1200px以下 …… 全幅の縦積みアコーディオン
   ========================================================================= */
footer {
  background: var(--color-footer-bg);
  border-top: 1px solid #EEEEEE;
  line-height: 26px;
}

/* --- .infoz（= .wrap_1200）：ロゴ列とナビ列を両端に振り分ける ------------- */
footer .infoz {
  width: 1200px;
  max-width: 1200px;
  margin-inline: auto;
  padding: 80px 20px 40px;
  display: flex;
  justify-content: space-between;
}

/* ロゴ列（幅290px固定） */
footer .infoz .logo { width: 290px; }
footer .infoz .logo > a img { width: 290px; }
/* ■ ロゴとバナーの間は margin ではなく .cpz の padding 50px で空ける */
footer .cpz { padding: 50px 0; }
footer .cpz .footer-icons figure {
  display: flex;
  align-items: center;
  justify-content: left;   /* 中央ではなく左揃え */
}
/* ■ バナーは3つとも幅が違う（40 / 54 / 33px）。間隔は margin-left 30px */
footer .cpz figure a + a img { margin-left: 30px; }
footer .footer_link_ebisu { width: 40px; }
footer .footer_link_jeki  { width: 54px; }
footer .footer_link_fb    { width: 33px; }

/* ナビ列：右寄せ。列と列の間は gap ではなく margin-left 45px */
footer .nv_wrap {
  display: flex;
  justify-content: flex-end;
}
footer .nv_wrap .nv:not(:first-of-type) { margin-left: 45px; }
footer .nv { position: relative; }
footer .nv > a {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}
footer .nv ul li a {
  position: relative;
  display: block;
  padding-left: 14px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-footer-txt);
}
/* ■ 子リンクの頭には「・」でも「-」でもなく、6×1px の緑の横棒（下線）を敷く */
footer .nv ul li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 1px;
  border-bottom: 1px solid var(--color-footer-dash);
}
footer .nv a:hover { color: #00AF31; }

/* PC/SPで出し分けるブロック（切替点は 1200px） */
footer .onlysp,
footer .cpz.icon-container.sp { display: none; }
/* アコーディオンの＋ボタン（1200px以下でのみ表示） */
footer .p_m { display: none; }

/* --- コピーライト帯：float レイアウト（flex ではない） ------------------- */
footer .pc-copy {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 40px 45px;
}
footer .footer-links {
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid var(--color-footer-line);
  font-size: 14px;
  color: var(--color-footer-txt);
}
footer .footer-links ul::after { content: ""; display: block; clear: both; }
footer .left-text-footer  { float: left; margin-right: 35px; }
footer .right-text-footer { float: right; }
footer .footer-links a:hover { color: #00AF31; }

/* =========================================================================
   14. 1200px以下 — ヘッダーとフッターだけ先に切り替わる「中間状態」
      ■ 本文はまだPCレイアウト（--px-scale で縮小）のまま。
        ヘッダーとフッターだけがスマホ的な形になる、このサイト独自の中間段階。
        タブレット実機はここに入る（後述の viewport.js により幅1200px扱い）。
   ========================================================================= */
@media screen and (max-width: 1200px) {

  /* --- header：高さ72px＋ハンバーガー＋全画面ドロワー --- */
  header.general {
    height: 72px;
    padding: 22px 20px 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .sp_ham {
    display: block;
    width: 60px; height: 60px;
    position: absolute;
    top: 0.35rem; right: 0.8rem;
    background-color: transparent;
    z-index: 9999;
  }
  .menu-trigger {
    transform: scale(.75);
    position: relative;
    width: 32px; height: 26px;
    top: 16px; left: 50%;
    margin: 0 0 0 -16px;
  }

  header.general nav {
    display: none;                       /* JSで slideToggle 相当の開閉 */
    width: 100%;
    height: calc(100vh - 70px);
    position: absolute;
    top: 72px; left: 0;
    z-index: 9999;
    overflow-y: auto;
    background: var(--color-drawer-bg);
    transform: none;
    padding: 0;
  }
  header.general nav.open { display: block; }
  header.general nav ul { display: block; width: 100%; }
  header.general nav ul li.par { display: block; height: auto; }
  header.general nav ul li.par a {
    display: block;
    width: 100%; height: auto;
    padding: 20px 0 20px 20px;
    font-size: 14px;
    background-color: var(--color-drawer-bg);
    border-bottom: 1px solid var(--color-drawer-line);
    transition: none;
  }
  /* ドロワー内のCTA：左右で余白が非対称（左0・右40px）のまま */
  .header_btn_container { background-color: var(--color-drawer-bg); }
  header.general nav ul li.par a.header_btn {
    width: calc(100% - 40px);
    margin: 40px 0;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
  }
  /* 最後の提携ロゴはドロワーでは出さない */
  header.general nav ul li.par:last-of-type { display: none; }

  /* --- footer：全幅の縦積みアコーディオン --- */
  footer .infoz {
    width: 100%;
    max-width: 100%;
    display: block;
    padding: 50px 0 0;
  }
  footer .infoz .nv_wrap {
    display: block;
    padding: 0 20px;
    margin-bottom: 25px;
  }
  footer .infoz .nv_wrap .nv:not(:first-of-type) { margin-left: 0; }

  /* ロゴはPC用を隠し、ナビの「後ろ」に置いたSP用を出す＝上下の順序が入れ替わる */
  footer .infoz .logo.onlypc { display: none; }
  footer .onlysp { display: block; }
  footer .infoz .logo.onlysp {
    width: 100%;
    padding: 30px 0;
  }
  footer .infoz .logo.onlysp > a img { width: 290px; margin: 0 auto; }
  footer .logo-footer { display: block; margin-bottom: 25px; }

  /* 見出しは全幅1行。下線で区切る */
  footer .nv > a {
    display: block;
    padding: 20px 0.8rem 20px 0;
    margin-bottom: 0;
    font-size: 14px;
    border-bottom: 1px solid var(--color-footer-line2);
  }
  footer .nv ul { display: none; }        /* ← 折りたたみ。JSで開閉 */
  footer .nv.is-open ul { display: block; }
  footer .nv ul li a {
    padding: 20px 0.8rem 20px 3rem;
    border-bottom: 1px solid var(--color-footer-line2);
  }
  footer .nv ul li a::before { content: none; }

  /* ■ ＋ / − トグル：2本の棒を重ね、片方を90度回して「＋」、開いたら消して「−」 */
  footer .p_m {
    display: block;
    width: 100%; height: 57px;
    position: absolute;
    right: 0; top: 0;
    cursor: pointer;
  }
  footer .p_m aside { display: block; width: 100%; height: 100%; position: relative; z-index: 999; }
  footer .p_m aside::before,
  footer .p_m aside::after {
    content: "";
    display: block;
    position: absolute;
    top: 26px; right: 0.8rem;
    width: 15px; height: 2px;
    background-color: #999;
    transition: .2s;
  }
  footer .p_m aside::before { transform: rotate(90deg); }
  footer .p_m aside.act_on::before { transform: rotate(0deg); }
  footer .p_m aside.act_on::after  { background-color: transparent; }

  /* バナーはPC用ブロックを隠し、SP用ブロックを中央寄せで出す */
  footer .cpz.icon-container.pc { display: none; }
  footer .cpz.icon-container.sp { display: block; }
  footer .cpz { padding: 24px 0 0; }
  footer .cpz .footer-icons figure {
    padding-bottom: 24px;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #EEEEEE;
  }

  /* コピーライト帯：float を解除して中央揃えに */
  footer .left-text-footer.onlypc { display: none; }
  footer .left-text-footer { float: none; display: block; margin-left: 0; }
  footer .right-text-footer { float: none; text-align: center; }
  footer .nv_wrap .onlysp { padding-top: 20px; }
}

/* =========================================================================
   15. SP（767px以下） — 並び替えルール
   ※ 768–1199px にタブレット専用レイアウトは存在しない。
     元サイトは JS で <meta viewport> を width=1200px に固定し、PC版を縮小表示する。
   ========================================================================= */
@media screen and (max-width: 767px) {

  /* --- 共通 --- */
  p { font-size: calc(14 * var(--vw-sp)); line-height: calc(26 * var(--vw-sp)); }
  .block_pc { display: none; }
  .block_sp { display: block; }
  .sp { display: inline; }
  .flex { flex-direction: column; }        /* すべての横並びが縦積みに */

  .dot-title { font-size: calc(26 * var(--vw-sp)); line-height: calc(42 * var(--vw-sp)); }

  .download-content { row-gap: calc(14 * var(--vw-sp)); }
  .download-content > p {
    font-size: calc(14 * var(--vw-sp));
    line-height: calc(18 * var(--vw-sp));
    padding-inline: calc(16 * var(--vw-sp));
  }
  .download-content > p::before,
  .download-content > p::after { height: calc(34 * var(--vw-sp)); bottom: calc(1 * var(--vw-sp)); }

  .download-button { width: calc(268 * var(--vw-sp)); }
  .download-button a {
    font-size: calc(18 * var(--vw-sp));
    line-height: 1;
    column-gap: calc(13 * var(--vw-sp));
    padding: calc(14 * var(--vw-sp)) 0 calc(14 * var(--vw-sp)) calc(24 * var(--vw-sp));
  }
  .download-button a .ic-file-down { width: calc(26 * var(--vw-sp)); height: calc(30 * var(--vw-sp)); }
  .contact-button { width: calc(268 * var(--vw-sp)); }
  .contact-button a {
    font-size: calc(18 * var(--vw-sp));
    line-height: calc(30 * var(--vw-sp));
    padding: calc(14 * var(--vw-sp)) 0 calc(14 * var(--vw-sp)) calc(72 * var(--vw-sp));
    border: none;
  }
  .page-link a {
    font-size: calc(16 * var(--vw-sp));
    line-height: calc(22 * var(--vw-sp));
    padding: calc(16 * var(--vw-sp)) calc(60 * var(--vw-sp)) calc(16 * var(--vw-sp)) calc(50 * var(--vw-sp));
  }
  .page-link a::after { width: calc(9 * var(--vw-sp)); height: calc(9 * var(--vw-sp)); right: calc(20 * var(--vw-sp)); }

  /* --- header：ロゴだけSP幅に縮む（形は1200px以下の指定を引き継ぐ） --- */
  header .logo-recruit { width: calc(150 * var(--vw-sp)); }
  header .logo-recruit img { width: 100%; }

  /* --- hero：縦長画像／テキスト上部中央／ボタンは画面下の紫グラデ帯 --- */
  .hero-img_pc { visibility: hidden; position: absolute; inset: 0; pointer-events: none; }
  .hero-img_sp { visibility: visible; position: relative; inset: auto; pointer-events: auto; }
  .hero-img_sp img { aspect-ratio: 390 / 700; object-fit: cover; }
  .hero-img_sp .hero-veil {
    background: linear-gradient(to bottom, #6F40FA 0%, rgba(111,64,250,.9) 26%, rgba(111,64,250,.15) 52%, rgba(111,64,250,.15) 100%);
  }

  @keyframes float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(min(calc(-8 * var(--vw-sp)), -8px)); }
    100% { transform: translateY(0); }
  }
  .hero-circle {
    font-size: calc(13 * var(--vw-sp));
    border-width: calc(2 * var(--vw-sp));
  }
  .hero-circle.img_01 { width: calc(159 * var(--vw-sp)); top: calc(174 * var(--vw-sp)); right: calc(220 * var(--vw-sp)); }
  .hero-circle.img_02 { width: calc(125 * var(--vw-sp)); top: calc(180 * var(--vw-sp)); right: calc(84  * var(--vw-sp)); }
  .hero-circle.img_03 { width: calc(115 * var(--vw-sp)); top: calc(255 * var(--vw-sp)); right: 0; }

  .hero_contents { top: calc(22 * var(--vw-sp)); left: 50%; transform: translateX(-50%); }
  .hero_title { width: calc(334 * var(--vw-sp)); }
  .hero_txt {
    font-size: calc(13 * var(--vw-sp));
    line-height: calc(19 * var(--vw-sp));
    margin-bottom: calc(13 * var(--vw-sp));
  }
  .hero_txt span:last-of-type {
    font-size: calc(15 * var(--vw-sp));
    line-height: calc(32 * var(--vw-sp));
    letter-spacing: 0.05em;
    padding-inline: calc(7 * var(--vw-sp));
    margin-top: 0;
  }
  .hero_buttons {
    width: 100%;
    row-gap: calc(16 * var(--vw-sp));
    background: var(--gradation-blue-tp);
    padding-block: calc(8 * var(--vw-sp)) calc(20 * var(--vw-sp));
    bottom: 0;
    left: 0;
  }
  .hero_buttons.flex.ai_fe { align-items: center; }
  .hero_buttons .download-content { row-gap: calc(2 * var(--vw-sp)); }
  .hero_buttons .download-content > p {
    font-size: calc(14 * var(--vw-sp));
    line-height: calc(31 * var(--vw-sp));
    padding-inline: calc(13.5 * var(--vw-sp));
  }
  .hero_buttons .download-content > p::before,
  .hero_buttons .download-content > p::after {
    width: calc(2.5 * var(--vw-sp));
    height: calc(13 * var(--vw-sp));
    bottom: calc(7 * var(--vw-sp));
  }
  .hero_buttons .download-button a::after {
    width: calc(9 * var(--vw-sp)); height: calc(9 * var(--vw-sp));
    transform: rotate(135deg); top: 42%; right: calc(21 * var(--vw-sp));
  }
  .hero_buttons .contact-button a::after {
    width: calc(9 * var(--vw-sp)); height: calc(9 * var(--vw-sp)); right: calc(28 * var(--vw-sp));
  }

  /* --- callout --- */
  .callout .box:first-of-type { padding-block: calc(34 * var(--vw-sp)) calc(22 * var(--vw-sp)); }
  .callout .box:first-of-type::before {
    width: calc(134 * var(--vw-sp)); height: calc(38 * var(--vw-sp)); bottom: calc(-37 * var(--vw-sp));
  }
  .callout .box:last-of-type { padding-block: calc(55 * var(--vw-sp)) calc(40 * var(--vw-sp)); }
  .callout-title {
    font-size: calc(26 * var(--vw-sp)); line-height: calc(35 * var(--vw-sp));
    letter-spacing: 0.12em; margin-bottom: calc(20 * var(--vw-sp));
  }
  .callout-title._merit { letter-spacing: 0.06em; margin-bottom: calc(16 * var(--vw-sp)); }
  .callout-title_sm {
    font-size: calc(22 * var(--vw-sp)); letter-spacing: 0.12em;
    line-height: 1; margin-bottom: calc(20 * var(--vw-sp));
  }

  /* ■ 4列グリッドのひし形（ダイヤ）配置：1つ → 2つ → 1つ */
  .callout-list {
    width: var(--width-content);
    display: grid;
    justify-content: space-between;
    column-gap: calc(20 * var(--vw-sp));
    row-gap: calc(18 * var(--vw-sp));
    margin-inline: auto;
  }
  .callout-item:nth-of-type(2) { grid-column: 2 / 4; grid-row: 1 / 2; }  /* 上段・中央 */
  .callout-item:nth-of-type(3) { grid-column: 1 / 3; grid-row: 2 / 3; }  /* 中段・左   */
  .callout-item:nth-of-type(4) { grid-column: 3 / 5; grid-row: 2 / 3; }  /* 中段・右   */
  .callout-item:first-of-type  { width: calc(119 * var(--vw-sp)); grid-column: 2 / 4; grid-row: 3 / 4; margin-inline: auto; }
  .callout-item:not(:first-of-type) {
    width: calc(157 * var(--vw-sp));
    height: calc(84 * var(--vw-sp));
    display: flex; justify-content: center; align-items: center;
    padding: 0;
  }
  .callout-item:not(:first-of-type)::before {
    width: calc(21 * var(--vw-sp)); height: calc(32 * var(--vw-sp));
    left: calc(95 * var(--vw-sp)); bottom: calc(-18 * var(--vw-sp));
    transform: rotate(-133deg);
  }
  .callout-item:nth-of-type(2)::before { left: calc(60 * var(--vw-sp)); }  /* 上段だけしっぽ位置が違う */
  .callout-item p { font-size: calc(14 * var(--vw-sp)); line-height: calc(20 * var(--vw-sp)); }

  .callout-listNecessity { width: var(--width-content); row-gap: calc(20 * var(--vw-sp)); margin-bottom: calc(30 * var(--vw-sp)); }
  .callout-itemNecessity {
    height: calc(92 * var(--vw-sp));
    padding-inline: calc(14 * var(--vw-sp)) calc(22 * var(--vw-sp));
    column-gap: calc(18 * var(--vw-sp));
    justify-content: space-between;
  }
  .callout-itemNecessity span { font-size: calc(24 * var(--vw-sp)); flex: 1; }
  .callout-itemNecessity p { font-size: calc(14 * var(--vw-sp)); line-height: calc(20 * var(--vw-sp)); width: 100%; max-width: none; }

  .callout-subtitle {
    font-size: calc(21 * var(--vw-sp)); line-height: calc(29 * var(--vw-sp));
    padding-block: 0; margin-bottom: calc(58 * var(--vw-sp));
  }
  /* SPでは下線が中央寄せに変わり、さらに2本目が追加される */
  .callout-subtitle::before {
    width: calc(328 * var(--vw-sp)); height: calc(5 * var(--vw-sp));
    right: 50%; bottom: calc(50 * var(--vw-sp)); transform: translateX(50%);
  }
  .callout-subtitle::after {
    content: "";
    width: calc(110 * var(--vw-sp)); height: calc(5 * var(--vw-sp));
    background: var(--gradation-title);
    position: absolute; right: 50%; bottom: calc(-1 * var(--vw-sp)); transform: translateX(50%);
  }
  .callout-subtitle span { font-size: calc(31 * var(--vw-sp)); line-height: calc(52 * var(--vw-sp)); }

  .callout-merit { padding: calc(18 * var(--vw-sp)) calc(20 * var(--vw-sp)) calc(44 * var(--vw-sp)); margin-bottom: calc(34 * var(--vw-sp)); }
  .callout-merit::before { content: none; }                       /* はみ出しイラストは削除 */
  .callout-merit > p { font-size: calc(14 * var(--vw-sp)); line-height: calc(25 * var(--vw-sp)); margin-bottom: calc(24 * var(--vw-sp)); }
  .callout-merit .flex-box:first-of-type,
  .callout-merit .flex-box:last-of-type { width: 100%; }
  .callout-merit .flex-box:first-of-type h3 {
    font-size: calc(21 * var(--vw-sp)); line-height: calc(24 * var(--vw-sp));
    padding-left: calc(15 * var(--vw-sp));
    border-left: solid calc(5 * var(--vw-sp)) var(--color-blue);
    margin-bottom: calc(16 * var(--vw-sp));
  }
  .callout-merit_list { padding: calc(12 * var(--vw-sp)) calc(16 * var(--vw-sp)); margin-bottom: calc(32 * var(--vw-sp)); }
  .callout-merit_item { font-size: calc(15 * var(--vw-sp)); line-height: calc(22 * var(--vw-sp)); column-gap: calc(12 * var(--vw-sp)); }
  .callout-merit_item:not(:last-of-type) { margin-bottom: calc(12 * var(--vw-sp)); }
  .callout-merit_item::before { width: calc(18 * var(--vw-sp)); height: calc(18 * var(--vw-sp)); }

  /* --- advantage：display:contents で「見出し → 画像 → 本文」に並べ替え --- */
  .advantage { padding-block: calc(40 * var(--vw-sp)); }
  .advantage .dot-title { margin-bottom: calc(30 * var(--vw-sp)); }
  .advantage-item,
  .advantage-item:nth-of-type(2) { padding: calc(24 * var(--vw-sp)) calc(20 * var(--vw-sp)); }
  .advantage-item:not(:last-of-type) { margin-bottom: calc(20 * var(--vw-sp)); }
  .advantage-item:nth-of-type(2)::before { content: none; }
  .advantage-item .flex-box,
  .advantage-item:nth-of-type(2) .flex-box:first-of-type,
  .advantage-item:nth-of-type(2) .flex-box:last-of-type { max-width: none; }

  .advantage-box_txt { display: contents; }        /* ← テキストカラムの箱を解体 */
  .advantage-item_point { order: 0; font-size: calc(14 * var(--vw-sp)); line-height: calc(21.9 * var(--vw-sp));
    padding: calc(6 * var(--vw-sp)) calc(12 * var(--vw-sp)); margin-right: auto; margin-bottom: calc(14 * var(--vw-sp)); }
  .advantage-item_point span { font-size: calc(14.6 * var(--vw-sp)); }
  .advantage-item h3 { order: 1; font-size: calc(22 * var(--vw-sp)); line-height: calc(34 * var(--vw-sp)); letter-spacing: 0.04em; }
  .advantage-box_img { order: 2; margin-bottom: calc(24 * var(--vw-sp)); }   /* ← 見出しと本文の間に割り込む */
  .advantage-item_txt { order: 3; font-size: calc(14 * var(--vw-sp)); line-height: calc(26 * var(--vw-sp));
    padding-top: calc(17 * var(--vw-sp)); border-top: calc(3 * var(--vw-sp)) solid var(--color-white); }

  .advantage-companyList { row-gap: calc(18 * var(--vw-sp)); }
  .advantage-companyItem,
  .advantage-companyItem:last-of-type { width: 100%; padding: calc(20 * var(--vw-sp)) calc(20 * var(--vw-sp)) calc(12 * var(--vw-sp)); }
  .advantage-companyItem_img { width: 100%; margin-bottom: calc(6 * var(--vw-sp)); }
  .advantage-companyItem_wrapper { width: fit-content; margin-inline: auto; }
  .advantage-companyItem_txt { width: fit-content; font-size: calc(16 * var(--vw-sp)); line-height: calc(40.89 * var(--vw-sp)); padding-left: calc(3 * var(--vw-sp)); }
  .advantage-companyItem_txt::before { width: calc(3 * var(--vw-sp)); height: calc(3 * var(--vw-sp)); left: calc(-3 * var(--vw-sp)); bottom: calc(18 * var(--vw-sp)); }
  .advantage-companyItem_txt .lg   { font-size: calc(20 * var(--vw-sp)); }
  .advantage-companyItem_txt .x-lg { font-size: calc(32 * var(--vw-sp)); }
  .advantage-companyItem:last-of-type .advantage-companyItem_txt:first-of-type { font-size: calc(16 * var(--vw-sp)); }
  .advantage-companyItem:last-of-type .advantage-companyItem_txt:last-of-type .lg { font-size: calc(20 * var(--vw-sp)); }

  /* --- cta --- */
  .cta { padding-block: calc(40 * var(--vw-sp)); row-gap: calc(16 * var(--vw-sp)); }
  .cta.ai_fe { align-items: center; }
  .cta .contact-button a { border: calc(2 * var(--vw-sp)) solid var(--color-deeporange); }

  /* --- plan --- */
  .plan { padding-block: calc(40 * var(--vw-sp)); }
  .plan .dot-title { margin-bottom: calc(30 * var(--vw-sp)); }
  .plan .flex { row-gap: calc(20 * var(--vw-sp)); margin-bottom: calc(30 * var(--vw-sp)); }
  .plan .flex-box { width: 100%; padding: calc(30 * var(--vw-sp)) calc(20 * var(--vw-sp)); border-radius: calc(14 * var(--vw-sp)); }
  .plan .flex-box h3 {
    font-size: calc(18 * var(--vw-sp)); line-height: calc(26 * var(--vw-sp));
    padding-left: calc(15 * var(--vw-sp)); margin-bottom: calc(26 * var(--vw-sp));
  }
  .plan-img { margin-bottom: calc(23 * var(--vw-sp)); }
  .plan .flex-box p { padding-top: calc(17 * var(--vw-sp)); border-top: calc(3 * var(--vw-sp)) solid var(--color-gray); }
  .plan-button { width: 100%; }
  .plan-button a { font-size: calc(16 * var(--vw-sp)); line-height: calc(22 * var(--vw-sp));
    padding: calc(14 * var(--vw-sp)) calc(35 * var(--vw-sp)) calc(14 * var(--vw-sp)) calc(26 * var(--vw-sp)); }
  .plan-button a::after { width: calc(9 * var(--vw-sp)); height: calc(9 * var(--vw-sp)); right: calc(21 * var(--vw-sp)); }
  .plan > p { font-size: calc(20 * var(--vw-sp)); line-height: calc(32 * var(--vw-sp)); }

  /* --- flow：文章と注釈が「中央揃え → 左揃え」に変わる --- */
  .flow { padding-block: calc(40 * var(--vw-sp)); }
  .flow .dot-title { margin-bottom: calc(30 * var(--vw-sp)); }
  .flow-img { max-width: calc(364 * var(--vw-sp)); margin-bottom: calc(36 * var(--vw-sp)); }
  .flow-txt {
    font-size: calc(16 * var(--vw-sp)); line-height: calc(30 * var(--vw-sp));
    letter-spacing: 0.02em; text-align: left;
    max-width: calc(334 * var(--vw-sp)); margin: 0 auto calc(20 * var(--vw-sp));
  }
  .flow-contact { max-width: calc(334 * var(--vw-sp)); margin-inline: auto; }
  .flow-contact .contact-button a { border: calc(2 * var(--vw-sp)) solid var(--color-deeporange); }
  .flow-contact p { font-size: calc(13 * var(--vw-sp)); line-height: calc(20 * var(--vw-sp)); text-align: left; }
  .flow-contact small { display: flex; }
  .flow-contact span { display: block; }

  /* --- download --- */
  .download { padding-block: calc(40 * var(--vw-sp)); }
  .download .flex { row-gap: calc(30 * var(--vw-sp)); }
  .download .dot-title { margin-bottom: calc(30 * var(--vw-sp)); }
  .download-article { width: 100%; row-gap: calc(14 * var(--vw-sp)); }
  .download-article figure img { height: calc(185 * var(--vw-sp)); }
  .download-article_txt { font-size: calc(15 * var(--vw-sp)); line-height: calc(22 * var(--vw-sp)); letter-spacing: 0.13em; }
  .download .page-link a { font-size: calc(16 * var(--vw-sp)); line-height: calc(22 * var(--vw-sp));
    padding: calc(16 * var(--vw-sp)) calc(60 * var(--vw-sp)) calc(16 * var(--vw-sp)) calc(50 * var(--vw-sp)); }

  /* --- column：1枚ずつのスライダー --- */
  .column { padding-block: calc(60 * var(--vw-sp)); }
  .column .dot-title { margin-bottom: calc(30 * var(--vw-sp)); }
  .column .flex { width: var(--width-content); margin-bottom: calc(34 * var(--vw-sp)); }
  .column-article figure { margin-bottom: calc(15 * var(--vw-sp)); }
  .column-article figure img { height: calc(223 * var(--vw-sp)); }
  .column-article_txt { font-size: calc(15 * var(--vw-sp)); line-height: calc(22 * var(--vw-sp)); letter-spacing: 0.01em; }
  .column-article_date { font-size: calc(12 * var(--vw-sp)); line-height: calc(30 * var(--vw-sp)); }

  .column-wrapper.is-slider {
    flex-direction: row;
    position: relative;
    overflow: visible;
  }
  .column-wrapper.is-slider .slides {
    display: flex;
    width: 100%;
    overflow: hidden;
  }
  .column-wrapper.is-slider .column-article {
    width: 100%;
    flex: 0 0 100%;
    transition: transform .35s ease;
  }
  /* 矢印はコンテナの外側にはみ出す（left/right: -20 × vw-sp） */
  .slider-prev-button._recruit,
  .slider-next-button._recruit {
    position: absolute;
    top: calc(115 * var(--vw-sp));
    right: calc(-20 * var(--vw-sp));
    transform: translateY(-50%);
    z-index: 1;
    appearance: none; background: none; border: none; cursor: pointer; padding: 8px;
  }
  .slider-prev-button._recruit { right: auto; left: calc(-20 * var(--vw-sp)); }
  .slider-prev-button._recruit::before,
  .slider-next-button._recruit::after {
    content: "";
    display: block;
    width: calc(11 * var(--vw-sp)); height: calc(11 * var(--vw-sp));
    border-top: calc(2.5 * var(--vw-sp)) solid #000;
    border-right: calc(2.5 * var(--vw-sp)) solid #000;
    transform: rotate(45deg);
  }
  .slider-prev-button._recruit::before { transform: rotate(-135deg); }

  .slick-dots {
    display: flex; justify-content: center;
    column-gap: calc(17 * var(--vw-sp));
    margin-top: calc(16 * var(--vw-sp));
  }
  .slick-dots button {
    font-size: 0; line-height: 0; appearance: none; border: none; cursor: pointer; padding: 0;
    width: calc(12 * var(--vw-sp)); height: calc(12 * var(--vw-sp));
    border-radius: 50%; background-color: #D3D3D3;
  }
  .slick-dots button.slick-active { background-color: #000; }

  /* --- footer：1200px以下と同じ形。SP専用の微調整だけ --- */
  footer .pc-copy { padding: 20px 0.8rem 45px; }
  footer .infoz .logo.onlysp > a img { width: min(290px, 80%); }

  /* --- page top：一回り小さく、下から110px（SPは下部CTA帯を避ける） --- */
  .page_top a { width: 50px; height: 50px; right: 6px; bottom: 110px; z-index: 99999; }
}