@charset "UTF-8";
/* =========================================================
   OPTAS コーポレートサイト
   デザイン基準: PC 1920px / SP 402px（Figma）
   ========================================================= */

:root {
  --navy: #021634;
  --blue: #005bfd;
  --sky: #36aafd;
  --ice: #f3f8fd;
  --ice2: #eaf4fd;
  --mist: #dce7f1;
  --gray: #52657a;
  --white: #fff;
  --grad: linear-gradient(90deg, #005bfd 0%, #36aafd 100%);
  --shadow: 0 0 10px rgba(0, 0, 0, .25);

  --font-ja: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-en: "Montserrat", "Noto Sans JP", sans-serif;

  /* 文字サイズ（SP値 → PC値） */
  --fs-hero: clamp(34px, 4.375vw, 84px);
  --fs-hero-sub: clamp(18px, 1.354vw, 26px);
  --fs-h2: clamp(28px, 2.8125vw, 54px);
  --fs-page-en: clamp(30px, 2.8125vw, 54px);
  --fs-en: clamp(12px, 1.0417vw, 20px);
  --fs-lead: clamp(20px, 1.4583vw, 28px);
  --fs-h3: clamp(24px, 1.875vw, 36px);
  --fs-body: clamp(16px, 1.0417vw, 20px);
  --fs-item: clamp(18px, 1.0417vw, 20px);
  --fs-small: clamp(14px, .8333vw, 16px);
  --fs-note: clamp(12px, .7292vw, 14px);
  --fs-btn: clamp(16px, 1.0417vw, 20px);
  --fs-num: clamp(32px, 2.5vw, 48px);
  --fs-num-l: clamp(36px, 2.8125vw, 54px);

  --sec-pad: clamp(80px, 6.25vw, 120px);
  --sec-pad-l: clamp(80px, 7.8125vw, 150px);
  --gutter: 20px;
  --header-h: 80px;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; }
}
@media (min-width: 1024px) {
  :root { --header-h: 120px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: var(--font-ja);
  font-size: var(--fs-body);
  line-height: 1.8;
  letter-spacing: .05em;
  color: var(--navy);
  background: var(--white);
  overflow-x: clip;
  padding-top: var(--header-h);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.br-pc { display: none; }
.br-sp { display: inline; }
@media (min-width: 1024px) {
  .br-pc { display: inline; }
  .br-sp { display: none; }
}

.container { width: min(1440px, 100% - var(--gutter) * 2); margin-inline: auto; }
.container--wide { width: min(1680px, 100% - var(--gutter) * 2); margin-inline: auto; }
.container--narrow { width: min(1005px, 100% - var(--gutter) * 2); margin-inline: auto; }

/* ---------- 見出し ---------- */
.sec-head { display: flex; flex-direction: column; gap: clamp(8px, .625vw, 12px); }
.sec-head--center { align-items: center; text-align: center; }
.sec-head--right { align-items: flex-end; text-align: right; }
.en-label {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: var(--fs-en);
  line-height: 1.2;
  letter-spacing: .25em;
}
/* 下層ページのグラデーション英字（デザインの塗り画像をテキストに適用） */
.en-label--grad,
.page-hero__en,
.thanks__en {
  background-image: var(--label-img, none), var(--grad);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, .12));
}
.sec-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .03em;
}
@media (min-width: 1024px) {
  .sec-title { line-height: 1.2; letter-spacing: .05em; }
}
.sec-title .en { font-family: var(--font-en); }
.sec-lead {
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}
.sec-text { font-size: var(--fs-body); line-height: 1.8; letter-spacing: .05em; }
.sec-intro { display: flex; flex-direction: column; gap: clamp(24px, 1.875vw, 36px); }
.sec-intro__body { display: flex; flex-direction: column; gap: 12px; }
.note { font-size: var(--fs-note); line-height: 1.8; letter-spacing: .05em; text-align: center; }

/* ---------- ボタン ---------- */
.arrow-ico {
  width: clamp(20px, 1.302vw, 25px);
  height: clamp(20px, 1.302vw, 25px);
  flex: none;
  filter: drop-shadow(var(--shadow));
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 10px;
  background: var(--blue);
  color: var(--white);
  font-size: var(--fs-btn);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: opacity .2s, transform .2s;
}
.btn:hover { opacity: .85; }
.btn--grad {
  background: var(--btn-img, none) center / cover no-repeat, var(--grad);
  box-shadow: var(--shadow);
  text-shadow: var(--shadow);
  min-height: 60px;
}
.btn--outline {
  background: var(--white);
  color: var(--blue);
  border: 2px solid var(--blue);
  box-shadow: var(--shadow);
  min-height: 60px;
}
.btn--solid-lg { min-height: 60px; box-shadow: var(--shadow); }
.btn--block { width: 100%; }

/* 2段ボタン（FV・お問い合わせ） */
.cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, .4167vw, 8px);
  width: min(360px, 100%);
  padding: clamp(12px, .9375vw, 18px) 24px;
  border-radius: 10px;
  background: var(--btn-img, none) center / cover no-repeat, var(--grad);
  box-shadow: var(--shadow);
  color: var(--white);
  font-size: var(--fs-btn);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .05em;
  text-shadow: var(--shadow);
  white-space: nowrap;
  transition: opacity .2s;
}
.cta-card:hover { opacity: .88; }
.cta-card__who, .cta-card__main { display: flex; align-items: center; gap: 6px; }

.text-link {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  color: var(--blue);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: .05em;
}
.text-link::after { content: ""; height: 1px; background: var(--blue); }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background: transparent;
  transition: background-color .3s ease, box-shadow .3s ease;
}
/* 少しスクロールした後・メニュー展開中は背景を表示 */
.is-scrolled .site-header,
.is-menu-open .site-header {
  background: var(--ice);
  box-shadow: 0 2px 12px rgba(2, 22, 52, .08);
}
.is-menu-open .site-header { box-shadow: none; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: 0 var(--gutter);
}
.site-header__logo { display: block; width: 179px; flex: none; }
.site-header__logo img { width: 100%; height: auto; }
.gnav { display: none; }
.menu-btn {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  margin-right: -6px;
}
.menu-btn img { width: 32px; height: auto; }
.menu-btn .menu-btn__close { display: none; }
.is-menu-open .menu-btn .menu-btn__open { display: none; }
.is-menu-open .menu-btn .menu-btn__close { display: block; }

@media (min-width: 1024px) {
  .site-header__inner { padding-inline: clamp(20px, 4.6875vw, 90px) clamp(40px, 6.25vw, 120px); }
  .site-header__logo { width: clamp(200px, 15.625vw, 300px); }
  .menu-btn { display: none; }
  .gnav { display: block; }
  .gnav__list {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3.333vw, 64px);
    font-size: clamp(16px, 1.0417vw, 20px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .05em;
    white-space: nowrap;
  }
  .gnav__list a:not(.btn):hover,
  .gnav__list a[aria-current="page"] { color: var(--blue); }
  .gnav__contact { width: clamp(200px, 13.02vw, 250px); }
}

