/* Extracted from the Studio.Design export. Cascade order preserved. */
html,body{background:#fff}
[data-s-9be9077c-ee88-4adb-9e90-1e1fcf232361],[data-s-b70d0d49-6660-4e83-93c1-a60342e76855],[data-s-b5078d88-6490-4935-a0bf-b8c746809a6f],[data-s-5317d148-e979-4e53-bf2d-23ef68438ce9],[data-s-e8cfdb31-bdde-4d6a-a313-8754eef5ba7f],[data-s-92e64a6a-4679-4d42-bce7-0ec9aa4fb275]{display:none!important}
[data-s-15e9207c-0edf-4d18-beb3-af57414bf072]{display:none!important}[data-s-18118a13-d7ec-4829-b739-ee47cd967229]{display:none!important}[data-s-35fee2f2-086f-45ea-95d2-19a0bf3855f2]{display:none!important}[data-s-31b4cb25-2ede-4bde-b20e-5efe976b6b9e]{display:none!important}[data-s-345c1e92-394a-41d8-a4be-ce2c515a0058]{margin-bottom:32px!important}[data-s-054a8590-d9a1-4d7c-8605-541de5d12214]{margin-bottom:24px!important}
[data-s-39e55025-338d-4d97-9c61-68245cbb0eca]{display:none!important}[data-s-e9ed3fd1-4297-4c9a-8345-a8e03128ce31]{display:none!important}
[data-s-a51f2dd6-cda4-4853-9366-d38492ba0a2a]{display:none!important}[data-s-94f5eaba-5fa0-436d-9e3e-c5cfdd400c01]{display:none!important}[data-s-bd451f44-ab1d-4a83-8006-be7fd67b6b0c]{display:none!important}

/* --- Header: trim the dead space above the logo/nav row ---
   The export gives both headers `margin: 40px 0 0 0`, which pushed the row
   40px down the page. 16px matches the header's own horizontal gutter, so the
   row keeps a little breathing room without the gap reading as empty space.
   Both selectors are listed because the second header is the SP variant
   Studio ships display:none -- keeping them in step avoids a jump if it is
   ever re-enabled. Kept !important: this file loads before studio.css.
   The drawer's padding-top in sp-nav.css tracks this value. */
[data-s-203e86bb-d77a-41d3-8781-4e9d565d7fbf],
[data-s-c1ee7230-8277-476e-a2e0-609f2e3096b0] {
  margin-top: 16px !important;
}

/* --- In-page anchors: ease into the target, and leave a gap above it ---
   AI面接とは？ -> #features is the only anchor the nav ships today, and it
   jumped instantly, landing the section flush against the viewport top.

   scroll-padding-top on the scrollport rather than scroll-margin-top on
   #features: it offsets every anchor target at once, so the other section ids
   (#faq, #case-studies, #achievements ...) are already covered if a nav link
   ever points at one. It also covers sp-nav.js's manual scrollIntoView() for
   the drawer, which passes no explicit `behavior` and so inherits both of
   these properties from CSS.

   The header is not sticky -- it scrolls away with the page -- so this gap is
   breathing room above the section card, not header clearance. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
}

@media screen and (max-width: 840px) {
  html {
    scroll-padding-top: 48px;
  }
}

/* Smooth scrolling is real motion, so hand it back to an instant jump. The gap
   stays -- it is static. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --- Footer: collapse the dead space in the link row ---
   The row was laid out as two columns and given a fixed height (700px, 798px
   under 1040px) to fit the taller left one -- the sitemap nav
   [18118a13-d7ec], which this file hides above. With it gone the only
   remaining column is the 64px legal-link list, so the fixed height left
   ~440px (~600px under 1040px) of empty footer. Studio already switches the
   row to height:auto at 840px and below, which is why SP never showed the
   gap; this just extends that behaviour to the wider breakpoints.
   The column's height:calc(100% ...) has to go too, or it keeps resolving
   against the old fixed track. */
@media screen and (min-width: 841px) {
  [data-s-a9b7788d-6e05-4970-a33f-1306ae19c683],
  [data-s-f5e709fc-13a6-4610-bb44-5ad5fc940a16] {
    height: auto !important;
  }
}

/* Even with the row collapsed, 400px of the remaining desktop footer was pure
   padding against 324px of actual content -- the export's spacing was scaled
   for the two-column layout that no longer exists. These four values are the
   whole of it; vertical longhands only, so the horizontal gutters that keep
   the links aligned with the rest of the page are left alone. */
[data-s-2e7fe4f3-0fd5-44fe-8d20-2da456543cfa] {
  gap: 40px !important; /* was 80px, between the CTA band and the lower block */
}
[data-s-a9b7788d-6e05-4970-a33f-1306ae19c683] {
  padding-top: 56px !important; /* was 120px */
  padding-bottom: 40px !important; /* was 80px */
}
[data-s-0cafd352-befc-43e0-a953-3563cb7b6b6f] {
  padding-bottom: 48px !important; /* was 120px, the trailing band under the
                                      page-top button at the very page end */
}
/* Studio drops the row to 80px/80px here; keep it proportional rather than
   inheriting the wider breakpoint's asymmetric 56/40. */
@media screen and (max-width: 840px) {
  [data-s-a9b7788d-6e05-4970-a33f-1306ae19c683] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}
/* Only this band gave the column its own 40px bottom padding, which stacked on
   top of the row's and left the copyright/button gap 80px here against 40px
   everywhere else. */
@media screen and (min-width: 841px) and (max-width: 1040px) {
  [data-s-f5e709fc-13a6-4610-bb44-5ad5fc940a16] {
    padding-bottom: 0 !important;
  }
}

/* --- 導入事例 cards: static, not links --- */
/* The four case-study cards point nowhere, so they must not read as clickable.
   The markup drops the <a> plus the hover-only arrow badge and gradient wash;
   this kills the last hover cue, the lift shadow on the logo panel. Needs
   !important because studio.css loads after this sheet. */
.sd[data-s-f4b40019-c818-4b49-9942-fdd5b1127e96]:hover {
  box-shadow: none !important;
}

/* --- use case 01 illustration: blur reveal on scroll ---
   Unlike the 3つの特徴 frames and the use case 04 tiles, Studio ships no
   .appear rule for this image at all, so the reveal is authored here rather
   than revived by adding the class. The values match the use case 04 tiles --
   blur(16px) easing out over 1600ms -- so both blur reveals in the use case
   band read as the same effect.

   The .appear-active half is not redundant. main.js swaps .appear for
   .appear-active on reveal, and with no matching rule the duration would fall
   back to the 300ms `transition` entry.css puts on every .sd, snapping the
   blur off instead of easing it. Every reveal studio.css ships is written as
   this same pair.

   blur only, no opacity: nothing here is hidden behind JS, so the illustration
   still renders if the reveal never fires. Same reason it needs no
   prefers-reduced-motion opt-out -- a blur carries no motion. */
.sd[data-s-7f041959-2ab6-4a6e-908c-1b34ec35dbc2].appear {
  filter: blur(16px);
}
.sd[data-s-7f041959-2ab6-4a6e-908c-1b34ec35dbc2].appear,
.sd[data-s-7f041959-2ab6-4a6e-908c-1b34ec35dbc2].appear-active {
  transition-duration: 1600ms;
}

/* --- Hero: the notification bubbles land, then the phone fades up behind ---
   Five chat bubbles sit over the hero phone. All five already carry `appear`
   in the export, but studio.css defines no matching rule for any of them, so
   the class did nothing -- this reveal is authored, not revived.

   Each bubble pops from scale .6 on a back-out curve that overshoots ~4%
   before settling, staggered 120ms apart in reading order so they arrive like
   messages landing. The last one starts at 480ms and settles at ~900ms; the
   phone itself is held at opacity 0 until 900ms and then fades up whole over
   600ms, so the bubbles read as arriving first against empty space. The intro
   settles at ~1.5s.

   This block sits above the fold, so the IntersectionObserver in main.js fires
   it on load: it plays as a page intro rather than a scroll reveal. That does
   mean the hero image is invisible until the reveal pass runs -- the noscript
   rule in index.html covers JS-off, and main.js falls back to revealing
   everything where IntersectionObserver is missing.

   transition-property is pinned rather than inheriting the `all` that
   entry.css puts on every .sd. The overshoot curve is deliberately springy and
   .appear-active stays on the element for the life of the page -- left on
   `all`, that bounce would ride every later transition these bubbles make.

   Both halves of each pair are needed: main.js swaps .appear for
   .appear-active, and only the shared half stops the timing snapping back to
   the 300ms default. */

/* start state: each bubble sits small and invisible */
.sd[data-s-f02b90f1-df57-41ea-8313-548221320931].appear,
.sd[data-s-c9eec6f0-201c-4adb-ac68-f87de345431c].appear,
.sd[data-s-7981b949-2cfd-4874-a7b7-3ad8f46aec39].appear,
.sd[data-s-3eca3485-20d4-46aa-9c0b-3530bc7c4558].appear,
.sd[data-s-26c8bd3f-15eb-43ca-b908-687861ccd066].appear {
  opacity: 0;
  scale: 0.6;
}

/* shared timing; the back-out curve overshoots ~6% before settling */
.sd[data-s-f02b90f1-df57-41ea-8313-548221320931].appear,
.sd[data-s-f02b90f1-df57-41ea-8313-548221320931].appear-active,
.sd[data-s-c9eec6f0-201c-4adb-ac68-f87de345431c].appear,
.sd[data-s-c9eec6f0-201c-4adb-ac68-f87de345431c].appear-active,
.sd[data-s-7981b949-2cfd-4874-a7b7-3ad8f46aec39].appear,
.sd[data-s-7981b949-2cfd-4874-a7b7-3ad8f46aec39].appear-active,
.sd[data-s-3eca3485-20d4-46aa-9c0b-3530bc7c4558].appear,
.sd[data-s-3eca3485-20d4-46aa-9c0b-3530bc7c4558].appear-active,
.sd[data-s-26c8bd3f-15eb-43ca-b908-687861ccd066].appear,
.sd[data-s-26c8bd3f-15eb-43ca-b908-687861ccd066].appear-active {
  transition-property: opacity, scale;
  transition-duration: 420ms;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* stagger, in reading order */
.sd[data-s-f02b90f1-df57-41ea-8313-548221320931].appear,
.sd[data-s-f02b90f1-df57-41ea-8313-548221320931].appear-active {
  transition-delay: 0ms; /* 学生時代の経験については以上です */
}
.sd[data-s-c9eec6f0-201c-4adb-ac68-f87de345431c].appear,
.sd[data-s-c9eec6f0-201c-4adb-ac68-f87de345431c].appear-active {
  transition-delay: 120ms; /* 質問を考え中... */
}
.sd[data-s-7981b949-2cfd-4874-a7b7-3ad8f46aec39].appear,
.sd[data-s-7981b949-2cfd-4874-a7b7-3ad8f46aec39].appear-active {
  transition-delay: 240ms; /* 前職において、課題解決した */
}
.sd[data-s-3eca3485-20d4-46aa-9c0b-3530bc7c4558].appear,
.sd[data-s-3eca3485-20d4-46aa-9c0b-3530bc7c4558].appear-active {
  transition-delay: 360ms; /* 前職ではスタッフ間の情報共有不足の */
}
.sd[data-s-26c8bd3f-15eb-43ca-b908-687861ccd066].appear,
.sd[data-s-26c8bd3f-15eb-43ca-b908-687861ccd066].appear-active {
  transition-delay: 480ms; /* 解決方法として、どのような */
}

/* the phone behind them: absent until the bubbles have all landed, then it
   fades up whole */
.sd[data-s-784d61a6-1173-47b6-aff1-a898a6884da1].appear {
  opacity: 0;
}
.sd[data-s-784d61a6-1173-47b6-aff1-a898a6884da1].appear,
.sd[data-s-784d61a6-1173-47b6-aff1-a898a6884da1].appear-active {
  transition-property: opacity;
  transition-duration: 600ms;
  transition-delay: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  /* keep the staggered fade, drop the pop */
  .sd[data-s-f02b90f1-df57-41ea-8313-548221320931].appear,
  .sd[data-s-c9eec6f0-201c-4adb-ac68-f87de345431c].appear,
  .sd[data-s-7981b949-2cfd-4874-a7b7-3ad8f46aec39].appear,
  .sd[data-s-3eca3485-20d4-46aa-9c0b-3530bc7c4558].appear,
  .sd[data-s-26c8bd3f-15eb-43ca-b908-687861ccd066].appear {
    scale: 1;
  }
  .sd[data-s-f02b90f1-df57-41ea-8313-548221320931].appear,
  .sd[data-s-f02b90f1-df57-41ea-8313-548221320931].appear-active,
  .sd[data-s-c9eec6f0-201c-4adb-ac68-f87de345431c].appear,
  .sd[data-s-c9eec6f0-201c-4adb-ac68-f87de345431c].appear-active,
  .sd[data-s-7981b949-2cfd-4874-a7b7-3ad8f46aec39].appear,
  .sd[data-s-7981b949-2cfd-4874-a7b7-3ad8f46aec39].appear-active,
  .sd[data-s-3eca3485-20d4-46aa-9c0b-3530bc7c4558].appear,
  .sd[data-s-3eca3485-20d4-46aa-9c0b-3530bc7c4558].appear-active,
  .sd[data-s-26c8bd3f-15eb-43ca-b908-687861ccd066].appear,
  .sd[data-s-26c8bd3f-15eb-43ca-b908-687861ccd066].appear-active {
    transition-property: opacity;
    transition-timing-function: ease-out;
  }
}

/* --- Inquiry form: validation error states --- */
.mf-input-error {
  border-color: #e53e3e !important;
  box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2) !important;
}
.mf-error-msg {
  color: #e53e3e;
  font-size: 12px;
  margin: 4px 0 0 0;
  padding: 0;
  line-height: 1.4;
}
.mf-submit-error {
  color: #e53e3e;
  font-size: 13px;
  text-align: center;
  margin: 0 0 12px 0;
  padding: 10px 16px;
  background: #fff5f5;
  border-radius: 6px;
  border: 1px solid #feb2b2;
}

/* --- Inquiry form: inline success state --- */
.mf-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 12px;
}
.mf-success__icon {
  font-size: 56px !important;
  color: #2a9d8f;
}
.mf-success__title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0;
  line-height: 1.4;
}
.mf-success__body {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.7;
}