/* SPメニュー */
.sp-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--white);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s, visibility .25s;
}
.is-menu-open .sp-menu { visibility: visible; opacity: 1; }
.is-menu-open body { overflow: hidden; }
.sp-menu { overscroll-behavior: contain; }
.sp-menu__list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: min(322px, 100% - 80px);
  margin: 24px auto 40px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .03em;
}
.sp-menu__list a[aria-current="page"] { color: var(--blue); }
.sp-menu__contact { width: 100%; max-width: 320px; font-size: 16px; }
@media (min-width: 1024px) { .sp-menu { display: none; } }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  position: relative;
  background: var(--ice);
  padding: 25px var(--gutter) 16px;
}
.site-footer__inner { display: flex; flex-direction: column; gap: 32px; }
.site-footer__logo { display: block; width: 180px; margin-left: calc(var(--gutter) * -1); }
.fnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  gap: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .03em;
}
.fnav a[aria-current="page"], .fnav a:hover { color: var(--blue); }
.copyright {
  margin-top: 40px;
  text-align: center;
  font-size: 8px;
  font-weight: 300;
  color: var(--gray);
  letter-spacing: .03em;
  white-space: pre;
}
@media (min-width: 1024px) {
  .site-footer { height: 366px; padding: 32px 0 0; }
  .site-footer__inner { flex-direction: row; justify-content: space-between; padding-inline: clamp(20px, 4.6875vw, 90px) clamp(40px, 4.84vw, 93px); }
  .site-footer__logo { width: clamp(220px, 15.625vw, 300px); margin-left: 0; }
  .fnav { width: 502px; margin-top: 100px; gap: 32px; font-size: 20px; letter-spacing: .05em; }
  .copyright { position: absolute; left: 0; right: 0; top: 316px; margin: 0; font-size: 10px; }
}

/* =========================================================
   TOP: FV
   ========================================================= */
.fv { position: relative; background: var(--white); overflow: hidden; }
.fv__inner {
  display: flex;
  flex-direction: column;
  padding: 40px 0 40px;
}
.fv__body { display: contents; }
.fv__text { order: 1; display: flex; flex-direction: column; gap: 24px; width: min(360px, 100% - 40px); margin-inline: auto; }
.fv__title { font-size: var(--fs-hero); font-weight: 700; line-height: 1.2; letter-spacing: .03em; white-space: nowrap; }
.fv__lead { font-size: var(--fs-hero-sub); font-weight: 500; line-height: 1.2; letter-spacing: .05em; }
.fv__visual { order: 2; margin-top: 16px; }
.fv__visual img { width: 100%; height: auto; aspect-ratio: 402 / 268; object-fit: cover; }
.fv__cta { order: 3; display: flex; flex-direction: column; gap: 12px; width: min(360px, 100% - 40px); margin: -9px auto 0; position: relative; }
@media (min-width: 1024px) {
  .fv { height: calc(919px * var(--fv-scale, 1) - 120px); min-height: 640px; }
  .fv__inner { position: relative; height: 100%; padding: 0; }
  .fv__text, .fv__cta { margin: 0; width: auto; }
  .fv__body { position: absolute; left: 6.25vw; top: calc(167 / 1920 * 100vw); z-index: 1; display: flex; flex-direction: column; gap: clamp(40px, 4.1667vw, 80px); width: min(744px, 42vw); }
  .fv__lead { line-height: 1.3; letter-spacing: .1em; }
  .fv__cta { flex-direction: row; gap: 24px; }
  .fv__visual { position: absolute; left: calc(870 / 1920 * 100%); top: calc(88 / 1920 * 100vw); width: calc(1066 / 1920 * 100%); margin: 0; }
  .fv__visual img { aspect-ratio: 1066 / 711; }
  :root { --fv-scale: calc(100vw / 1920px); }
}
@media (min-width: 1024px) {
  .fv { height: calc(100vw * 799 / 1920); }
}

/* =========================================================
   TOP: OUR PHILOSOPHY（帯）
   ========================================================= */
.philosophy {
  position: relative;
  color: var(--white);
  text-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
}
.philosophy__band {
  position: absolute;
  z-index: -1;
  left: calc(-418 / 402 * 100%);
  top: 0;
  width: calc(1254 / 402 * 100%);
  height: 100%;
  object-fit: fill;
  max-width: none;
}
.philosophy__band--pc { display: none; }
.philosophy__inner { display: flex; flex-direction: column; gap: 16px; padding: 80px var(--gutter) 33px; }
.philosophy__head { display: flex; flex-direction: column; gap: 8px; }
.philosophy__title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.4; letter-spacing: .03em; }
.philosophy__text { font-size: 16px; line-height: 1.6; letter-spacing: .03em; text-align: justify; }
.philosophy__img { width: 368px; max-width: 100%; margin: 8px auto 0; }
@media (min-width: 1024px) {
  .philosophy { height: calc(860 / 1920 * 100vw); }
  .philosophy__band--sp { display: none; }
  .philosophy__band--pc { display: block; left: calc(-83 / 1920 * 100%); top: calc(50 / 1920 * 100vw); width: calc(2089 / 1920 * 100%); height: auto; }
  .philosophy__inner { position: static; padding: 0; }
  .philosophy__img { position: absolute; left: calc(127 / 1920 * 100%); top: calc(206 / 1920 * 100vw); width: calc(923 / 1920 * 100%); margin: 0; }
  .philosophy__body { position: absolute; left: calc(1091 / 1920 * 100%); top: calc(319 / 1920 * 100vw); width: calc(709 / 1920 * 100%); display: flex; flex-direction: column; gap: 24px; }
  .philosophy__head { gap: 12px; }
  .philosophy__title { line-height: 1.2; }
  .philosophy__text { font-size: var(--fs-body); line-height: 1.8; letter-spacing: .05em; }
}

/* =========================================================
   TOP: OUR SERVICE
   ========================================================= */
.service { padding-block: 80px; background: var(--white); }
.service__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.service__text { display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
.service__text .sec-head { gap: 8px; }
.service__text .sec-text { font-size: 16px; line-height: 1.6; letter-spacing: .03em; }
.diagram {
  position: relative;
  width: 100%;
  max-width: 362px;
  aspect-ratio: 362 / 465;
  background: var(--ice);
  border: 5px solid var(--sky);
  border-radius: 15px;
  box-shadow: var(--shadow);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .03em;
}
.diagram > * { position: absolute; }
.diagram__node { display: flex; flex-direction: column; align-items: center; }
.diagram__pic { position: relative; overflow: hidden; background: var(--ice); width: 100%; height: 100%; }
.diagram__pic img { position: absolute; max-width: none; }
.diagram__label { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
/* SP配置（362×465基準） */
.diagram__self   { left: calc(15 / 352 * 100%); top: calc(42 / 455 * 100%); width: calc(128 / 352 * 100%); height: calc(113 / 455 * 100%); }
.diagram__refer  { left: calc(208 / 352 * 100%); top: calc(42 / 455 * 100%); width: calc(128 / 352 * 100%); height: calc(113 / 455 * 100%); }
.diagram__logo   { left: calc(77 / 352 * 100%); top: calc(206 / 455 * 100%); width: calc(198 / 352 * 100%); background: var(--white); }
.diagram__biz    { left: calc(112 / 352 * 100%); top: calc(312 / 455 * 100%); width: calc(129 / 352 * 100%); height: calc(113 / 455 * 100%); }
.diagram__v1     { left: calc(29.5 / 352 * 100%); top: calc(163.5 / 455 * 100%); width: calc(87 / 352 * 100%); transform: rotate(90deg); }
.diagram__v2     { left: calc(227 / 352 * 100%); top: calc(163 / 455 * 100%); width: calc(87 / 352 * 100%); transform: rotate(90deg) scaleY(-1); }
.diagram__ln     { left: calc(151 / 352 * 100%); top: calc(292 / 455 * 100%); width: calc(50 / 352 * 100%); transform: rotate(90deg); }
.diagram__self .diagram__label, .diagram__refer .diagram__label, .diagram__biz .diagram__label { top: 10%; }
.diagram__self img   { height: 100%; left: -15.86%; top: 7.05%; width: 131.76%; }
.diagram__refer img  { height: 76.41%; left: -8.42%; top: 23.57%; width: 116.54%; }
.diagram__biz img    { height: 93.75%; left: -13.49%; top: 16.09%; width: 121.62%; }
@media (min-width: 1024px) {
  .service { padding-block: calc(150 / 1920 * 100vw) calc(150 / 1920 * 100vw); }
  .service__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 3vw; }
  .service__text { flex: 0 1 687px; gap: 24px; align-self: center; }
  .service__text .sec-head { gap: 12px; }
  .service__text .sec-text { font-size: var(--fs-body); line-height: 1.8; letter-spacing: .05em; }
  .service__text .btn { align-self: flex-start; }
  .diagram { flex: 0 1 942px; max-width: 942px; aspect-ratio: 942 / 603; font-size: var(--fs-item); letter-spacing: .05em; }
  .diagram__self   { left: calc(32 / 932 * 100%); top: calc(44 / 593 * 100%); width: calc(222 / 932 * 100%); height: calc(195 / 593 * 100%); }
  .diagram__refer  { left: calc(32 / 932 * 100%); top: calc(358 / 593 * 100%); width: calc(222 / 932 * 100%); height: calc(195 / 593 * 100%); }
  .diagram__logo   { left: calc(281 / 932 * 100%); top: calc(242 / 593 * 100%); width: calc(329 / 932 * 100%); background: transparent; }
  .diagram__biz    { left: calc(667 / 932 * 100%); top: calc(199 / 593 * 100%); width: calc(222 / 932 * 100%); height: calc(195 / 593 * 100%); }
  .diagram__v1     { left: calc(237 / 932 * 100%); top: calc(344 / 593 * 100%); width: calc(129 / 932 * 100%); transform: none; }
  .diagram__v2     { left: calc(251.5 / 932 * 100%); top: calc(116 / 593 * 100%); width: calc(114.5 / 932 * 100%); transform: scaleY(-1); }
  .diagram__ln     { left: calc(602 / 932 * 100%); top: calc(297 / 593 * 100%); width: calc(127 / 932 * 100%); transform: rotate(180deg); }
  .diagram__self .diagram__label, .diagram__refer .diagram__label, .diagram__biz .diagram__label { top: 8.7%; }
}

/* =========================================================
   TOP: SERVICE CATEGORY
   ========================================================= */
.category { background: var(--mist); padding-block: 80px; text-align: center; }
.category .sec-head { gap: 8px; }
.category__desc { font-size: 16px; line-height: 1.6; letter-spacing: .03em; }
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  width: min(322px, 100%);
  margin: 24px auto 0;
}
.logo-grid li {
  display: grid;
  place-items: center;
  height: 60px;
  background: #d9d9d9;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
  padding: 4px 16px;
}
.logo-grid li:nth-child(n+5) { display: none; }
.slider { position: relative; margin-top: 24px; }
.slider__track {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 10px calc(50% - 160px);
  margin: -10px 0;
}
.slider__track::-webkit-scrollbar { display: none; }
.cat-card {
  position: relative;
  flex: 0 0 320px;
  height: 262px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--ice);
  box-shadow: var(--shadow);
  scroll-snap-align: center;
}
.cat-card img { position: absolute; max-width: none; }
.cat-card__name { position: absolute; left: 20px; top: 24px; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: .03em; }
.slider__btn { position: absolute; top: 50%; width: 30px; height: 30px; transform: translateY(-50%); z-index: 2; }
.slider__btn--prev { left: var(--gutter); }
.slider__btn--prev img { transform: rotate(180deg); }
.slider__btn--next { right: var(--gutter); }
.category .btn { margin-top: 24px; }
@media (min-width: 1024px) {
  .category { padding-block: calc(150 / 1920 * 100vw) calc(150 / 1920 * 100vw); }
  .category .sec-head { gap: 12px; }
  .category__desc { font-size: var(--fs-body); line-height: 1.8; letter-spacing: .05em; }
  .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(20px, 2.76vw, 53px); width: auto; margin-top: clamp(40px, 3.6vw, 69px); }
  .logo-grid li { height: 100px; font-family: var(--font-en); font-size: var(--fs-body); letter-spacing: .25em; color: var(--navy); }
  .logo-grid li:nth-child(n+5) { display: grid; }
  .slider { margin-top: clamp(40px, 3.33vw, 64px); }
  .slider__track { gap: clamp(20px, 2.083vw, 40px); padding: 10px 0; justify-content: center; }
  .cat-card { flex: 0 0 min(330px, calc((100% - 3 * clamp(20px, 2.083vw, 40px)) / 4)); height: auto; aspect-ratio: 330 / 270; }
  .cat-card:first-child { box-shadow: none; }
  .cat-card__name { left: 28px; font-size: var(--fs-item); letter-spacing: .05em; }
  .slider__btn { width: clamp(40px, 3.125vw, 60px); height: clamp(40px, 3.125vw, 60px); }
  .slider__btn--prev { left: calc(-90 / 1920 * 100vw); }
  .slider__btn--next { right: calc(-90 / 1920 * 100vw); }
  .category .btn { margin-top: clamp(40px, 3.33vw, 64px); }
}

/* =========================================================
   TOP: HOW TO USE
   ========================================================= */
.howto { background: var(--ice); padding-block: 80px 100px; }
.howto__head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.howto__head .sec-text { font-size: 16px; line-height: 1.6; letter-spacing: .03em; }
.howto__cols { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; align-items: center; }
.use-card { width: min(361px, 100%); }
.use-card__top {
  position: relative;
  aspect-ratio: 361 / 281;
  border-radius: 20px 20px 0 0;
  background: var(--white);
  overflow: hidden;
}
.use-card__top img { position: absolute; max-width: none; }
.use-card__head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 20px 0; text-align: center; }
.use-card__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: .03em; }
.use-card__desc { font-size: 14px; line-height: 1.4; letter-spacing: .03em; }
.use-card__body { position: relative; background: var(--white); border-radius: 20px 20px 0 0; padding: 26px 20px 30px; }
.use-card__top::after {
  content: "";
  position: absolute;
  left: calc(323.5 / 361 * 100%);
  top: calc(241 / 281 * 100%);
  width: 20px; height: 20px;
  background: var(--tri-img, none) center / contain no-repeat;
  transform: scaleY(-1);
}
.steps { display: flex; flex-direction: column; }
.steps li { display: flex; align-items: center; gap: 6px; padding-block: 12px; border-top: 1px solid rgba(2, 22, 52, .2); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li:last-child { padding-bottom: 0; }
.steps__no { position: relative; flex: none; width: 25px; height: 25px; display: grid; place-items: center; color: var(--blue); font-size: 18px; font-weight: 700; line-height: 1; }
.steps__no img { position: absolute; inset: 0; width: 100%; height: 100%; }
.steps__no span { position: relative; }
.steps__ico { flex: none; width: 40px; height: 40px; }
.steps__txt { display: flex; flex-direction: column; min-width: 0; }
.steps__ttl { font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: .03em; }
.steps__desc { font-size: 14px; line-height: 1.4; letter-spacing: .03em; }
.howto .note { margin-top: 40px; }
@media (min-width: 1024px) {
  .howto { padding-block: calc(150 / 1920 * 100vw) calc(120 / 1920 * 100vw); }
  .howto__head { gap: 12px; }
  .howto__head .sec-text { font-size: var(--fs-body); line-height: 1.8; letter-spacing: .05em; }
  .howto__cols { flex-direction: row; justify-content: center; align-items: stretch; gap: clamp(20px, 2.083vw, 40px); margin-top: 36px; }
  .use-card { width: min(700px, 50%); display: flex; flex-direction: column; }
  .use-card__top { aspect-ratio: 700 / 432; }
  .use-card__head { padding-top: calc(50 / 700 * 100%); gap: 8px; }
  .use-card__title { line-height: 1.4; letter-spacing: .05em; }
  .use-card__desc { font-size: var(--fs-small); line-height: 1.8; letter-spacing: .05em; max-width: 453px; }
  .use-card__body { flex: 1; padding: 36px calc(66 / 700 * 100%) 60px; border-radius: 20px 20px 0 0; }
  .use-card__top::after { display: none; }
  .steps li { gap: 16px; padding-block: 16px; }
  .steps__no { width: 30px; height: 30px; font-size: 20px; }
  .steps__ico { width: 70px; height: 70px; }
  .steps__ttl { font-size: var(--fs-item); line-height: 1.5; letter-spacing: .05em; }
  .steps__desc { font-size: var(--fs-small); line-height: 1.8; letter-spacing: .05em; }
  .howto .note { margin-top: 48px; }
}

/* =========================================================
   TOP: FOR PEOPLE & BUSINESS
   ========================================================= */
.for { padding-block: 80px; background: var(--white); }
.for .sec-head { gap: 8px; }
.for__cards { display: flex; flex-direction: column; gap: 36px; margin-top: 24px; }
.for-card { background: var(--ice); border-radius: 15px; padding: 30px 20px 36px; display: grid; gap: 24px; }
.for-card__head { display: flex; gap: 8px; align-items: flex-start; }
.for-card__ico { flex: none; width: 50px; height: 50px; object-fit: cover; }
.for-card__titles { display: flex; flex-direction: column; gap: 6px; }
.for-card__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: .03em; }
.for-card__desc { font-size: 14px; line-height: 1.4; letter-spacing: .03em; }
.for-card__btn { justify-self: center; }
.for-card__line { height: 1px; background: rgba(2, 22, 52, .3); }
.points { display: flex; flex-direction: column; gap: 24px; }
.points li { display: flex; align-items: center; gap: 12px; }
.points__no { flex: none; display: flex; flex-direction: column; align-items: center; font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -.05em; }
.points__no img { width: 40px; height: 40px; }
.points__bar { flex: none; width: 2px; align-self: stretch; min-height: 80px; background: var(--navy); opacity: .3; }
.points__ttl { font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: .03em; }
.points__desc { font-size: 14px; line-height: 1.4; letter-spacing: .03em; }
@media (min-width: 1024px) {
  .for { padding-block: calc(150 / 1920 * 100vw) calc(150 / 1920 * 100vw); }
  .for .sec-head { gap: 12px; }
  .for__cards { margin-top: 48px; }
  .for-card { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; padding: clamp(40px, 3.6vw, 69px) clamp(24px, 1.82vw, 35px) clamp(40px, 3.6vw, 69px); gap: 36px 24px; }
  .for-card__head { gap: 24px; align-items: center; }
  .for-card__ico { width: 100px; height: 100px; }
  .for-card__titles { gap: 12px; }
  .for-card__title { line-height: 1.4; letter-spacing: .05em; }
  .for-card__desc { font-size: var(--fs-small); line-height: 1.8; letter-spacing: .05em; }
  .for-card__btn { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; }
  .for-card__line { grid-column: 1 / -1; width: calc(1333 / 1371 * 100%); height: 2px; }
  .points { grid-column: 1 / -1; flex-direction: row; gap: clamp(16px, 1.875vw, 36px); }
  .points li { flex: 1 1 0; gap: 16px; }
  .points__no { font-size: 20px; }
  .points__no img { width: 70px; height: 70px; }
  .points__bar { min-height: 100px; }
  .points__ttl { font-size: var(--fs-item); line-height: 1.5; letter-spacing: .05em; }
  .points__desc { font-size: var(--fs-small); line-height: 1.8; letter-spacing: .05em; }
}

/* =========================================================
   会社情報ボックス（TOP / 会社概要 共通）
   ========================================================= */
.info-box {
  position: relative;
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: 15px;
  padding: 28px 22px;
}
.info-list { display: flex; flex-direction: column; }
.info-list > div { display: flex; align-items: center; gap: 24px; padding-block: 16px; border-top: 1px solid rgba(2, 22, 52, .3); }
.info-list > div:first-child { border-top: 0; padding-top: 0; }
.info-list > div:last-child { padding-bottom: 0; }
.info-list dt { position: relative; flex: none; width: 68px; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: .03em; }
.info-list dt::after { content: ""; position: absolute; right: -12px; top: 50%; width: 1px; height: 25px; background: var(--navy); transform: translateY(-50%); }
.info-list dd { font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: .03em; }
@media (min-width: 1024px) {
  .info-list > div { gap: 36px; padding-block: 16px; }
  .info-list dt { width: 130px; font-size: var(--fs-item); letter-spacing: .05em; }
  .info-list dt::after { right: -18px; }
  .info-list dd { font-size: var(--fs-item); letter-spacing: .05em; }
}

/* TOP: COMPANY */
.top-company { background: var(--mist); padding-block: 80px 40px; }
.top-company__grid { display: grid; gap: 12px; }
.top-company__text { display: flex; flex-direction: column; gap: 12px; }
.top-company__text .sec-head { gap: 8px; }
.top-company__text .sec-text { font-size: 16px; line-height: 1.6; letter-spacing: .03em; }
.top-company__media { position: relative; margin-top: 12px; }
.top-company__img { width: 100%; aspect-ratio: 363 / 147; object-fit: cover; }
.top-company .info-box { margin-top: -11px; }
.top-company__btn { display: flex; justify-content: center; margin-top: 24px; }
.top-company__btn--pc { display: none; }
@media (min-width: 1024px) {
  .top-company { padding-block: calc(150 / 1920 * 100vw); }
  .top-company__grid { grid-template-columns: minmax(0, 510px) minmax(0, 956px); justify-content: space-between; align-items: start; gap: 2vw; }
  .top-company__text { gap: 24px; margin-top: calc(17 / 1920 * 100vw); }
  .top-company__text .sec-head { gap: 12px; }
  .top-company__text .sec-text { font-size: var(--fs-body); line-height: 1.8; letter-spacing: .05em; }
  .top-company__btn--pc { display: block; }
  .top-company__btn--pc .btn { align-self: flex-start; }
  .top-company__btn--sp { display: none; }
  .top-company__media { margin-top: 0; padding-bottom: 0; }
  .top-company__img { aspect-ratio: 956 / 386; }
  .top-company .info-box { width: calc(814 / 956 * 100%); margin: calc(-83 / 1920 * 100vw) 0 0 auto; margin-right: calc(36 / 956 * 100%); padding: clamp(28px, 2.19vw, 42px) calc(94 / 814 * 100%); }
}

/* TOP: CONTACT */
.top-contact { background: var(--navy); padding-block: 80px; color: var(--white); }
.top-contact .sec-head { gap: 8px; }
.top-contact__cards { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
.contact-card {
  position: relative;
  width: min(363px, 100%);
  aspect-ratio: 363 / 243;
  border: 1px solid var(--navy);
  border-radius: 15px;
  background: var(--white);
  overflow: hidden;
  color: var(--navy);
}
.contact-card__bg { position: absolute; max-width: none; }
.contact-card__body { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 23px 20px 22px; }
.contact-card__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: .03em; }
.contact-card__text { margin-top: 8px; font-size: 16px; line-height: 1.6; letter-spacing: .03em; }
.contact-card .cta-card { width: min(320px, 100%); }
@media (min-width: 1024px) {
  .top-contact { padding-block: calc(150 / 1920 * 100vw); }
  .top-contact .sec-head { gap: 12px; }
  .top-contact__cards { flex-direction: row; justify-content: center; gap: 20px; margin-top: calc(48 / 1920 * 100vw); }
  .contact-card { width: min(710px, 50%); aspect-ratio: 710 / 412; }
  .contact-card__body { justify-content: flex-start; gap: clamp(32px, 4.167vw, 80px); padding: calc(70 / 710 * 100%) calc(57 / 710 * 100%); }
  .contact-card__title { line-height: 1.4; letter-spacing: .05em; }
  .contact-card__text { margin-top: 12px; font-size: var(--fs-body); line-height: 1.8; letter-spacing: .05em; }
  .contact-card .cta-card { width: 360px; max-width: 100%; }
}

/* =========================================================
   下層ページ共通
   ========================================================= */
.page-hero {
  position: relative;
  height: clamp(180px, 22.34vw, 429px);
  margin-top: clamp(0px, .3646vw, 7px);
  overflow: hidden;
}
.page-hero__en {
  position: absolute;
  left: var(--gutter);
  top: clamp(16px, 1.98vw, 38px);
  font-family: var(--font-en);
  font-size: var(--fs-page-en);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .25em;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .page-hero__en { left: calc(120 / 1920 * 100%); }
}

.sec { padding-block: var(--sec-pad); }
.bg-ice { background: var(--ice); }
.bg-ice2 { background: var(--ice2); }
.bg-mist { background: var(--mist); }
.bg-white { background: var(--white); }
.bg-navy { background: var(--navy); color: var(--white); }

/* 2つの使い方（個人） */
.usage { display: grid; gap: 40px; margin-top: 48px; }
.usage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 20px 0;
  border-radius: 500px 500px 0 0;
  background: var(--ice);
  box-shadow: var(--shadow);
}
.usage-card--alt { background: var(--ice2); }
.usage-card__badge { position: relative; display: grid; place-items: center; width: 120px; height: 120px; }
.usage-card__badge img { position: absolute; inset: 0; width: 100%; height: 100%; }
.usage-card__badge span { position: relative; display: flex; flex-direction: column; align-items: center; font-weight: 700; line-height: 1; }
.usage-card__badge small { font-size: 22px; letter-spacing: .05em; }
.usage-card__badge b { font-family: var(--font-en); font-size: 40px; color: var(--blue); }
.usage-card__title { margin-top: 16px; font-size: var(--fs-item); font-weight: 700; line-height: 1.4; letter-spacing: .05em; }
.usage-card__text { margin-top: 12px; max-width: 532px; font-size: var(--fs-small); line-height: 1.8; letter-spacing: .05em; }
.usage-card__img { width: min(507px, 100%); aspect-ratio: 507 / 123; object-fit: cover; border-radius: 20px; margin: 24px 0 -30px; }
.usage + .note { margin-top: 66px; }
@media (min-width: 1024px) {
  .usage { grid-template-columns: repeat(2, minmax(0, 680px)); justify-content: center; gap: calc(80 / 1920 * 100vw); margin-top: 36px; }
  .usage-card { aspect-ratio: 680 / 497; padding-top: calc(48 / 680 * 100%); }
  .usage-card__badge { width: 135px; height: 135px; }
  .usage-card__badge small { font-size: 26px; }
  .usage-card__badge b { font-size: 48px; }
  .usage-card__img { position: absolute; bottom: -30px; margin: 0; }
}

/* STEP（縦タイムライン） */
.flow-box { padding-block: var(--sec-pad); }
.flow-box--inset { width: min(1680px, 100%); margin-inline: auto; }
.timeline { position: relative; display: flex; flex-direction: column; gap: 24px; margin-top: 48px; }
.timeline__line { position: absolute; left: calc(99.5px * var(--tl-scale, .5) - 6px); top: 22px; bottom: 60px; width: 12px; height: auto; object-fit: fill; }
.timeline li { position: relative; display: flex; align-items: flex-start; gap: 16px; }
.timeline__ico { flex: none; width: 100px; height: auto; aspect-ratio: 199 / 152; object-fit: contain; }
.timeline__body { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.timeline__head { display: flex; flex-direction: column; gap: 4px; color: var(--blue); font-weight: 700; line-height: 1.2; }
.timeline__step { font-family: var(--font-en); font-size: var(--fs-num); }
.timeline__ttl { font-size: var(--fs-item); letter-spacing: .05em; }
.timeline__text { font-size: var(--fs-small); line-height: 1.8; letter-spacing: .05em; }
.flow-box .note { margin-top: 48px; }
@media (min-width: 1024px) {
  .timeline { gap: 36px; width: min(1066px, 100%); margin: 48px auto 0; }
  .timeline__line { left: 228px; top: 22px; width: 25px; bottom: 80px; }
  .timeline li { gap: 108px; }
  .timeline__ico { width: 199px; }
  .timeline__body { gap: 12px; padding-top: 7px; }
  .timeline__head { gap: 8px; }
}
@media (max-width: 1023px) {
  .timeline__line { display: none; }
}

/* メリット/提供価値（交互レイアウト） */
.merit-list { display: flex; flex-direction: column; gap: 64px; margin-top: 48px; }
.merit { display: grid; gap: 24px; align-items: start; }
.merit__text { display: flex; flex-direction: column; gap: 12px; }
.merit__head { display: flex; flex-direction: column; gap: 8px; color: var(--sky); font-weight: 700; }
.merit__no { display: flex; align-items: flex-end; gap: 4px; line-height: 1; }
.merit__no small { font-size: var(--fs-h3); letter-spacing: .05em; line-height: 1.4; }
.merit__no b { font-family: var(--font-en); font-size: var(--fs-num-l); }
.merit__ttl { font-size: var(--fs-h3); line-height: 1.4; letter-spacing: .05em; }
.merit__no--inline { flex-direction: row; align-items: center; gap: 12px; }
.merit__no--inline .merit__ttl { color: var(--sky); }
.merit__sub { font-size: var(--fs-item); font-weight: 700; color: var(--navy); line-height: 1.4; letter-spacing: .05em; }
.merit__desc { font-size: var(--fs-body); line-height: 1.8; letter-spacing: .05em; }
.merit__media { position: relative; width: min(528px, 100%); aspect-ratio: 528 / 385; margin-inline: auto; }
.merit__frame { position: absolute; right: 0; top: 0; width: calc(274 / 528 * 100%); height: calc(287 / 385 * 100%); border-radius: 20px; box-shadow: var(--shadow); background: var(--white); }
.merit__photo { position: absolute; left: 0; bottom: 0; width: calc(441 / 528 * 100%); height: calc(286 / 385 * 100%); object-fit: cover; border-radius: 20px; box-shadow: var(--shadow); }
.merit--rev .merit__frame { left: 0; right: auto; }
.merit--rev .merit__photo { left: auto; right: 0; width: calc(441 / 517 * 100%); }
@media (min-width: 1024px) {
  .merit-list { gap: calc(110 / 1920 * 100vw); margin-top: 72px; width: min(1048px, 100%); margin-inline: auto; }
  .merit { grid-template-columns: minmax(0, 484px) minmax(0, 528px); gap: 36px; justify-content: center; }
  .merit--rev { grid-template-columns: minmax(0, 517px) minmax(0, 484px); }
  .merit--rev .merit__media { order: -1; aspect-ratio: 517 / 385; }
  .merit__text { padding-top: 12px; }
}

/* ポイント3カード（成果条件） */
.point-cards { display: grid; gap: 40px; margin-top: 48px; }
.point-card { position: relative; padding-top: 64px; }
.point-card__no { position: absolute; left: 0; top: 0; display: flex; align-items: flex-end; color: var(--blue); font-weight: 700; line-height: 1; }
.point-card__no small { font-size: var(--fs-h3); line-height: 1.4; letter-spacing: .05em; }
.point-card__no b { font-family: var(--font-en); font-size: var(--fs-num); }
.point-card__img { width: calc(100% - 48px); margin-left: 48px; aspect-ratio: 420 / 220; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow); }
.point-card__box { position: relative; margin-top: -27px; background: var(--white); border-radius: 20px; box-shadow: var(--shadow); padding: 36px 28px 40px; display: flex; flex-direction: column; gap: 24px; }
.point-card__ttl { text-align: center; font-size: var(--fs-item); font-weight: 700; line-height: 1.4; letter-spacing: .05em; }
.point-card__text { font-size: var(--fs-small); line-height: 1.8; letter-spacing: .05em; }
@media (min-width: 1024px) {
  .point-cards { grid-template-columns: repeat(3, minmax(0, 468px)); gap: 18px; justify-content: center; margin-top: 64px; }
  .point-card__img { width: calc(420 / 468 * 100%); margin-left: calc(48 / 468 * 100%); }
  .point-card__box { width: calc(420 / 468 * 100%); min-height: 244px; }
}

/* カテゴリー 2列カード */
.cat-grid { display: grid; gap: 24px; margin-top: 48px; }
.cat-item { background: var(--ice); border-radius: 15px; padding: 28px 24px 32px; }
.bg-mist .cat-item, .cat-item--white { background: var(--white); }
.cat-item__ttl { font-size: var(--fs-item); font-weight: 700; line-height: 1.4; letter-spacing: .05em; }
.cat-item__ttl--l { font-size: var(--fs-lead); }
.cat-item__body { display: flex; align-items: center; gap: 24px; margin-top: 16px; }
.cat-item__body img { flex: none; width: clamp(72px, 5.208vw, 100px); height: clamp(72px, 5.208vw, 100px); object-fit: contain; }
.cat-item__text { font-size: var(--fs-small); line-height: 1.8; letter-spacing: .05em; }
@media (min-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; }
  .cat-item { padding: 33px 44px 36px; min-height: 210px; }
}

.center-link { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 24px; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 24px; margin-top: 46px; }
.faq-item { border-radius: 10px; }
.faq-q {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 14px 64px 14px 20px;
  background: var(--white);
  border: 1px solid var(--gray);
  border-radius: 10px;
  text-align: left;
  font-size: var(--fs-item);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .05em;
}
.faq-q__ico { position: absolute; right: 22px; top: 50%; width: 25px; height: 12px; transform: translateY(-50%); transition: transform .25s; }
.faq-item.is-open .faq-q__ico { transform: translateY(-50%) rotate(180deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
  background: var(--ice);
  border-radius: 0 0 10px 10px;
  margin-top: -2px;
}
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 12px 20px; font-size: var(--fs-small); line-height: 1.8; letter-spacing: .05em; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

/* 下層CTA（濃紺帯） */
.page-cta { position: relative; background: var(--navy); color: var(--white); padding-block: 80px; overflow: hidden; }
.page-cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.page-cta__text { font-size: var(--fs-lead); font-weight: 700; line-height: 1.4; letter-spacing: .05em; }
.page-cta__deco { display: none; position: absolute; max-width: none; object-fit: cover; }
@media (min-width: 1024px) {
  .page-cta { padding-block: calc(120 / 1920 * 100vw); }
  .page-cta__text { font-size: var(--fs-h3); }
  .page-cta__deco { display: block; }
}

/* =========================================================
   個人の方へ
   ========================================================= */
.p-intro .sec-intro { align-items: center; text-align: center; }
.p-intro__text { max-width: 1329px; }

/* =========================================================
   企業の方へ
   ========================================================= */
.b-intro { position: relative; overflow: hidden; }
.b-intro__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; }
.b-intro__deco { display: none; position: absolute; object-fit: cover; max-width: none; }
@media (min-width: 1280px) { .b-intro__deco { display: block; } }

.challenge-list { display: flex; flex-direction: column; gap: 24px; margin-top: 48px; }
.challenge {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  width: min(1000px, 100%);
  padding: 24px 20px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.challenge:nth-child(even) { margin-left: auto; }
.challenge__head { display: flex; align-items: center; gap: clamp(12px, 1.25vw, 24px); color: var(--gray); font-weight: 700; line-height: 1.2; }
.challenge__no { font-family: var(--font-en); font-size: clamp(40px, 3.333vw, 64px); }
.challenge__ttl { font-size: var(--fs-item); letter-spacing: .05em; }
.challenge__text { grid-column: 1; font-size: var(--fs-small); line-height: 1.8; letter-spacing: .05em; }
.challenge__img { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: clamp(72px, 7.8125vw, 150px); height: auto; aspect-ratio: 1; object-fit: contain; }
@media (min-width: 1024px) {
  .challenge { padding: 21px 55px 30px 35px; min-height: 209px; }
  .challenge__text { padding-left: calc(93 / 1000 * 100%); }
}

.usecase-block { position: relative; margin-top: 48px; padding: 40px var(--gutter); background: var(--mist); box-shadow: var(--shadow); }
.usecase-block + .usecase-block { margin-top: 36px; }
.usecase-block__ttl { text-align: center; color: var(--blue); font-size: clamp(22px, 1.667vw, 32px); font-weight: 700; line-height: 1.4; letter-spacing: .05em; }
.usecase-block .cat-grid { margin-top: 32px; }
@media (min-width: 1024px) {
  .usecase-block { width: min(1680px, 100% - var(--gutter) * 2); margin-inline: auto; padding: 57px calc(120 / 1680 * 100%) 70px; }
  .usecase-block .cat-grid { margin-top: 48px; width: min(1440px, 100%); margin-inline: auto; }
}

/* =========================================================
   会社概要
   ========================================================= */
.c-fv { position: relative; overflow: hidden; color: var(--white); text-align: center; padding: 60px var(--gutter) 40px; }
.c-fv__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.c-fv { isolation: isolate; }
.c-fv__title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; letter-spacing: .05em; }
.c-fv__text { margin-top: 12px; font-size: var(--fs-body); line-height: 1.8; letter-spacing: .05em; }
.c-fv__img { width: min(1144px, 100%); aspect-ratio: 1144 / 559; object-fit: cover; border-radius: 20px; margin: 24px auto 0; }
@media (min-width: 1024px) {
  .c-fv { padding: calc(120 / 1920 * 100vw) 0 calc(22 / 1920 * 100vw); }
}
.c-philosophy { background: var(--ice); position: relative; overflow: hidden; }
.c-philosophy__top { display: grid; gap: 32px; padding-block: var(--sec-pad) 0; }
.c-philosophy__img { width: min(441px, 80%); justify-self: center; aspect-ratio: 441 / 447; object-fit: cover; }
@media (min-width: 1024px) {
  .c-philosophy__top { grid-template-columns: minmax(0, 1005px) minmax(0, 441px); justify-content: center; gap: 5px; align-items: start; }
  .c-philosophy__img { width: 100%; margin-top: -10px; }
}
.approach {
  position: relative;
  margin-top: 76px;
  background: var(--white);
  border-radius: 9999px 9999px 0 0;
  box-shadow: var(--shadow);
  padding: 120px var(--gutter) 80px;
}
@media (max-width: 767px) { .approach { border-radius: 200px 200px 0 0; padding-top: 80px; } }
@media (min-width: 1024px) { .approach { padding: calc(197 / 1920 * 100vw) 0 calc(150 / 1920 * 100vw); } }
.approach .sec-intro { align-items: center; text-align: center; }
.approach-cards { display: grid; gap: 40px; margin-top: 48px; justify-content: center; }
.approach-card { position: relative; width: min(430px, 100%); padding-top: 60px; }
.approach-card__no { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 120px; height: 120px; display: grid; place-items: center; }
.approach-card__no img { position: absolute; inset: 0; width: 100%; height: 100%; }
.approach-card__no span { position: relative; font-family: var(--font-en); font-weight: 700; font-size: var(--fs-num-l); color: var(--blue); line-height: 1; }
.approach-card__box { background: var(--ice); border-radius: 15px; padding: 84px 30px 40px; display: flex; flex-direction: column; gap: 20px; }
.approach-card__ttl { text-align: center; color: var(--blue); font-size: var(--fs-item); font-weight: 700; line-height: 1.4; letter-spacing: .05em; }
.approach-card__text { font-size: 16px; line-height: 1.8; letter-spacing: .05em; text-align: justify; }
.approach-card__img { width: 100%; aspect-ratio: 357 / 103; object-fit: cover; }
@media (min-width: 1024px) {
  .approach-cards { grid-template-columns: repeat(3, minmax(0, 430px)); gap: calc(75 / 1920 * 100vw); margin-top: 72px; }
  .approach-card__box { min-height: 473px; }
}
.c-profile { background: var(--mist); padding-block: var(--sec-pad); }
.c-profile__media { position: relative; width: min(956px, 100%); margin: 48px auto 0; }
.c-profile__img { width: 100%; aspect-ratio: 956 / 386; object-fit: cover; }
.c-profile .info-box { width: min(900px, 100% - 20px); margin: -34px auto 0; padding: clamp(28px, 2.19vw, 42px) clamp(20px, 2.6vw, 50px) clamp(28px, 2.6vw, 50px); }
.c-profile__btn { display: flex; justify-content: center; margin-top: 36px; }
@media (min-width: 1024px) {
  .c-profile .info-list dt { width: 130px; }
}

/* =========================================================
   お問い合わせ
   ========================================================= */
.contact-intro .sec-intro { align-items: center; text-align: center; }
.form-wrap {
  width: min(1440px, 100% - var(--gutter) * 2);
  margin: 48px auto 0;
  background: var(--ice);
  border-radius: 30px;
  box-shadow: var(--shadow);
  padding: 48px 20px 60px;
}
@media (min-width: 1024px) { .form-wrap { padding: 77px 70px 80px; } }
.form-wrap .sec-head { margin-bottom: 24px; }
.form-wrap__lead { text-align: center; font-size: var(--fs-body); line-height: 1.8; letter-spacing: .05em; }
.form { width: min(1300px, 100%); margin: 36px auto 0; }
.form__group { border-top: 1px solid rgba(2, 22, 52, .4); padding-top: 36px; margin-top: 36px; display: flex; flex-direction: column; gap: 36px; }
.form__group:first-child { margin-top: 0; }
.field { display: grid; gap: 12px; }
.field__label { display: flex; align-items: center; gap: 16px; font-size: var(--fs-item); font-weight: 700; line-height: 1.4; letter-spacing: .05em; color: #000; }
.req { display: inline-grid; place-items: center; width: 64px; height: 30px; background: var(--blue); color: var(--white); font-size: 14px; font-weight: 500; letter-spacing: .05em; line-height: 1; flex: none; }
.field__control { display: flex; flex-direction: column; gap: 8px; }
.input, .select, .textarea {
  width: 100%;
  min-height: 60px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--white);
  font: inherit;
  font-size: var(--fs-item);
  line-height: 1.8;
  letter-spacing: .05em;
  color: var(--navy);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--gray); opacity: 1; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; }
.textarea { min-height: 180px; resize: vertical; }
.select-wrap { position: relative; }
.select { padding-right: 64px; cursor: pointer; }
.select:invalid { color: var(--gray); }
.select-wrap > .select__arrow { position: absolute; right: 24px; top: 30px; width: 29px; height: auto; transform: translateY(-50%); pointer-events: none; transition: transform .2s; }
.select-wrap.is-open > .select__arrow { transform: translateY(-50%) rotate(180deg); }
/* カスタムセレクト（デザインのリスト表示） */
.sr-select { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.select__btn { display: flex; align-items: center; text-align: left; }
.select__btn.is-placeholder { color: var(--gray); }
.select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select__list {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 12px 0;
  background: var(--mist);
  box-shadow: 0 6px 16px rgba(2, 22, 52, .12);
  max-height: 320px;
  overflow-y: auto;
}
.select__list[hidden] { display: none; }
.select__list li {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 6px 22px;
  color: var(--gray);
  font-size: var(--fs-item);
  line-height: 1.6;
  letter-spacing: .05em;
  cursor: pointer;
}
.select__list li:hover, .select__list li.is-active { background: rgba(255, 255, 255, .55); color: var(--navy); }
.select__list li[aria-selected="true"] { color: var(--navy); }
.select__ico { flex: none; width: 25px; height: 25px; }
@media (max-width: 767px) {
  .select__list li { gap: 14px; padding: 8px 16px; font-size: 16px; }
  .select__ico { width: 22px; height: 22px; }
  .select-wrap > .select__arrow { right: 18px; width: 24px; }
  .select { padding-right: 52px; }
}
.field__hint { font-size: var(--fs-note); color: var(--blue); letter-spacing: .05em; }
.field__error { display: none; font-size: var(--fs-note); color: #d93025; letter-spacing: .05em; }
.field.is-error .field__error { display: block; }
.field.is-error .input, .field.is-error .select, .field.is-error .textarea { border-color: #d93025; }
.agree { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); color: var(--gray); line-height: 1.8; letter-spacing: .05em; cursor: pointer; }
.agree input { flex: none; width: 30px; height: 30px; margin: 0; border: 1px solid var(--blue); border-radius: 5px; background: var(--white); -webkit-appearance: none; appearance: none; display: grid; place-items: center; cursor: pointer; }
.agree input:checked::after { content: ""; width: 14px; height: 8px; border-left: 3px solid var(--blue); border-bottom: 3px solid var(--blue); transform: translateY(-2px) rotate(-45deg); }
.agree a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.form__actions { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 48px; }
.form__actions .btn { min-width: min(303px, 100%); }
.confirm-head { display: flex; flex-direction: column; gap: 12px; text-align: center; color: #000; }
.confirm-head h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.4; letter-spacing: .05em; }
.confirm-value { min-height: 60px; padding: 12px 24px; background: var(--white); font-size: var(--fs-item); line-height: 1.8; letter-spacing: .05em; white-space: pre-wrap; word-break: break-word; }
.confirm-value--l { min-height: 180px; }
.thanks { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-block: 40px; text-align: center; color: #000; }
.thanks__en { font-family: var(--font-en); font-size: 32px; font-weight: 500; letter-spacing: .25em; line-height: 1.2; }
.thanks p { font-size: var(--fs-body); line-height: 1.8; letter-spacing: .05em; }
.form-step[hidden] { display: none !important; }
@media (min-width: 1024px) {
  /* ラベルと必須マークを1つのまとまりにし、入力欄との間隔を詰める */
  .field { grid-template-columns: 352px minmax(0, 720px); justify-content: center; align-items: center; column-gap: 32px; row-gap: 0; }
  .field__label { gap: 12px; }
  .field__label > span:first-child { white-space: nowrap; }
  .field__label .req { width: 56px; height: 28px; font-size: 14px; }
  .field__control { grid-column: 2; }
  .field--top { align-items: start; }
  .field--top .field__label { margin-top: 14px; }
  .field--plain .field__control { grid-column: 2; }
  .form__actions { flex-direction: row; justify-content: center; }
  .form__actions--stack { flex-direction: column; }
}

/* =========================================================
   規約・ポリシー
   ========================================================= */
.legal { padding-block: var(--sec-pad); }
.legal__title { text-align: center; font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; letter-spacing: .05em; }
.legal__body { width: min(1440px, 100%); margin: clamp(40px, 3.6vw, 69px) auto 0; color: #000; font-size: var(--fs-body); line-height: 1.8; letter-spacing: .05em; }
.legal__body h2 { margin-top: 1.8em; font-size: var(--fs-lead); font-weight: 700; line-height: 1.4; letter-spacing: .05em; }
.legal__body p + p { margin-top: 0; }
.legal__date { margin-top: 1.8em; font-size: var(--fs-note); }

/* ---------- 表示切替・補助 ---------- */
.pc-only { display: none !important; }
@media (min-width: 1024px) {
  .pc-only { display: inline-flex !important; }
  .sp-only { display: none !important; }
}
[aria-disabled="true"] { cursor: default; }
.page-hero__bg { position: absolute; left: 0; top: calc(-37 / 429 * 100%); width: 100%; height: calc(var(--h) / 429 * 100%); }
.page-hero__bg img { position: absolute; max-width: none; }
.legal__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .top-company .info-list dt { width: 87px; }
}
.use-card__head { padding-inline: 14px; }
.use-card__desc { letter-spacing: .02em; }
.points li > span:last-child { line-height: 1.4; }
@media (min-width: 1024px) {
  .use-card__head { padding-inline: 20px; }
  .points li > span:last-child { line-height: 1.8; }
}
.merit__frame { background: linear-gradient(135deg, #eaf4fd 0%, #cfe3fb 100%); }
@media (min-width: 1024px) {
  .merit__ttl { width: max-content; max-width: min(640px, 60vw); }
  .merit__text { position: relative; z-index: 1; }
  .flow-box--inset .sec-intro { padding-inline: calc(127 / 1920 * 100vw) calc(203 / 1920 * 100vw); }
}

/* 幅指定のあるボタン（デザイン上16px） */
.btn--sm { font-size: 16px; letter-spacing: .03em; padding-inline: 20px; }
.btn { max-width: 100%; }

/* =========================================================
   SP調整（画像との重なり・比率・見出し位置）
   ========================================================= */
/* 下層ページのヘッダー画像：PCは比率固定、SPは英字見出し＋画像を縦に配置 */
.page-hero { height: calc(429 / 1920 * 100vw); }
.page-hero__bg { overflow: hidden; }
@media (max-width: 767px) {
  .page-hero { height: auto; margin-top: 0; padding-top: 16px; }
  .page-hero__en {
    position: static;
    display: block;
    padding-inline: var(--gutter);
    font-size: clamp(24px, 7vw, 30px);
    letter-spacing: .12em;
    white-space: normal;
  }
  .page-hero__bg {
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: 1920 / var(--h);
    margin-top: 4px;
  }
}

/* HOW TO USE：SPは見出し → イラストの順に縦積み（重なりを解消） */
@media (max-width: 1023px) {
  .use-card__top { aspect-ratio: auto; display: flex; flex-direction: column; }
  .use-card__top > img {
    position: static !important;
    width: 78% !important;
    height: auto !important;
    max-height: 190px;
    object-fit: contain;
    margin: 12px auto 0;
  }
  .use-card__head { padding-top: 26px; }
  .use-card__top::after { display: none; }
}

/* カテゴリー・活用例カード：SPはタイトル＋画像を横並び、説明文は全幅 */
@media (max-width: 1023px) {
  .cat-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 24px 20px; }
  .cat-item__body { display: contents; }
  .cat-item__ttl { grid-column: 1; grid-row: 1; }
  .cat-item__body img { grid-column: 2; grid-row: 1; width: 110px; height: auto; aspect-ratio: auto; object-fit: contain; }
  .cat-item__text { grid-column: 1 / -1; grid-row: 2; margin-top: 12px; }
}

/* 企業の課題カード：SPは本文を全幅、画像は右下に自然な比率で */
@media (max-width: 1023px) {
  .challenge { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 20px; }
  .challenge__text { grid-column: 1; }
  .challenge__img { grid-column: 1; grid-row: auto; justify-self: end; width: 140px; height: auto; aspect-ratio: auto; margin-top: -4px; }
}

/* 区切り記号（PCのみ表示） */
.sep-pc { display: none; }
@media (min-width: 768px) { .sep-pc { display: inline; } .usecase-block__ttl .br-sp { display: none; } }
@media (max-width: 767px) {
  .page-hero { display: flex; flex-direction: column; }
  .page-hero__en { order: -1; }
  .page-hero__bg { aspect-ratio: auto; width: 112%; margin-left: -6%; }
  .page-hero__bg img { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; object-fit: contain !important; }
}

/* ヘッダー：スクロール後は半透明＋ぼかし */
.is-scrolled .site-header {
  background: rgba(243, 248, 253, .72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 rgba(2, 22, 52, .06), 0 4px 16px rgba(2, 22, 52, .05);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .is-scrolled .site-header { background: rgba(243, 248, 253, .96); }
}
.is-menu-open .site-header { background: var(--ice); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* フッター：サイトマップの位置（デザイン：上端71px／下端からの余白103px） */
@media (min-width: 1024px) {
  .site-footer__inner { align-items: flex-start; }
  .fnav { margin-top: 39px; row-gap: 32px; column-gap: 32px; }
}

/* 企業の課題：イラストを大きく（余白をトリミングした画像を使用） */
.challenge__img { width: clamp(140px, 13.5vw, 260px); height: auto; aspect-ratio: auto; max-height: 160px; object-fit: contain; }
@media (min-width: 1024px) {
  .challenge { grid-template-columns: minmax(0, 1fr) clamp(180px, 15vw, 280px); align-items: center; }
  .challenge__img { justify-self: center; }
}
@media (min-width: 1024px) {
  .challenge { grid-template-columns: minmax(0, 1fr) clamp(170px, 11.5vw, 220px); column-gap: 20px; padding-right: 40px; }
  .challenge__text { padding-left: calc(56 / 1000 * 100%); letter-spacing: .03em; }
  .challenge__img { width: 100%; max-height: 150px; }
}
.select__list:focus { outline: none; }
.select__btn:focus { outline: none; }
.select__btn:focus-visible, .select-wrap.is-open .select__btn { outline: 2px solid var(--blue); outline-offset: 0; }

/* 右寄せ見出し（PCのみ右寄せ、SPは左寄せ） */
@media (min-width: 1024px) {
  .sec-intro--right { align-items: flex-end; text-align: right; }
  .sec-head--right-pc { align-items: flex-end; text-align: right; }
}

/* 見出しの改行：1〜2文字だけの行（孤立文字）を防ぐ */
.sec-title, .sec-lead, .fv__title, .philosophy__title, .use-card__title, .for-card__title,
.merit__ttl, .page-cta__text, .c-fv__title, .usecase-block__ttl, .challenge__ttl, .timeline__ttl,
.point-card__ttl, .approach-card__ttl, .cat-item__ttl, .steps__ttl, .points__ttl, .contact-card__title,
.legal__title, .confirm-head h3 {
  text-wrap: balance;
  word-break: auto-phrase;
}
.sec-text, .note, .timeline__text, .merit__desc, .cat-item__text, .challenge__text, .points__desc, .steps__desc {
  text-wrap: pretty;
}

/* HOW TO USE：SPはアコーディオン（流れを開閉） */
.use-card__toggle { display: none; }
@media (max-width: 1023px) {
  .use-card__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px 18px;
    background: var(--white);
    color: var(--blue);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .05em;
    border-top: 1px solid rgba(2, 22, 52, .08);
  }
  .use-card__toggle img { width: 16px; height: 16px; transform: scaleY(-1); transition: transform .3s; }
  .use-card__toggle[aria-expanded="true"] img { transform: none; }
  .use-card__body { display: grid; grid-template-rows: 0fr; padding: 0; border-radius: 0; transition: grid-template-rows .35s ease; }
  .use-card__body.is-open { grid-template-rows: 1fr; }
  .use-card__inner { overflow: hidden; min-height: 0; }
  .use-card__inner > .steps { padding: 6px 20px 30px; }
  .use-card__toggle[aria-expanded="true"] { padding-bottom: 8px; }
  .use-card { border-radius: 20px 20px 0 0; overflow: hidden; }
}

/* SPメニュー：項目名＋説明 */
.sp-menu__list { gap: 24px; }
.sp-menu__list a:not(.btn) { display: flex; flex-direction: column; gap: 4px; }
.sp-menu__label { font-size: 16px; font-weight: 500; }
.sp-menu__sub { font-size: 12px; font-weight: 400; color: var(--gray); letter-spacing: .03em; line-height: 1.4; }
.sp-menu__list a[aria-current="page"] .sp-menu__sub { color: var(--gray); }
.sp-menu__contact { margin-top: 12px; }

/* 案件カテゴリー：ページ内で残りのカテゴリーを表示 */
.center-link .text-link { cursor: pointer; }
.cat-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-bottom: 12px;
}
.cat-more[hidden] { display: none; }
.cat-more li {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 14px 20px;
  background: var(--ice);
  border-radius: 15px;
  font-size: var(--fs-item);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: left;
}
@media (min-width: 1024px) {
  .cat-more { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 36px; margin-bottom: 24px; }
  .cat-more li { min-height: 90px; padding: 20px 28px; }
}