/*
rev. 2026-01-23
copyright © 2026
*/
@layer reset, base, general, component, main-base, main;
@layer reset {
  /*! kiso.css v1.2.2 | MIT License | https://github.com/tak-dcxi/kiso.css */
  *,
  :after,
  :before {
    box-sizing: border-box;
  }
  :where(:root) {
    font-family: sans-serif;
    line-height: 1.5;
    text-spacing-trim: trim-start;
    text-autospace: normal;
    line-break: strict;
    overflow-wrap: anywhere;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
    -webkit-tap-highlight-color: transparent;
  }
  :where(body) {
    min-block-size: 100dvb;
    margin: unset;
  }
  :where(h1, h2, h3, h4, h5, h6) {
    text-wrap: pretty;
  }
  :where(h1) {
    margin-block: 0.67em;
    font-size: 2em;
  }
  :where(h2, h3, h4, h5, h6) {
    margin-block: unset;
  }
  :where(search) {
    display: block;
  }
  :where(p, blockquote, figure, pre, address, ul, ol, dl, menu) {
    margin-block: unset;
  }
  :where(blockquote, figure) {
    margin-inline: unset;
  }
  :where(p:lang(en)) {
    text-wrap: pretty;
  }
  :where(address:lang(ja)) {
    font-style: unset;
  }
  :where(ul, ol, menu) {
    padding-inline-start: unset;
    list-style-type: "";
  }
  :where(dt) {
    font-weight: bolder;
  }
  :where(dd) {
    margin-inline-start: unset;
  }
  :where(pre) {
    text-spacing-trim: space-all;
    text-autospace: no-autospace;
  }
  :where(em:lang(ja)) {
    font-weight: bolder;
  }
  :where(:is(i, cite, em, dfn, var):lang(ja)) {
    font-style: unset;
  }
  :where(code, kbd, samp) {
    font-family:
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      Liberation Mono,
      Courier New,
      monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: unset;
    font-variant-ligatures: none;
  }
  :where(abbr[title]) {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    cursor: help;
  }
  :where(time) {
    text-autospace: no-autospace;
  }
  @media (forced-colors: active) {
    :where(mark) {
      background-color: Highlight;
      color: HighlightText;
    }
  }
  @media print {
    :where(mark) {
      border-width: 1px;
      border-style: dotted;
    }
  }
  :where(a:any-link) {
    color: unset;
    text-decoration-line: unset;
    text-decoration-thickness: from-font;
  }
  :where(img, svg, picture, video, canvas, model, audio, iframe, embed, object) {
    block-size: auto;
    max-inline-size: 100%;
    vertical-align: bottom;
  }
  :where(iframe) {
    border: unset;
  }
  :where(table) {
    border-collapse: collapse;
  }
  :where(caption, th) {
    text-align: unset;
  }
  :where(caption) {
    text-wrap: pretty;
  }
  ::file-selector-button,
  :where(button, input, select, textarea) {
    border: 1px solid;
    border-color: unset;
    border-radius: unset;
    color: unset;
    font: unset;
    letter-spacing: unset;
    text-align: unset;
  }
  :where(input:is([type="radio" i], [type="checkbox" i])) {
    margin: unset;
  }
  :where(input[type="file" i]) {
    border: unset;
  }
  :where(input[type="search" i]) {
    -webkit-appearance: textfield;
  }
  @supports (-webkit-touch-callout: none) {
    :where(input[type="search" i]) {
      background-color: Canvas;
    }
  }
  :where(input:is([type="tel" i], [type="url" i], [type="email" i], [type="number" i]):not(:placeholder-shown)) {
    direction: ltr;
  }
  :where(textarea) {
    margin-block: unset;
    resize: block;
  }
  :where(input:not([type="button" i], [type="submit" i], [type="reset" i]), textarea, [contenteditable]) {
    text-autospace: no-autospace;
  }
  ::file-selector-button,
  :where(button, input:is([type="button" i], [type="submit" i], [type="reset" i])) {
    background-color: unset;
  }
  ::file-selector-button,
  :where(button, input:is([type="button" i], [type="submit" i], [type="reset" i]), [role="tab" i], [role="button" i], [role="option" i]) {
    touch-action: manipulation;
  }
  :where(:enabled)::file-selector-button,
  :where(button:enabled, label[for], select:enabled, input:is([type="button" i], [type="submit" i], [type="reset" i], [type="radio" i], [type="checkbox" i]):enabled, [role="tab" i], [role="button" i], [role="option" i]) {
    cursor: pointer;
  }
  :where(fieldset) {
    min-inline-size: 0;
    margin-inline: unset;
    padding: unset;
    border: unset;
  }
  :where(legend) {
    padding-inline: unset;
  }
  :where(progress) {
    vertical-align: unset;
  }
  ::placeholder {
    opacity: unset;
  }
  :where(summary) {
    list-style-type: "";
    cursor: pointer;
  }
  :where(summary)::-webkit-details-marker {
    display: none;
  }
  :where(dialog, [popover]) {
    overscroll-behavior-block: contain;
    padding: unset;
    border: unset;
  }
  :where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
    display: none !important;
  }
  :where(dialog) {
    max-inline-size: unset;
    max-block-size: unset;
  }
  :where(dialog)::backdrop {
    background-color: oklch(0 0 0deg/30%);
  }
  :where([popover]) {
    margin: unset;
  }
  :where(:focus-visible) {
    outline-offset: 3px;
  }
  [tabindex="-1"]:focus {
    outline: none !important;
  }
  :where(:disabled, [aria-disabled="true" i]) {
    cursor: default;
  }
  [hidden]:not([hidden="until-found" i]) {
    display: none !important;
  }
}
@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}
.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.splide--rtl {
  direction: rtl;
}
.splide__track--ttb > .splide__list {
  display: block;
}
.splide__container {
  box-sizing: border-box;
  position: relative;
}
.splide__list {
  backface-visibility: hidden;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}
.splide__pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}
.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}
.splide:not(.is-overflow) .splide__pagination {
  display: none;
}
.splide__progress__bar {
  width: 0;
}
.splide {
  position: relative;
  visibility: hidden;
}
.splide.is-initialized,
.splide.is-rendered {
  visibility: visible;
}
.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}
.splide__slide img {
  vertical-align: bottom;
}
.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: #0000;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}
.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
  display: none;
}
.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}
.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
@layer base {
  :root {
    --color-lightest: #fff;
    --color-lightest-50per: #ffffff80;
    --color-darkest: #333;
    --color-primary: #025;
    --color-primary-darker: #00041f;
    --color-primary-darker-02: #001331;
    --color-primary-70per: #002255b3;
    --color-primary-40per: #0256;
    --color-secondary: #023581;
    --color-tertiary: #007;
    --color-cta: #9f6b2f;
    --color-cta-02: #dba45b;
    --color-cta-lighter: #fff8e8;
    --color-red: #931414;
    --color-anchor-link: #bf8a49;
    --color-text-primary: var(--color-darkest);
    --color-text-gray: #6f7071;
    --color-text-gray-02: #4c4948;
    --color-text-placeholder: #a6a6a6;
    --color-text-link: var(--color-primary);
    --color-text-link-hover: #2961b4;
    --color-text-link-disable: #d6d6d6;
    --color-text-link-primary-disable: #c7d6e6;
    --color-error: #dd1b1b;
    --color-bg-error: #ffe0e0;
    --color-bg-primary: var(--color-lightest);
    --color-bg-secondary: #f2f3f6;
    --color-bg-category: #e9ebf2;
    --color-bg-select: #c1d5ee;
    --color-bg-gray: #f8f9fc;
    --color-bg-gray-02: #f5f8ff;
    --color-bg-tertiary: #e0e3ec;
    --color-bg-tertiary02: #e5eefa;
    --color-bg-tertiary03: #f3f3fa;
    --color-bg-tertiary04: #fdfaf8;
    --color-bg-tertiary05: #f9f2eb;
    --color-bg-modal: #000f25b3;
    --color-bg-slide-button: #000000b3;
    --color-bg-link-normal: var(--color-lightest);
    --color-bg-link-normal-hover: var(--color-text-link-hover);
    --color-bg-link-emphasis: var(--color-text-link);
    --color-bg-link-emphasis-hover: var(--color-lightest);
    --color-bg-link-back: var(--color-bg-secondary);
    --color-bg-link-back-hover: #ececec;
    --color-bg-bgb-gray: #ececec;
    --color-bg-bgb-blue: #d8f1fb;
    --color-bg-bgb-pink: #fddde4;
    --color-bg-bgb-yellow: #faf4e6;
    --color-shadow-bg-white: 0 4px 12px 0 #9da4be15;
    --color-shadow-bg-gray: 0 4px 12px 0 #7c86ab20;
    --color-border-default: #bfbfbf;
    --color-border-light: #d6d6d6;
    --color-border-light-02: #fff9;
    --color-border-gold: #ce9a4d;
    --color-border-gray: #1d1d1d;
    --color-border-gray-02: #e6e8f0;
    --color-border-gray-03: #dbe0f0;
    --gradient-gold: linear-gradient(90deg, #9f6b2f00, #9f6b2f 50%, #9f6b2f00);
    --gradient-gold-02: linear-gradient(270deg, #99652b, #bf8a49 100%);
    --gradient-gold-03: linear-gradient(90deg, #0000, #9f6b2f 14%, #9f6b2f 88%, #0000);
    --gradient-gold-05: linear-gradient(90deg, #9f6b2f82 30%, #9f6b2f00);
    --gradient-gold-04: linear-gradient(180deg, #d5a252, #7d4f1c);
    --gradient-button-bg-blue: linear-gradient(180deg, #68f5ff, #68f5ff3a 100%);
    --gradient-button-bg-gold: linear-gradient(180deg, #d5a252, #7d4f1c 100%);
    --gradient-border-gold: linear-gradient(180deg, #ce9a4d, #d5a252 100%);
    --gradient-button-bg-gold-02: linear-gradient(90deg, #bf8a49, #99652b 100%);
    --gradient-border-gold-02: linear-gradient(90deg, #ffe9cd, #9f6b2f);
    --gradient-border-gold-02-sp: linear-gradient(180deg, #ffe9cd, #9f6b2f);
    --gradient-button-bg-black: linear-gradient(180deg, #5d5d5d, #161616 100%);
    --gradient-border-black: linear-gradient(180deg, #1d1d1d, #686868 100%);
    --gradient-button-bg-red: linear-gradient(180deg, #c83b3b, #931414 100%);
    --gradient-border-red: linear-gradient(180deg, #e38b8b, #c83b3b 100%);
    --gradient-blue: linear-gradient(90deg, #0000, #023581 33%, #023581 66%, #0000);
    --gradient-blue-02: linear-gradient(270deg, #052450 0.39%, #0046c0 99.6%);
    --gradient-blue-03: linear-gradient(180deg, #002566, #00258e);
    --gradient-blue-04: linear-gradient(120deg, #326abb, #05357a);
    --gradient-lightblue: linear-gradient(198deg, #e2e7ef 0%, #3a6fbc 100%), var(--color-must-lightest, #fff);
    --gradient-footer-bg-blue: linear-gradient(85deg, #052450, #004bcc 90%);
    --gradient-hero-bg-blue: linear-gradient(25deg, #052450, #004bcc 100%);
    --gradient-hero-obj-blue-01: linear-gradient(270deg, #01347b00, #002d6e 100%);
    --gradient-hero-obj-blue-02: linear-gradient(180deg, #004bcc00, #002e6e 100%);
    --gradient-hero-obj-blue-03: linear-gradient(175deg, #00409c, #002e6e00 100%);
    --gradient-indrustry-bg-blue: linear-gradient(25deg, #052450 20%, #004bcc 88%);
    --gradient-cta-obj-blue-01: linear-gradient(270deg, #0000, #000 100%);
    --gradient-cta-obj-blue-02: linear-gradient(180deg, #0000, #000 100%);
    --gradient-cta-register-bg: linear-gradient(254deg, #004bcc4d 11.15%, #02337a4d 89.08%);
    --gradient-cta-register-bg-on-footer: linear-gradient(254deg, rgba(0, 75, 204, 0.376) 11.15%, rgba(2, 51, 122, 0.376) 89.08%);
    --gradient-industry-cta-bg: linear-gradient(-168deg, #fafafa 25%, #ede2c7 75%, #dcceac 110%);
    --gradient-industry-cta-bg-01: linear-gradient(239deg, #bda27e00 68%, #bda27e33 121%);
    --gradient-industry-cta-bg-02: linear-gradient(239deg, #bda27e00 68%, #bda27e80 121%);
    --gradient-industry-cta-bg-03: linear-gradient(160deg, #eece41, #0000 100%);
    --gradient-industry-cta-bg-04: linear-gradient(160deg, #e2cf79, #0000 100%);
    --gradient-oricon-obj-gold-01: linear-gradient(-135deg, #0000 30%, #bda27e);
    --gradient-oricon-obj-gold-02: linear-gradient(-80deg, #0000 70%, #fdefd2);
    --gradient-oricon-obj-gold-03: linear-gradient(160deg, #eece41, #0000 100%);
    --gradient-oricon-bg-gold: linear-gradient(-118deg, #fafafa 50%, #ede2c7 75%, #dcceac);
    --gradient-white: linear-gradient(180deg, #fff0, #fff 69.87%);
    --gradient-white-02: linear-gradient(180deg, #fff0, #fff 48%);
    --gradient-white-03: linear-gradient(135deg, #fff0, #fff);
    --gradient-corner-title: linear-gradient(180deg, #0235811f -6.96%, #02358100), #fff;
    --gradient-consultant-title: linear-gradient(90deg, var(--color-secondary) 25%, #0000 65%);
    --gradient-consultant-title-sp: linear-gradient(90deg, var(--color-secondary) 23%, #0000 100%);
    --gradient-bg-consultant-title: linear-gradient(90deg, #c2c4d0 calc(50vw - 850px), #0000 20%, #0000 80%, #ececec calc(50vw + 960px));
    --gradient-bg-company-interview: linear-gradient(180deg, #0235831f 12%, #0000);
    --gradient-obj-company-interview: linear-gradient(180deg, #0000, #0235811a);
    --gradient-bg-successful-case: linear-gradient(180deg, #9f6b2f, #0000 48%);
    --gradient-obj-successful-case: linear-gradient(180deg, #0000, #9f6b2f4d);
    --gradient-contents-obj-blue-01: linear-gradient(73deg, #3365ae73, #3365ae00 70%);
    --gradient-contents-obj-blue-02: linear-gradient(73deg, #3365ae75, #3365ae00 60%);
    --gradient-contents-obj-blue-03: linear-gradient(180deg, #3365ae1a, #fff0);
    --gradient-contents-obj-blue-04: linear-gradient(180deg, #3365ae1a, #fff0);
    --spacing-no: 0;
    --spacing-x-min: 2px;
    --spacing-min: 4px;
    --spacing-xs: 8px;
    --spacing-s: 12px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 40px;
    --spacing-2xl: 48px;
    --spacing-3xl: 56px;
    --spacing-4xl: 64px;
    --spacing-5xl: 80px;
    --spacing-6xl: 90px;
    --spacing-max: 96px;
    --font-family-jp: "Noto Sans JP", sans-serif;
    --font-family-en: "Noto Sans", sans-serif;
    --font-family-number: "Noto Sans", "Noto Sans JP", sans-serif;
    --font-weight-jp-regular: normal;
    --font-weight-jp-medium: 500;
    --font-weight-jp-bold: bold;
    --font-weight-en-medium: 500;
    --font-weight-en-bold: bold;
    --line-height-button: 1.3;
    --line-height-title: 1.5;
    --line-height-text: 1.8;
    --font-size-small-4: 10px;
    --font-size-small-3: 11px;
    --font-size-small-2: 12px;
    --font-size-small-1: 13px;
    --font-size-small: 14px;
    --font-size-base: 16px;
    --font-size-large: 18px;
    --font-size-15: 15px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-size-26: 26px;
    --font-size-28: 28px;
    --font-size-32: 32px;
    --font-size-38: 38px;
    --font-size-40: 40px;
    --font-size-h1: 30px;
    --font-size-h2: var(--font-size-28);
    --font-size-h3: var(--font-size-22);
    --font-size-h4: var(--font-size-20);
    --font-size-h5: var(--font-size-large);
    --font-size-h6: var(--font-size-base);
    --font-size-button-normal: 16px;
    --font-size-button-small: 14px;
    --radius-none: 0;
    --radius-small: 2px;
    --radius-normal: 4px;
    --radius-large: 8px;
    --radius-max: 9999px;
    --view-size-page-frame: 1440px;
    --view-size-content-main: 1200px;
    --view-size-bge-content: 960px;
    --margin-outside-grid: 90px;
    --margin-megamenu-width: 1200px;
    --content-padding: 16px;
    --content-padding-large: 120px;
    --content-mt: 56px;
    --content-mb: 96px;
    --column-gap-none: 0;
    --column-gap-2col: 32px;
    --column-gap-3col: 32px;
    --column-gap-4col: 24px;
    --column-gap-5col: 16px;
    --bgb-mb-none: 0;
    --bgb-mb-small: 24px;
    --bgb-mb-default: 48px;
    --bgb-mb-large: 80px;
    --modal-padding-sum: 80px;
    --lightest-color: var(--color-lightest);
    --darkest-color: var(--color-darkest);
    --base-font-color: var(--color-text-primary);
    --border-color: var(--color-border-default);
    --base-font-size: var(--font-size-base);
    --base-line-height: var(--line-height-text);
    --font-family-body: var(--font-family-jp);
    --font-family-heading: var(--font-family-jp);
    interpolate-size: allow-keywords;
    @media (width < 768px) {
      --content-mt: 24px;
      --content-mb: 64px;
      --column-gap-none: 0;
      --column-gap-2col: 16px;
      --column-gap-3col: 16px;
      --column-gap-4col: 16px;
      --column-gap-5col: 8px;
      --margin-outside-grid: 16px;
      --margin-megamenu-width: 100%;
      --font-size-small-3: 10px;
      --font-size-small-2: 11px;
      --font-size-small-1: 12px;
      --font-size-small: 13px;
      --font-size-base: 14px;
      --font-size-large: 16px;
      --font-size-20: 18px;
      --font-size-24: 22px;
      --font-size-22: 20px;
      --font-size-26: 24px;
      --font-size-28: 26px;
      --font-size-32: 28px;
      --font-size-40: 38px;
      --font-size-h1: var(--font-size-28);
      --font-size-h2: var(--font-size-24);
      --font-size-h3: var(--font-size-22);
      --font-size-h4: var(--font-size-20);
      --font-size-h5: var(--font-size-large);
      --font-size-h6: var(--font-size-base);
      --font-size-button-normal: 16px;
      --font-size-button-small: 14px;
      --modal-padding-sum: 102px;
    }
  }
}
@layer general {
  * {
    &,
    &:after,
    &:before {
      box-sizing: border-box;
    }
  }
  html {
    scroll-behavior: smooth;
    @media (width >= 1300px) {
      &:has(.c-nav-global__item-wrap[aria-hidden="false"]) {
        overflow: hidden;
      }
    }
    &:has(.c-search-recruitment__search-inner),
    &:has(body[data-ham-open="true"]) {
      overflow: hidden;
    }
  }
}
@layer general {
  body {
    padding: 0;
    margin: 0;
    font-family: var(--font-family-body);
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    color: var(--base-font-color);
    [data-device="sp"] {
      @media (768px <=width) {
        display: none;
      }
    }
  }
}
@layer general {
  button {
    line-height: var(--line-height-button);
    border-radius: 0;
  }
  img {
    min-inline-size: 0;
    min-block-size: 0;
  }
}
@layer general {
}
@layer component {
  .c-page-home {
    inline-size: 100%;
    block-size: 100%;
    section {
      &:has(.c-qa) {
        max-inline-size: calc(var(--view-size-content-main) + var(--spacing-lg));
        padding-inline: var(--spacing-sm);
        margin-block: var(--spacing-3xl) var(--spacing-5xl);
        margin-inline: auto;
        @media (width < 768px) {
          margin-block: var(--spacing-xl) var(--spacing-2xl);
        }
      }
    }
  }
}
@layer component {
  .c-page-sub {
    inline-size: 100%;
    block-size: 100%;
    container-type: inline-size;
  }
  .c-page-sub__base {
    &:not(:has(.c-page-sub__side-nav)) {
      @media (768px <=width) {
        display: grid;
        grid-template: "header" auto "main" 1fr "footer" auto/1fr;
        inline-size: 100%;
        min-block-size: 100svh;
      }
    }
  }
  .c-page-sub__header {
    @media (768px <=width) {
      grid-area: header;
    }
  }
  .c-page-sub__footer {
    @media (768px <=width) {
      grid-area: footer;
    }
  }
  .c-page-sub__main {
    @media (768px <=width) {
      grid-area: main;
      min-inline-size: 0;
    }
    &:has(.c-page-sub__content > .c-page-sub__content-body > [class^="c-favorites"]),
    &:has(.c-page-sub__content > .c-page-sub__content-body > [class^="c-request"]),
    &:has(.c-page-sub__content > .c-page-sub__content-body > [class^="c-search"]) {
      background: var(--color-bg-secondary);
    }
    :where(main) {
      position: relative;
      @media (768px <=width) {
        block-size: 100%;
      }
    }
  }
  .c-page-sub__mbe {
    margin-block-end: var(--mbe-pc, var(--spacing-no));
    @media (width < 768px) {
      margin-block-end: var(--mbe-sp, var(--mbe-pc, var(--spacing-no)));
    }
  }
  .c-page-sub__pbe {
    padding-block-end: var(--pbe-pc, var(--spacing-no));
    @media (width < 768px) {
      padding-block-end: var(--pbe-sp, var(--pbe-pc, var(--spacing-no)));
    }
  }
  .c-page-sub__side {
    max-inline-size: var(--view-size-content-main);
    margin-inline: auto;
    @media (width > 940px) {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: var(--spacing-md) var(--spacing-3xl);
      align-items: start;
      padding-block-start: var(--spacing-md);
    }
    [class="c-page-sub__content-body"] {
      padding-block-start: 0;
      @media (width < 940px) {
        padding-block-end: var(--spacing-4xl);
      }
    }
    &:has(.c-consultant) {
      padding-block-start: var(--spacing-md);
      @media (width > 940px) {
        padding-block-start: var(--spacing-2xl);
      }
    }
    [class="c-page-sub__side-nav"] {
      @media (width > 940px) {
        block-size: 100%;
      }
      @media (width < 940px) {
        padding-block-end: var(--spacing-2xl);
      }
    }
  }
  .c-page-sub__side-contents {
    min-inline-size: 0;
  }
  .c-page-sub__content {
    position: relative;
    padding-inline: var(--spacing-sm);
    @media (768px <=width) {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      block-size: 100%;
    }
    & > * {
      @media (768px <=width) {
        inline-size: 100%;
      }
    }
  }
  .c-page-sub__content:before {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    content: "";
    background-color: var(--color-bg-modal);
    opacity: 0;
    transition: opacity 0.2s ease-in;
    @media (768px <=width) {
      display: none;
    }
  }
  .c-page-sub__content:has(.c-dropdown-search[aria-hidden="false"]):before {
    pointer-events: auto;
    opacity: 1;
  }
  .c-page-sub__title-page {
    max-inline-size: var(--view-size-content-main);
    margin-inline: auto;
    &:has(.c-title-page-consultant) {
      position: relative;
      inline-size: calc(100% + var(--spacing-sm) * 2);
      max-inline-size: unset;
      margin-inline: calc(var(--spacing-sm) * -1);
      &:before {
        position: absolute;
        inset: 0 0 auto;
        inline-size: 100%;
        block-size: 100%;
        content: "";
      }
    }
    &:has(+ .c-page-sub__detail-meta) {
      h1 {
        margin-block-end: var(--spacing-min);
      }
    }
  }
  .c-page-sub__detail-meta {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: end;
    margin-block-end: var(--spacing-md);
    font-size: var(--font-size-small);
    line-height: var(--line-height-text);
    @media (width < 768px) {
      margin-block-end: var(--spacing-lg);
      font-size: var(--font-size-base);
    }
  }
  .c-page-sub__nav-breadcrumb-bottom,
  .c-page-sub__nav-breadcrumb-top {
    max-inline-size: var(--view-size-content-main);
    margin-inline: auto;
  }
  .c-page-sub__nav-breadcrumb-top {
    padding-block: var(--spacing-sm);
    @media (width < 768px) {
      display: none;
    }
  }
  .c-page-sub__nav-breadcrumb-bottom {
    padding-block: var(--spacing-s) var(--spacing-sm);
    @media (768px <=width) {
      display: none;
    }
  }
  .c-page-sub__content-index {
    padding-block-end: 3.52941em;
  }
  .c-page-sub__content-index,
  .c-page-sub__content-main {
    max-inline-size: var(--content-width);
    margin-inline: auto;
  }
  .c-page-sub__content-body {
    flex: 1 0 auto;
    max-inline-size: var(--view-size-bge-content);
    padding-block: var(--spacing-md) var(--spacing-5xl);
    margin-inline: auto;
    @media (width < 768px) {
      padding-block-end: var(--spacing-2xl);
    }
    &:has(.c-company-interview) {
      inline-size: calc(100% + var(--spacing-lg));
      max-inline-size: none;
      padding-inline: var(--spacing-sm);
      margin-inline: calc(var(--spacing-sm) * -1);
      overflow: hidden;
    }
    &:has(.c-search-results) {
      max-inline-size: var(--view-size-content-main);
      padding-block-start: var(--spacing-sm);
    }
    &:has(.c-company-info) {
      padding-block: var(--spacing-no) var(--spacing-5xl);
      @media (width < 768px) {
        padding-block-end: var(--spacing-2xl);
      }
    }
    &:has(.c-request) {
      padding-block-start: var(--spacing-no);
      @media (width < 768px) {
        padding-block-start: var(--spacing-sm);
      }
    }
    &:has(.c-favorites) {
      padding-block-start: var(--spacing-sm);
    }
    &:has(+ .c-page-sub__category-list),
    &:has(+ .c-page-sub__related-list),
    &:has(+ .c-search-category-title) {
      padding-block-end: var(--spacing-4xl);
      @media (width < 768px) {
        padding-block-end: var(--spacing-2xl);
      }
    }
  }
  .c-page-sub__category-list,
  .c-page-sub__related-list {
    max-inline-size: var(--view-size-content-main);
    margin-inline: auto;
  }
  .c-page-sub__category-list {
    padding-block-end: var(--spacing-5xl);
    @media (width < 768px) {
      padding-block-end: var(--spacing-2xl);
    }
    &:has(.c-button-back) {
      display: grid;
      row-gap: var(--spacing-md);
    }
  }
}
@layer component {
  .c-header {
    position: relative;
    z-index: 15;
    min-block-size: 75px;
    padding: var(--spacing-sm);
    border-block-end: 1px solid var(--color-border-light);
    @media (width < 768px) {
      min-block-size: 57px;
    }
    @media (width < 576px) {
      padding-block: var(--spacing-s);
    }
    &:has(.c-nav-global__item-wrap[aria-hidden="false"]) {
      [class="c-header__backdrop"] {
        pointer-events: auto;
        opacity: 1;
      }
    }
  }
  .c-header__backdrop {
    display: none;
    @media (width >= 1300px) {
      position: absolute;
      inset: 75px 0 0 0;
      display: inline-block;
      inline-size: 100vw;
      block-size: calc(100vh - 75px);
      vertical-align: middle;
      pointer-events: none;
      background-color: var(--color-bg-modal);
      opacity: 0;
      transition: opacity 0.2s;
    }
  }
  .c-header__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block: 0;
    margin-inline: auto;
  }
  .c-header__title {
    flex: 0 1 auto;
  }
  .c-header__site-name {
    margin: 0;
    > a {
      display: flex;
      gap: var(--spacing-sm);
      align-items: center;
      color: inherit;
      text-decoration: none;
      @media (width < 576px) {
        gap: var(--spacing-xs);
      }
    }
    &:has(img:nth-child(3)) {
      img:first-of-type {
        @media (width < 768px) {
          display: none;
        }
      }
      img:nth-child(2) {
        @media (768px <=width) {
          display: none;
        }
      }
    }
    img {
      &:first-of-type,
      &:nth-child(2) {
        max-inline-size: 7.5rem;
        @media (width < 576px) {
          max-inline-size: 5.5rem;
        }
      }
      &:last-of-type {
        max-inline-size: 3.125rem;
        @media (width < 576px) {
          max-inline-size: 2.125rem;
        }
      }
    }
    span {
      font-size: var(--font-size-small-2);
      font-weight: var(--font-weight-jp-medium);
      line-height: 1.33333;
      color: var(--color-text-placeholder);
      @media (width < 768px) {
        display: none;
      }
      > span {
        display: block;
      }
    }
  }
  .c-header__links {
    display: flex;
    flex: 0 1 auto;
    gap: var(--spacing-2xl);
    align-items: center;
    padding: 0;
    margin: 0;
    @media (width <= 1300px) {
      flex-direction: row-reverse;
    }
    @media (width < 576px) {
      gap: var(--spacing-s);
    }
  }
  .c-header__info {
    ul {
      display: flex;
      gap: var(--spacing-sm);
      padding: 0;
      margin: 0;
      @media (width < 576px) {
        gap: var(--spacing-xs);
      }
      > li {
        display: flex;
      }
      a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: var(--font-size-small-1);
        line-height: var(--line-height-button);
        &[aria-current="page"] {
          > span {
            font-weight: var(--font-weight-jp-bold);
            color: var(--color-secondary);
          }
        }
        &:before {
          position: absolute;
          inset-block-end: -19px;
          inset-inline: 0;
          display: inline-block;
          inline-size: var(--spacing-2xl);
          block-size: 2px;
          margin-inline: auto;
          vertical-align: middle;
          content: "";
          background-color: var(--color-secondary);
          opacity: 0;
          transition: opacity 0.3s;
        }
        > svg {
          @media (width < 576px) {
            inline-size: 1.25rem;
            block-size: 1.25rem;
          }
        }
        > span {
          @media (width < 576px) {
            font-size: 0.5625rem;
          }
        }
      }
    }
  }
  @media (any-hover: hover) {
    .c-header__info ul a:hover {
      &:before {
        opacity: 1;
      }
    }
  }
  .c-header__nav {
    z-index: 1;
  }
  .c-header__nav-btn {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--spacing-lg);
    block-size: var(--spacing-lg);
    padding: 0;
    text-align: end;
    text-decoration: none;
    cursor: pointer;
    background: #0000;
    border: none;
    @media (width >= 1300px) {
      display: none;
    }
  }
  .c-header__nav-btn-text {
    font-size: 0;
  }
  .c-header__nav-btn-line {
    display: block;
    inline-size: 100%;
    block-size: 1px;
    background: var(--color-darkest);
    transition: background 0.3s;
    [aria-expanded="true"] & {
      background: #0000;
      &:before {
        inset-block-start: 50%;
        rotate: 45deg;
      }
      &:after {
        inset-block: 50% auto;
        rotate: -45deg;
      }
    }
    &:after,
    &:before {
      position: absolute;
      inset-inline-start: 0;
      display: inline-block;
      inline-size: 100%;
      block-size: 1px;
      vertical-align: middle;
      content: "";
      background: var(--color-darkest);
      transition:
        rotate 0.3s,
        transform 0.3s;
    }
    &:before {
      inset-block-start: 6px;
    }
    &:after {
      inset-block-end: 6px;
    }
  }
  .c-header__nav-menu {
    @media (width <= 1300px) {
      position: fixed;
      inset-block-start: 75px;
      inset-inline-start: 0;
      z-index: 5;
      inline-size: 100%;
      block-size: calc(100vh - 75px);
      padding-block: var(--spacing-sm) var(--spacing-md);
      padding-inline: var(--spacing-sm);
      overflow-y: auto;
      background: var(--color-lightest);
      transition:
        display allow-discrete 0.2s,
        opacity 0.2s;
      &[aria-hidden="true"] {
        display: none;
        opacity: 0;
      }
      &[aria-hidden="false"] {
        display: block;
        opacity: 1;
        @starting-style {
          opacity: 0;
        }
      }
    }
    @media (width < 576px) {
      inset-block-start: 57px;
      block-size: calc(100vh - 57px);
      padding-block: var(--spacing-sm) var(--spacing-5xl);
      padding-inline: 0;
    }
  }
}
@layer component {
  .c-footer {
    padding-block: var(--space-md);
  }
  .c-footer__body {
    background-color: var(--color-bg-secondary);
  }
  .c-footer__inner {
    max-inline-size: calc(var(--view-size-content-main) + var(--spacing-lg));
    padding-block: var(--spacing-md);
    padding-inline: var(--spacing-sm);
    margin-inline: auto;
  }
  .c-footer__sitename {
    > a {
      display: flex;
      gap: var(--spacing-sm);
      align-items: center;
      color: inherit;
      text-decoration: none;
      @media (width < 576px) {
        gap: var(--spacing-xs);
      }
    }
    img {
      &:first-of-type {
        max-inline-size: 10.625rem;
        @media (width < 576px) {
          max-inline-size: 8.125rem;
        }
      }
      &:last-of-type {
        max-inline-size: 4.25rem;
        @media (width < 576px) {
          max-inline-size: 3.125rem;
        }
      }
    }
  }
  .c-footer__links {
    display: flex;
    gap: var(--spacing-sm) var(--spacing-5xl);
    justify-content: space-between;
    margin-block-end: var(--spacing-md);
    @media (width < 768px) {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-block-end: var(--spacing-2xl);
    }
  }
  .c-footer__link {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
    align-items: center;
    @media (width < 768px) {
      flex-direction: column;
      gap: var(--spacing-xs);
      align-items: start;
      inline-size: 100%;
    }
    > li {
      line-height: var(--line-height-button);
      > a {
        display: inline-block;
        > span {
          font-size: var(--font-size-small-2);
          color: var(--color-text-primary);
          @media (width < 768px) {
            font-size: var(--font-size-small-1);
          }
        }
      }
    }
  }
  .c-footer__copyright {
    display: block;
    font-size: var(--font-size-small-2);
    color: var(--color-text-placeholder);
    text-align: center;
  }
}
@layer component {
  .c-nav-global__links {
    border-block-end: 1px solid var(--color-border-light);
    @media (width >= 1300px) {
      display: none;
    }
  }
  .c-nav-global__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-sm);
    justify-content: center;
    @media (width < 768px) {
      flex-direction: column;
      align-items: center;
      margin-block-end: var(--spacing-sm);
    }
  }
  .c-nav-global__button {
    position: relative;
    inline-size: 100%;
    max-inline-size: 22rem;
    overflow: hidden;
    border-radius: var(--radius-normal);
    @media (width < 768px) {
      max-inline-size: 17.5rem;
    }
    &.c-nav-global__button-gold {
      a {
        background: var(--gradient-button-bg-gold);
        &:before {
          background: var(--gradient-border-gold);
        }
      }
    }
    &.c-nav-global__button-black {
      a {
        background: var(--gradient-button-bg-black);
        &:before {
          background: var(--gradient-border-black);
        }
      }
    }
    a {
      position: relative;
      display: inline-block;
      inline-size: 100%;
      padding-block: var(--spacing-sm);
      padding-inline: var(--spacing-lg) var(--spacing-xl);
      font-size: var(--font-size-large);
      line-height: var(--line-height-button);
      color: var(--color-lightest);
      text-align: center;
      border-radius: var(--radius-normal);
      box-shadow: 0 4px 0 0 #0006;
      isolation: isolate;
      transition-timing-function: ease-in;
      transition-duration: 0.2s;
      transition-property: color, background;
      @media (width < 768px) {
        padding-block: var(--spacing-s);
        font-size: var(--font-size-base);
      }
      &:before {
        inset: 0;
        z-index: -1;
        padding: 1px;
        pointer-events: none;
        border-radius: inherit;
        mask:
          linear-gradient(var(--color-lightest) 0 0) content-box,
          linear-gradient(var(--color-lightest) 0 0);
        mask-composite: exclude;
      }
      &:after,
      &:before {
        position: absolute;
        content: "";
      }
      &:after {
        inset-block: 0;
        inset-inline-end: var(--spacing-sm);
        display: inline-block;
        inline-size: var(--spacing-sm);
        block-size: var(--spacing-sm);
        margin-block: auto;
        vertical-align: middle;
        background: url(../images/common/icon-arrow-white-right.svg) no-repeat 50%/100% auto;
      }
    }
  }
  .c-nav-global__links-item {
    font-size: var(--font-size-small);
    letter-spacing: 0.08em;
    @media (768px <=width) {
      padding-block: var(--spacing-sm);
      text-align: center;
    }
    @media (width < 768px) {
      flex-direction: column;
      padding-block: 0;
    }
    > a {
      position: relative;
      display: inline-flex;
      gap: var(--spacing-xs);
      align-items: center;
      padding-inline-end: var(--spacing-md);
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-jp-medium);
      line-height: var(--line-height-button);
      @media (width < 768px) {
        display: flex;
        padding-block: var(--spacing-sm);
        padding-inline: var(--spacing-sm) 2.75rem;
        font-size: var(--font-size-base);
      }
      > span {
        font-size: var(--font-size-large);
        font-weight: var(--font-weight-jp-bold);
      }
      &:after {
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        display: inline-block;
        inline-size: var(--spacing-md);
        block-size: var(--spacing-md);
        margin-block: auto;
        vertical-align: middle;
        content: "";
        background: url(../images/common/icon-arrow-primary-right.svg) no-repeat 50% / auto;
        @media (width < 768px) {
          inset-inline-end: var(--spacing-sm);
        }
      }
    }
  }
  .c-nav-global__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0 var(--spacing-md);
    padding: 0;
    margin: 0;
    @media (width <= 1300px) {
      flex-direction: column;
    }
  }
  .c-nav-global__item {
    display: block;
    flex: 0 0 auto;
    &:not(:last-child) {
      > a,
      > details > summary {
        @media (width <= 1300px) {
          border-block-end: 1px solid var(--color-border-light);
        }
        [open] & {
          border-block-end: 0;
        }
      }
    }
    > a,
    > details > summary {
      position: relative;
      padding-block: var(--spacing-xs);
      line-height: var(--line-height-button);
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      @media (width >= 1300px) {
        text-align: center;
      }
      @media (width <= 1300px) {
        padding-block: var(--spacing-sm);
        font-weight: var(--font-weight-jp-bold);
      }
      @media (width < 768px) {
        padding-inline: var(--spacing-sm) 2.75rem;
        font-size: var(--font-size-large);
      }
      &:before {
        position: absolute;
        inset-block-end: -20px;
        inset-inline: 0;
        display: inline-block;
        inline-size: var(--spacing-2xl);
        block-size: 1px;
        margin-inline: auto;
        vertical-align: middle;
        background-color: var(--color-secondary);
        opacity: 0;
        transition: opacity 0.3s;
        @media (width >= 1300px) {
          content: "";
        }
      }
    }
    > a {
      display: flex;
      @media (width <= 1300px) {
        &:after {
          position: absolute;
          inset-block: 0;
          inset-inline-end: var(--spacing-sm);
          display: inline-block;
          inline-size: var(--spacing-md);
          block-size: var(--spacing-md);
          margin-block: auto;
          vertical-align: middle;
          background: url(../images/common/icon-arrow-primary-right.svg) no-repeat 50% / auto;
          transition: transform 0.3s;
          @media (width < 768px) {
            content: "";
          }
        }
      }
    }
    > details {
      &::details-content {
        @media (prefers-reduced-motion: no-preference) {
          overflow: clip;
          transition-duration: 0.3s;
          transition-property: content-visibility, block-size, opacity;
          transition-behavior: allow-discrete;
        }
      }
      &:not([open])::details-content {
        block-size: 0;
        @media (width >= 1300px) {
          opacity: 0;
        }
      }
      > summary {
        display: block;
        @media (768px <=width) {
          padding-inline-end: 1.25rem;
        }
        [open] & {
          @media (768px <=width) {
            font-weight: var(--font-weight-jp-bold);
            color: var(--color-secondary);
          }
          &:before {
            opacity: 1;
          }
          &:after {
            rotate: 180deg;
          }
        }
        &:before {
          @media (width < 768px) {
            inset-block: 0;
            inset-inline: auto var(--spacing-sm);
            display: inline-block;
            inline-size: 1.5rem;
            block-size: 1.5rem;
            margin-block: auto;
            margin-inline: 0;
            content: "";
            background-color: var(--color-bg-category);
            background-image: none;
            opacity: 1;
          }
        }
        &:after {
          position: absolute;
          inset-block: 0;
          inset-inline-end: 0;
          display: inline-block;
          inline-size: 1rem;
          block-size: 1rem;
          margin-block: auto;
          vertical-align: middle;
          content: "";
          background: url(../images/common/icon-arrow-gray-down.svg) no-repeat 50%/100% auto;
          transition: rotate 0.3s;
          @media (width < 768px) {
            inset-block: 0;
            inset-inline: auto 1.25rem;
            z-index: 2;
          }
        }
      }
    }
  }
  @media (any-hover: hover) {
    .c-nav-global__item a:hover,
    .c-nav-global__item summary:hover {
      &:before {
        opacity: 1;
      }
    }
  }
  .c-nav-global__item-wrap {
    @media (width >= 1300px) {
      position: absolute;
      inset-block-start: calc(100% + 1px);
      inset-inline: 0;
      z-index: 10;
      inline-size: 100vw;
      max-inline-size: 71.875rem;
      padding-block: var(--spacing-sm) var(--spacing-lg);
      margin-inline: auto;
      background-color: var(--color-lightest);
    }
    @media (width <= 1300px) {
      background-color: var(--color-bg-gray);
    }
    [open] & {
      @media (width >= 1300px) {
        max-block-size: calc(100vh - 110px);
      }
      @media (width <= 1300px) {
        border-block-end: 1px solid var(--color-border-light);
      }
    }
  }
  .c-nav-global__item-close {
    position: absolute;
    inset-block-end: -36px;
    inset-inline-end: 0;
    inline-size: var(--spacing-lg);
    block-size: var(--spacing-lg);
    padding: 0;
    background: none;
    border: none;
    @media (width <= 1300px) {
      display: none;
    }
    &:after,
    &:before {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-end: -3px;
      display: inline-block;
      inline-size: 100%;
      block-size: 2px;
      vertical-align: middle;
      content: "";
      background: var(--color-lightest);
    }
    &:before {
      rotate: -45deg;
    }
    &:after {
      rotate: 45deg;
    }
  }
  .c-nav-global__item-inner {
    max-inline-size: calc(var(--view-size-content-main) + var(--spacing-lg));
    padding-inline: var(--spacing-sm);
    margin-inline: auto;
    @media (width >= 1300px) {
      max-block-size: calc(100vh - 150px);
      overflow-y: auto;
    }
    @media (width <= 1300px) {
      padding-block: var(--spacing-s) var(--spacing-sm);
    }
    @media (width < 768px) {
      padding-block: 0;
    }
  }
  .c-nav-global__item-contents {
    display: grid;
    grid-template-columns: var(--grid-col);
    gap: var(--spacing-sm);
    @media (width < 768px) {
      display: flex;
      flex-wrap: wrap;
    }
    @media (width < 768px) {
      flex-direction: column;
      gap: 0;
    }
    &:not(:last-child) {
      @media (768px <=width) {
        margin-block-end: var(--spacing-md);
      }
    }
    &:last-child {
      [class="c-nav-global__item-links"]:last-child button {
        @media (width < 768px) {
          border-block-end: none;
        }
        &[aria-expanded="true"] {
          @media (width < 768px) {
            border-block-end: 1px solid var(--color-border-light);
          }
        }
      }
      [class="c-nav-global__item-links"]:last-child [class="c-nav-global__item-list"][aria-hidden="false"] {
        border-block-end: none;
      }
    }
  }
  .c-nav-global__item-list {
    @media (width < 768px) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0 var(--spacing-xs);
      max-block-size: 0;
      overflow: hidden;
      opacity: 0;
      transition:
        max-block-size 0.2s ease-out,
        opacity 0.4s ease-out;
    }
    @media (768px <=width) {
      display: grid;
      grid-template-columns: repeat(var(--global-nav-col), 1fr);
      gap: 0 var(--spacing-sm);
    }
    &[aria-hidden="false"] {
      @media (width < 768px) {
        max-block-size: 1000px;
        padding-block: var(--spacing-xs) var(--spacing-sm);
        border-block-end: 1px solid var(--color-border-light);
        opacity: 1;
      }
    }
    > li {
      line-height: var(--line-height-button);
      break-inside: avoid;
      @media (width >= 1300px) {
        inline-size: max-content;
      }
      @media (768px <=width) {
        padding-block: var(--spacing-x-min);
        padding-inline: var(--spacing-min) var(--spacing-x-min);
      }
      > a {
        position: relative;
        display: block;
        padding-block: var(--spacing-min);
        padding-inline: var(--spacing-sm) 0;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-jp-medium);
        font-feature-settings: "palt";
        line-height: var(--line-height-button);
        color: var(--color-text-gray);
        text-decoration: none;
        text-underline-offset: 2px;
        @media (width < 768px) {
          padding-block: 6px;
          font-size: var(--font-size-small);
        }
        &:after {
          position: absolute;
          inset-block-start: 8px;
          inset-inline-start: 0;
          display: inline-block;
          inline-size: var(--spacing-s);
          block-size: var(--spacing-s);
          vertical-align: middle;
          content: "";
          background: url(../images/common/icon-arrow-gray-right-sm.svg) no-repeat 50%/100% auto;
          transition: inset-inline-start 0.2s;
          @media (width < 768px) {
            inset-block-start: 9px;
          }
        }
        > span {
          display: inline-block;
        }
      }
    }
  }
  .c-nav-global__item-links {
    &:has(.c-nav-global__item-title + .c-nav-global__item-list) {
      flex-grow: 1;
    }
  }
  .c-nav-global__item-title {
    position: relative;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-jp-medium);
    line-height: var(--line-height-button);
    color: var(--color-secondary);
    transition: color 0.2s;
    &:before {
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0;
      z-index: 1;
      display: inline-block;
      inline-size: var(--spacing-2xl);
      block-size: 1px;
      margin-block: auto;
      vertical-align: middle;
      background-color: var(--color-secondary);
      transition: background-color 0.2s;
      @media (768px <=width) {
        content: "";
      }
    }
    > button {
      position: relative;
      display: block;
      inline-size: 100%;
      padding-block: var(--spacing-xs);
      background: none;
      border: none;
      @media (768px <=width) {
        padding-inline: var(--spacing-x-min) var(--spacing-sm);
        margin-block-end: var(--spacing-s);
        pointer-events: none;
        border-block-end: 1px solid var(--color-border-light);
      }
      @media (width < 768px) {
        padding-block: var(--spacing-s);
        padding-inline: 0 var(--spacing-md);
        color: var(--color-secondary);
        border-block-end: 1px solid var(--color-border-light);
      }
      &[aria-expanded="true"] {
        &:after {
          rotate: 180deg;
        }
      }
      &:after {
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        display: inline-block;
        inline-size: var(--spacing-md);
        block-size: var(--spacing-md);
        margin-block: auto;
        vertical-align: middle;
        background: url(../images/common/icon-arrow-gray-down.svg) no-repeat 50% / auto;
        transition: rotate 0.2s;
        @media (width < 768px) {
          content: "";
        }
      }
    }
    > a {
      position: relative;
      display: block;
      inline-size: 100%;
      padding-block: var(--spacing-xs);
      padding-inline: var(--spacing-x-min) var(--spacing-sm);
      border-block-end: 1px solid var(--color-border-light);
      @media (width <= 1300px) {
        min-inline-size: 230px;
      }
      @media (width < 768px) {
        padding-block: var(--spacing-s);
        padding-inline: 0 var(--spacing-md);
        font-weight: var(--font-weight-jp-medium);
        color: var(--color-secondary);
      }
      &:after {
        position: absolute;
        inset-block: 0;
        inset-inline-end: var(--spacing-x-min);
        display: inline-block;
        inline-size: var(--spacing-s);
        block-size: var(--spacing-s);
        margin-block: auto;
        vertical-align: middle;
        content: "";
        background: url(../images/common/icon-arrow-primary-right-sm.svg) no-repeat 50% / auto;
        transition: inset-inline-end 0.2s;
        @media (width < 768px) {
          inset-inline-end: 0;
          inline-size: var(--spacing-md);
          block-size: var(--spacing-md);
          background: url(../images/common/icon-arrow-primary-right.svg) no-repeat 50% / auto;
        }
      }
    }
  }
  @media (any-hover: hover) {
    .c-nav-global__item-title:has(a:hover) {
      color: var(--color-text-link-hover);
      &:before {
        background-color: var(--color-text-link-hover);
      }
      a {
        &:after {
          inset-inline-end: 0;
        }
      }
    }
    .c-nav-global__item-list > li > a:hover {
      span {
        text-decoration: underline;
      }
      &:after {
        inset-inline-start: 2px;
      }
    }
  }
}
@layer component {
  .c-nav-sitemap {
    position: relative;
    padding-block: var(--spacing-xl) var(--spacing-3xl);
    padding-inline: 0;
    @media (width < 768px) {
      padding-block: var(--spacing-lg) var(--spacing-xl);
    }
    &:after,
    &:before {
      position: absolute;
      inset: 0;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      content: "";
      background-position: 50%;
    }
    &:before {
      z-index: -2;
      background-image: url(../images/home/hero-bg-01.png);
      background-repeat: repeat;
      background-size: 60px;
    }
    &:after {
      z-index: -1;
      pointer-events: none;
      background-image: var(--gradient-footer-bg-blue);
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.7;
    }
    a {
      position: relative;
      display: inline-block;
      padding-block: var(--spacing-min);
      font-size: var(--font-size-small-1);
      line-height: var(--line-height-button);
      color: var(--color-lightest);
      > span {
        display: inline-block;
      }
    }
  }
  .c-nav-sitemap__item-title {
    padding-block-end: var(--spacing-xs);
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-jp-medium);
    color: var(--color-lightest);
    letter-spacing: 0.01em;
    border-block-end: 1px solid rgb(from var(--color-lightest) r g b/.2);
    @media (width < 768px) {
      padding-block-end: var(--spacing-s);
      margin-block-end: var(--spacing-s);
    }
  }
  .c-nav-sitemap__list {
    display: grid;
    gap: var(--spacing-xl);
    @media (768px <=width) {
      grid-template-columns: repeat(3, auto);
    }
    @media (1200px <=width) {
      gap: var(--spacing-5xl);
    }
  }
  .c-nav-sitemap__item-links {
    @media (992px <=width) {
      &:has(> li:nth-child(7)) {
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: var(--spacing-min) var(--spacing-s);
      }
    }
    @media (width < 768px) {
      display: grid;
      grid-template-columns: repeat(2, minmax(auto, 1fr));
      gap: var(--spacing-min) var(--spacing-s);
    }
    > li {
      @media (width >= 1150px) {
        inline-size: max-content;
      }
    }
  }
  .c-nav-sitemap__body {
    max-inline-size: calc(var(--view-size-content-main) + var(--spacing-lg));
    padding-inline: var(--spacing-sm);
    margin-inline: auto;
  }
}
@layer component {
  .c-nav-breadcrumb {
    ol {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      justify-content: flex-start;
      padding: 0;
      margin: 0;
      font-size: var(--font-size-small-1);
      > li {
        font-weight: var(--font-weight-jp-medium);
        line-height: 1.5;
        list-style: none;
        &:not(:last-child) {
          color: var(--color-secondary);
        }
        &:last-child {
          font-weight: 400;
          a {
            :after {
              display: none;
            }
          }
        }
      }
      [class="c-page-sub__nav-breadcrumb-bottom"] & {
        flex-wrap: nowrap;
        padding-block-end: var(--spacing-min);
        overflow: auto;
        white-space: nowrap;
        &::-webkit-scrollbar {
          block-size: var(--spacing-min);
          background: var(--color-bg-secondary);
        }
        &::-webkit-scrollbar-thumb {
          background-color: var(--color-text-gray);
          border-radius: var(--radius-large);
        }
      }
    }
    a {
      display: inline-block;
      color: inherit;
      text-decoration: none;
      text-underline-offset: 4px;
      :after {
        display: inline-block;
        inline-size: 0.5em;
        block-size: 0.7em;
        margin-inline-start: 7px;
        content: "";
        background-image: url(../images/common/icon-arrow-bread.svg);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover;
      }
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .c-nav-breadcrumb__item {
    display: inline-block;
    padding: 0;
    margin: 0;
  }
  .c-nav-breadcrumb__item[data-breadcrumb="current"] {
    a {
      text-decoration: none;
    }
  }
}
@layer component {
  .c-title-page {
    max-inline-size: var(--view-size-content-main);
    margin-inline: auto;
    &:has(.c-title-page__note) {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-min);
      margin-block-end: var(--spacing-lg);
      h1 {
        margin-block: 0;
      }
    }
    h1 {
      margin-block: 0 var(--spacing-md);
      font-size: var(--font-size-28);
      font-feature-settings: "palt" on;
      line-height: 1.5;
      color: var(--color-primary);
      letter-spacing: 0.05em;
      @media (width < 768px) {
        padding-block-start: var(--spacing-lg);
        font-size: var(--font-size-26);
      }
    }
  }
  .c-title-page__note {
    font-size: var(font-size-base);
    font-weight: var(--font-weight-jp-medium);
    line-height: var(--line-height-title);
    color: var(--color-text-gray);
    letter-spacing: 0.04em;
    @media (width < 768px) {
      font-size: var(--font-size-large);
    }
  }
}
@layer component {
  .c-title-page-search {
    display: flex;
    justify-content: space-between;
    max-inline-size: var(--view-size-content-main);
    margin-inline: auto;
    @media (width < 768px) {
      padding-block-start: var(--spacing-sm);
    }
    &:has(.c-title-page-search__count) {
      max-inline-size: var(--view-size-bge-content);
    }
    h1 {
      margin-block: var(--spacing-no);
      font-size: var(--font-size-24);
      font-feature-settings: "palt" on;
      line-height: var(--line-height-title);
      letter-spacing: 0.05em;
      @media (width < 768px) {
        font-size: var(--font-size-26);
      }
    }
    :where(header) {
      display: flex;
      gap: var(--spacing-sm);
      align-items: center;
      @media (width < 768px) {
        display: grid;
        grid-template-columns: 1fr auto;
        inline-size: 100%;
      }
    }
  }
  .c-title-page-search__count {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    max-inline-size: var(--view-size-content-main);
    margin-inline: auto;
    line-height: var(--line-height-button);
  }
  .c-title-page-search__count-text {
    display: flex;
    gap: var(--spacing-min);
    align-items: flex-end;
    justify-content: flex-start;
    padding-inline-end: 1em;
    line-height: var(--line-height-button);
  }
  .c-title-page-search__count-number {
    font-family: var(--font-family-en);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-jp-bold);
    color: var(--color-primary);
  }
  .c-title-page-search__count-unit {
    padding-block-end: 0.12em;
    margin-inline-start: var(--spacing-min);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-jp-medium);
  }
  .c-title-page-search__count-controls {
    @media (width < 768px) {
      display: none;
    }
  }
}
@layer component {
  .c-title-page-company {
    max-inline-size: var(--view-size-content-main);
    margin-inline: auto;
    h1 {
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      padding-block: var(--spacing-md);
      margin-block: var(--spacing-no);
      font-size: var(--font-size-28);
      font-feature-settings: "palt" on;
      line-height: var(--line-height-title);
      color: var(--color-primary);
      letter-spacing: 0.04em;
      @media (width < 768px) {
        gap: var(--spacing-xs);
        font-size: var(--font-size-26);
      }
      &:has(img) {
        @media (768px <=width) {
          grid-template-columns: 1fr 234px;
          gap: var(--spacing-sm);
        }
      }
      :where(img) {
        max-inline-size: 234px;
        aspect-ratio: 234/92;
        margin-block: 0;
        margin-inline: auto;
        @media (width < 768px) {
          max-inline-size: 43.2cqi;
        }
      }
    }
  }
}
@layer component {
  .c-title-page-consultant {
    position: relative;
    background: url(../images/common/bg-title-consultant.jpg) no-repeat 50% / auto 100%;
    &:before {
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0;
      z-index: 1;
      inline-size: 100%;
      block-size: 103px;
      background: var(--gradient-consultant-title);
      @media (768px <=width) {
        content: "";
      }
    }
    &:after {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      background: var(--gradient-bg-consultant-title);
      @media (width >= 1920px) {
        content: "";
      }
    }
  }
  .c-title-page-consultant__inner {
    position: relative;
    z-index: 1;
    display: grid;
    max-inline-size: 1152px;
    padding-block-start: var(--spacing-2xl);
    padding-inline: var(--spacing-sm);
    margin-inline: auto;
    @media (768px <=width) {
      min-block-size: 300px;
    }
    @media (width < 768px) {
      gap: var(--spacing-sm);
      padding-block-start: var(--spacing-sm);
    }
    :where(.c-title-page-consultant__lead) {
      font-size: var(--font-size-24);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      @media (width < 768px) {
        grid-column: span 2;
        font-size: var(--font-size-22);
      }
    }
    :where(h1) {
      position: relative;
      padding-block: var(--spacing-md);
      margin: 0;
      @media (width < 768px) {
        padding-block: var(--spacing-sm);
      }
      &:before {
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: -16px;
        z-index: -1;
        inline-size: calc(100% + 32px);
        block-size: 100%;
        background: var(--gradient-consultant-title-sp);
        @media (width < 768px) {
          content: "";
        }
      }
      > span {
        display: block;
        color: var(--color-lightest);
        @media (width < 768px) {
          max-inline-size: calc(100% - 160px);
        }
        &:not(:last-child) {
          margin-block-end: var(--spacing-min);
        }
      }
    }
  }
  .c-title-page-consultant__textarea {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    justify-content: space-between;
    max-inline-size: 720px;
    block-size: 100%;
    @media (width <= 1050px) {
      max-inline-size: calc(100vw - 320px);
    }
    @media (width < 768px) {
      gap: var(--spacing-lg);
      max-inline-size: 100%;
    }
  }
  .c-title-page-consultant__position {
    flex-grow: 1;
    font-size: var(--font-size-small);
  }
  .c-title-page-consultant__name,
  .c-title-page-consultant__position {
    font-weight: var(--font-weight-jp-bold);
    line-height: var(--line-height-title);
  }
  .c-title-page-consultant__name {
    font-size: var(--font-size-20);
  }
  .c-title-page-consultant__image {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    max-inline-size: 320px;
    block-size: auto;
    @media (width < 768px) {
      max-inline-size: 160px;
      margin-inline: auto;
    }
  }
}
@layer component {
  .c-pagination {
    display: grid;
    grid-template: "prev numbers next" / auto 1fr auto;
    gap: var(--spacing-md);
    align-items: center;
    inline-size: fit-content;
    margin-inline: auto;
    line-height: var(--line-height-button);
    @media (width < 768px) {
      gap: var(--spacing-xs);
    }
    a {
      font-size: var(--font-size-small);
      color: var(--color-primary);
      text-decoration: none;
      background: none;
    }
  }
  .c-pagination__next,
  .c-pagination__prev {
    line-height: var(--line-height-title);
    a {
      position: relative;
      display: flex;
      align-items: center;
      @media (any-hover: hover) {
        &:hover {
          span {
            border-color: var(--color-darkest);
          }
        }
      }
      span {
        border-block-end: 1px solid #0000;
        transition: border-color 0.2s ease-in-out;
      }
      &[inert] {
        color: var(--color-border-light);
        pointer-events: none;
      }
    }
  }
  .c-pagination__prev {
    grid-area: prev;
    a {
      padding-inline-start: 20px;
      @media (any-hover: hover) {
        &:hover:before {
          inset-inline-start: -4px;
        }
      }
      &:before {
        position: absolute;
        inset-block: 0;
        inset-inline: 0 auto;
        inline-size: 16px;
        block-size: 16px;
        margin-block: auto;
        content: "";
        background: url(../images/common/icon-arrow-primary-right.svg) no-repeat 50%;
        background-size: contain;
        rotate: 180deg;
        transition: inset-inline-start 0.2s ease-in-out;
      }
      &[inert] {
        &:before {
          background: url(../images/common/icon-arrow-disable-right.svg) no-repeat 50%;
        }
      }
    }
  }
  .c-pagination__next {
    grid-area: next;
    a {
      padding-inline-end: 20px;
      @media (any-hover: hover) {
        &:hover:after {
          inset-inline-end: -4px;
        }
      }
      &:after {
        position: absolute;
        inset-block: 0;
        inset-inline: auto 0;
        inline-size: 16px;
        block-size: 16px;
        margin-block: auto;
        content: "";
        background: url(../images/common/icon-arrow-primary-right.svg) no-repeat 50%;
        background-size: contain;
        transition: inset-inline-end 0.2s ease-in-out;
      }
      &[inert] {
        &:after {
          background: url(../images/common/icon-arrow-disable-right.svg) no-repeat 50%;
        }
      }
    }
  }
  .c-pagination__numbers {
    display: flex;
    grid-area: numbers;
    font-family: var(--font-family-en);
    list-style: none;
    @media (768px <=width) {
      gap: var(--spacing-xs);
    }
  }
  div.c-search-results__pagination .c-pagination__numbers {
    @media (768px <=width) {
      gap: var(--spacing-sm);
    }
    li.c-pagination__number a {
      @media (width < 768px) {
        padding-block: var(--spacing-min);
      }
    }
  }
  .c-pagination__number {
    display: flex;
    align-items: center;
    margin-block: 0;
    margin-block-end: -2px;
    font-family: var(--font-family-en);
    list-style: none;
    a,
    span {
      min-inline-size: var(--font-size-base);
    }
    a {
      position: relative;
      display: block;
      padding-block: var(--spacing-x-min);
      padding-inline: var(--spacing-xs);
      text-align: center;
      @media (width < 768px) {
        padding-block: var(--spacing-xs);
        padding-inline: var(--spacing-s);
      }
      &:after {
        position: absolute;
        inset-block: auto 0;
        inset-inline: 0;
        display: block;
        inline-size: 13px;
        block-size: 2px;
        margin-inline: auto;
        content: "";
        background: var(--color-primary);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
      }
      &[aria-current="page"] {
        color: var(--color-text-placeholder);
        &:after {
          background: var(--color-text-placeholder);
          opacity: 1;
        }
      }
      &:hover {
        &:after {
          opacity: 1;
        }
      }
    }
    span {
      position: relative;
      inset-block-start: -0.25em;
    }
  }
}
@layer component {
  .c-content-index {
    margin: 0;
  }
  .c-content-index__body {
    margin-block: 0;
    margin-inline: auto;
  }
}
@layer main {
  .c-content-main {
    :where(.c-heading-02, .c-heading__02) {
      &:not(:first-child) {
        margin-block-start: var(--spacing-2xl);
      }
    }
    :where(h1, h2, h3, h4, h5, h6) {
      text-wrap: wrap;
    }
    :where(.c-heading-03, .c-heading__03, .c-heading-04, .c-heading__04) {
      &:not(:first-child) {
        margin-block-start: var(--spacing-md);
      }
    }
    :where(ul, ol) {
      list-style-position: inside;
    }
    :where(table) {
      inline-size: 100%;
      border-collapse: collapse;
    }
    section {
      margin-block-end: var(--spacing-2xl);
      :where(& > div) {
        &:has(ul:not(.c-list__index-dot), ol, table) {
          margin-block-end: var(--spacing-md);
        }
      }
      :where(&, & > div:not(:has(.c-button), .c-image)) {
        margin-block-end: var(--spacing-2xl);
        :where(& > :first-child) {
          margin-block-start: 0;
        }
        :where(& > :last-child) {
          margin-block-end: 0;
        }
      }
      :where(& > .c-button) {
        margin-block-end: var(--spacing-sm);
      }
    }
  }
}
@layer component {
  .c-radio:has(input[type="radio"]) {
    position: relative;
    display: grid;
    grid-template-columns: 1rem 1fr;
    gap: var(--spacing-min);
    align-items: center;
    padding-block: var(--spacing-min);
    font-weight: var(--font-weight-jp-medium);
    line-height: var(--line-height-button);
    cursor: pointer;
    > span.c-radio__text {
      font-size: var(--font-size-small);
      color: var(--color-primary);
    }
    > span.c-radio__value {
      font-size: var(--font-size-small-1);
      color: var(--color-text-gray);
      translate: 0 1px;
    }
    &:after,
    &:before {
      box-sizing: border-box;
      display: inline-block;
      grid-row: 1;
      grid-column: 1;
      place-self: center;
      content: "";
      border-radius: var(--radius-max);
    }
    &:before {
      position: relative;
      inline-size: 1rem;
      block-size: 1rem;
      background-color: var(--color-lightest);
      box-shadow: 0 0 0 1px var(--color-border-default);
      transition: box-shadow 0.3s;
    }
    &:after {
      z-index: 2;
      inline-size: 0.5rem;
      block-size: 0.5rem;
      background-color: var(--color-primary);
      opacity: 0;
      transform-origin: center;
      scale: 1.25;
      transition: opacity 0.3s;
    }
    &:has(input:checked) {
      &:after {
        opacity: 1;
      }
      &:before {
        box-shadow: 0 0 0 1px var(--color-primary);
      }
    }
  }
  .c-radio:has(span.c-radio__value) {
    grid-template-columns: 1rem auto 1fr;
  }
  @media (width < 768px) {
    .c-radio:has(input[type="radio"]) > span.c-radio__text {
      translate: 0 1px;
    }
    .c-radio:has(input[type="radio"]) > span.c-radio__value {
      translate: 0 0;
    }
  }
  .c-radio__input {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: block;
    visibility: visible;
    inline-size: 4px;
    block-size: 4px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: none;
    opacity: 0;
  }
}
@layer component {
  .c-radio-toggle:has(input[type="radio"]) {
    display: inline-flex;
    justify-content: center;
    padding-block: var(--spacing-min);
    padding-inline: var(--spacing-xs);
    font-size: var(--font-size-small-1);
    line-height: var(--line-height-button);
    color: var(--color-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-normal);
    &:has(input:checked) {
      font-weight: var(--font-weight-jp-bold);
      color: var(--color-primary);
      background-color: var(--color-bg-select);
      border-color: var(--color-bg-select);
    }
  }
  .c-radio-toggle__input {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: block;
    visibility: visible;
    inline-size: 4px;
    block-size: 4px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: none;
    opacity: 0;
  }
}
@layer component {
  .c-checkbox-toggle:has(input[type="checkbox"]) {
    inline-size: fit-content;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding-block: var(--spacing-min);
    padding-inline: var(--spacing-xs);
    font-size: var(--font-size-small-1);
    line-height: var(--line-height-button);
    color: var(--color-primary);
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-normal);
    &:has(input:checked) {
      font-weight: var(--font-weight-jp-bold);
      color: var(--color-primary);
      background-color: var(--color-bg-select);
      border-color: var(--color-bg-select);
    }
  }
  .c-checkbox-toggle__input {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: block;
    visibility: visible;
    inline-size: 4px;
    block-size: 4px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: none;
    opacity: 0;
  }
}
@layer component {
  .c-checkbox {
    display: inline-flex;
    gap: var(--spacing-min);
    align-items: center;
    padding-block: var(--spacing-min);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-jp-medium);
    line-height: var(--line-height-button);
    color: var(--color-text-primary);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    &:focus-visible {
      outline: 2px solid color-mix(in oklab, var(--color-secondary) 65%, var(--color-lightest));
      outline-offset: 2px;
    }
  }
  .c-checkbox__input {
    position: relative;
    inline-size: 16px;
    block-size: 16px;
    margin: 0;
    appearance: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--color-lightest);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-small);
    transition-property: background-color, border-color, box-shadow;
  }
  .c-checkbox__input:checked {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
  }
  .c-checkbox__input:checked:before {
    position: absolute;
    inset: 0;
    inline-size: 10px;
    aspect-ratio: 7.769/4.5;
    margin: auto;
    content: "";
    background-image: url(../images/common/icon-check.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
  }
  .c-checkbox__input:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--color-secondary) 65%, var(--color-lightest));
    outline-offset: 2px;
  }
  .c-checkbox__count {
    font-size: var(--font-size-small-2);
    line-height: var(--line-height-button);
    color: var(--color-text-gray);
  }
  .c-search {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xl);
  }
}
@layer component {
  .c-search__filter {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    inline-size: 100%;
    max-inline-size: 960px;
    margin-inline: auto;
    :where(h2) {
      font-size: var(--font-size-20);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
      letter-spacing: 0.05em;
    }
  }
}
@layer component {
  .c-search-recruitment {
    inline-size: 100%;
  }
  .c-search-recruitment__inner {
    display: grid;
    grid-template-columns: auto;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--lightest-color);
    @media (768px <=width) {
      padding-inline: var(--spacing-md);
    }
  }
  .c-search-recruitment__search {
    display: grid;
    grid-template-columns: minmax(auto, 600px) auto;
    gap: var(--spacing-s);
    align-items: center;
    &:has(.c-search-recruitment__search-inner) {
      @media (width < 768px) {
        position: fixed;
        inset-block: 75px 0;
        inset-inline: 0;
        z-index: 10;
        display: block;
        inline-size: 100vw;
        padding-block: var(--spacing-sm) 0;
        padding-inline: var(--spacing-sm);
        background-color: var(--color-lightest);
      }
      @media (width < 576px) {
        inset-block-start: 57px;
      }
    }
  }
  .c-search-recruitment__search-wrap {
    position: relative;
  }
  .c-search-recruitment__search-inner {
    @media (width < 768px) {
      display: flex;
      gap: var(--spacing-xs);
      align-items: stretch;
    }
  }
  .c-search-recruitment__search-box {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: var(--spacing-xs);
    align-items: center;
    min-inline-size: 600px;
    max-inline-size: 100%;
    padding: 0.625rem;
    background: var(--color-lightest);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-normal);
    @media (width < 768px) {
      gap: var(--spacing-min);
      min-inline-size: 100%;
      padding-inline: var(--spacing-xs);
    }
    [class="c-search-recruitment__search-inner"] & {
      @media (width < 768px) {
        flex-grow: 1;
        min-inline-size: 0;
      }
    }
    &:has(+ .c-search-suggest[aria-hidden="false"]) {
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
  }
  .c-search-recruitment__search-icon {
    display: grid;
    place-items: center;
    inline-size: 16px;
    block-size: 16px;
  }
  .c-search-recruitment__search-icon img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
  .c-search-recruitment__search-back {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    align-self: center;
    justify-content: center;
    inline-size: var(--spacing-md);
    block-size: var(--spacing-md);
    padding: 0;
    background: none;
    border: none;
    &:after {
      position: relative;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      margin-block: auto;
      content: "";
      background: url(../images/common/icon-arrow-gray-left.svg) no-repeat 50% / contain;
    }
  }
  .c-search-recruitment__search-submit {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding-block: 0.625rem;
    padding-inline: var(--spacing-s);
    font-size: 0.9375rem;
    color: var(--color-lightest);
    background: var(--color-secondary);
    border-radius: var(--radius-normal);
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
    transition-property: color, background;
    &[inert] {
      background: var(--color-text-link-primary-disable);
    }
  }
  .c-search-recruitment__search-field {
    min-inline-size: 0;
    padding: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-button);
    color: var(--color-text-primary);
    appearance: none;
    background: #0000;
    border: none;
  }
  .c-search-recruitment__search-field::placeholder {
    color: var(--color-text-placeholder);
  }
  .c-search-recruitment__search-field:focus {
    outline: none;
  }
  .c-search-recruitment__search-include {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-jp-medium);
    line-height: var(--line-height-text);
    color: var(--color-text-primary);
  }
  .c-search-recruitment__select {
    display: grid;
    grid-template-columns: 182px 1fr;
    border: 1px solid var(--color-border-light);
    @media (width < 768px) {
      grid-template-columns: 100%;
    }
  }
  .c-search-recruitment__select-label {
    display: grid;
    grid-template-columns: minmax(72px, auto) auto;
    align-items: center;
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-s);
    font-size: var(--font-size-small);
    line-height: var(--line-height-title);
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      grid-template-columns: 1fr minmax(72px, auto);
      padding-block: var(--spacing-xs);
    }
    &:not(:last-of-type) {
      border-block-end: 1px solid var(--color-border-light);
    }
    :where(button) {
      font-size: var(--font-size-small-1);
    }
  }
  .c-search-recruitment__select-content {
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-sm);
    &:not(:last-of-type) {
      border-block-end: 1px solid var(--color-border-light);
    }
  }
  .c-search-recruitment__select-content-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--spacing-s);
    inline-size: 100%;
  }
  .c-search-recruitment__select-content-item-empty {
    display: inline-block;
    padding-block: var(--spacing-min);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-jp-regular);
    line-height: var(--line-height-button);
    color: var(--color-text-primary);
  }
  .c-search-recruitment__bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    @media (width < 768px) {
      flex-direction: column;
      gap: var(--spacing-sm);
      align-items: center;
    }
  }
  .c-search-recruitment__bar-count {
    display: flex;
    gap: var(--spacing-min);
    align-items: flex-end;
    padding-block-end: var(--spacing-min);
    font-weight: var(--font-weight-jp-medium);
    color: var(--color-text-primary);
  }
  .c-search-recruitment__bar-count-text {
    display: inline-block;
    margin-block-end: 3px;
    font-weight: 500;
    line-height: 1.3;
  }
  .c-search-recruitment__bar-count-num {
    display: flex;
    gap: var(--spacing-min);
    align-items: flex-end;
    justify-content: center;
  }
  .c-search-recruitment__bar-count-num-value {
    font-family: var(--font-family-en);
    font-size: var(--font-size-24);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-secondary);
  }
  .c-search-recruitment__bar-count-num-unit {
    margin-block-end: 3px;
    font-weight: var(--font-weight-jp-medium);
    line-height: 1.3;
    color: var(--color-text-primary);
  }
  .c-search-recruitment__bar-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
  }
  .c-search-recruitment__bar-clear {
    position: relative;
    display: flex;
    gap: var(--spacing-x-min);
    align-items: center;
    padding-block-end: var(--spacing-x-min);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-jp-medium);
    line-height: 1.3;
    border-block-end: 1px solid var(--color-text-primary);
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
    transition-property: color, border-color;
    &[inert] {
      color: var(--color-text-link-disable);
      border-color: var(--color-text-link-disable);
    }
    &[inert]:after {
      filter: brightness(0) saturate(100%) invert(80%) sepia(0) saturate(0) hue-rotate(283deg) brightness(95%) contrast(105%);
    }
  }
  @media (any-hover: hover) {
    .c-search-recruitment__bar-clear:hover {
      color: var(--color-text-gray);
      border-color: #0000;
    }
  }
  .c-search-recruitment__bar-clear:after {
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 12px;
    block-size: 12px;
    content: "";
    background: url(../images/common/icon-cancel.svg) no-repeat 50% / contain;
  }
  .c-search-recruitment__bar-clear:hover {
    text-decoration: none;
  }
  .c-search-recruitment__bar-submit {
    position: relative;
    display: flex;
    gap: var(--spacing-min);
    align-items: center;
    justify-content: center;
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-s);
    font-size: var(--font-size-base);
    color: var(--color-lightest);
    background: var(--color-secondary);
    border-radius: var(--radius-normal);
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
    transition-property: color, background;
    &[inert] {
      background: var(--color-text-link-primary-disable);
    }
    &:after {
      position: relative;
      display: block;
      inline-size: 16px;
      block-size: 16px;
      margin-block: auto;
      content: "";
      background: url(../images/common/icon-arrow-white-right.svg) no-repeat 50% / contain;
      transition-timing-function: ease-in;
      transition-duration: 0.2s;
      transition-property: filter, translate;
    }
  }
  @media (width < 768px) {
    .c-search-recruitment__bar-submit {
      &:after {
        inline-size: 12px;
        block-size: 12px;
      }
      span {
        display: inline-block;
        inline-size: 148px;
        max-inline-size: 100%;
        text-align: center;
      }
    }
  }
  @media (any-hover: hover) {
    .c-search-recruitment__bar-submit:hover {
      background: var(--color-text-link-hover);
    }
    .c-search-recruitment__bar-submit:hover:after {
      translate: 4px;
    }
  }
  .c-search-recruitment__bar-submit:focus-visible {
    color: var(--color-secondary);
    background: var(--color-lightest);
  }
}
@layer component {
  .c-search-list {
    padding-block: var(--spacing-4xl) var(--pbe-pc, var(--spacing-4xl));
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      padding-block: var(--spacing-xl) var(--pbe-sp, var(--pbe-pc, var(--spacing-xl)));
    }
  }
  .c-search-list__wrap {
    max-inline-size: calc(var(--view-size-content-main) + var(--spacing-lg));
    padding-inline: 1rem;
    margin-inline: auto;
  }
  .c-search-list__inner {
    display: grid;
    gap: var(--spacing-md);
    @media (768px <=width) {
      grid-template-columns: repeat(auto-fit, minmax(580px, 1fr));
    }
  }
  .c-search-list__contents {
    max-inline-size: 100%;
  }
  .c-search-list__title {
    position: relative;
    padding-inline-start: 14px;
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-24);
    line-height: var(--line-height-title);
    letter-spacing: 0.05rem;
    @media (width < 768px) {
      margin-block-end: var(--spacing-s);
      font-size: var(--font-size-20);
    }
    &:before {
      position: absolute;
      inset-block-start: 0.375rem;
      inset-inline-start: 0;
      display: inline-block;
      inline-size: 0.1875rem;
      block-size: 1.625rem;
      margin-block: auto;
      vertical-align: middle;
      content: "";
      background-color: var(--color-primary);
      transition: transform 0.3s;
      @media (width < 768px) {
        inset-block-start: 3px;
        block-size: 26px;
      }
    }
  }
  .c-search-list__link {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    @media (width < 768px) {
      border-block-start: 1px solid var(--color-bg-category);
      border-inline-start: 1px solid var(--color-bg-category);
    }
    > li {
      break-inside: avoid;
      > a {
        display: flex;
        gap: var(--spacing-sm);
        align-items: center;
        block-size: 100%;
        padding-block: var(--spacing-sm);
        padding-inline: var(--spacing-sm) var(--spacing-s);
        margin-block-start: -1px;
        margin-inline-start: -1px;
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-jp-medium);
        font-feature-settings: "palt" on;
        line-height: var(--line-height-button);
        color: var(--color-primary);
        background-color: var(--color-lightest);
        border: 1px solid var(--color-bg-category);
        transition:
          background-color 0.2s ease-in-out,
          color 0.2s ease-in-out;
        @media (width < 768px) {
          gap: var(--spacing-min);
          min-block-size: 52px;
          padding-block: var(--spacing-xs);
          padding-inline: var(--spacing-s) var(--spacing-xs);
        }
        @media (any-hover: hover) {
          &:hover {
            color: var(--color-text-link-hover);
            background-color: var(--color-bg-gray);
            &:after {
              margin-inline-end: calc(var(--spacing-min) * -1);
            }
          }
        }
        &:nth-child(-n + 2) {
          margin-block-start: 0;
          border-block-start: 0;
        }
        &:nth-child(odd) {
          margin-inline-start: 0;
          border-inline-start: 0;
        }
        &:after {
          display: inline-block;
          inline-size: var(--spacing-sm);
          block-size: var(--spacing-sm);
          margin-block: auto;
          vertical-align: middle;
          content: "";
          background: url(../images/common/icon-arrow-primary-right.svg) no-repeat 50%/100% auto;
          transition:
            transform 0.3s,
            margin-inline-end 0.2s ease-in-out;
        }
        > span {
          flex: 1 1 0;
        }
      }
    }
  }
  .c-section-group .c-search-list {
    padding-block-start: var(--spacing-no);
    background: none;
  }
  .c-section-group:has(.c-offer) .c-search-list {
    padding-block: var(--spacing-no) var(--spacing-2xl);
    @media (width < 768px) {
      padding-block-end: var(--spacing-lg);
    }
  }
  @media (768px <=width) {
    .c-section-group .c-search-list__link {
      grid-template-columns: repeat(4, 1fr);
      > li > a {
        &:nth-child(-n + 4) {
          margin-block-start: 0;
          border-block-start: 0;
        }
        &:nth-child(4n + 1) {
          margin-inline-start: 0;
          border-inline-start: 0;
        }
      }
    }
  }
  .c-section-group .c-search-list__wrap {
    padding-inline: 0;
  }
  .c-section-group .c-search-list__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    @media (width < 768px) {
      gap: var(--spacing-lg);
    }
  }
  .c-section-group .c-search-list__title {
    padding-inline-start: 11px;
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-20);
    line-height: var(--line-height-title);
    text-align: start;
    letter-spacing: 0.05em;
  }
  .c-section-group .c-search-list__title:before {
    inset-block-start: 5px;
    inline-size: 3px;
    block-size: 22px;
    background-color: var(--color-secondary);
  }
  @media (width < 768px) {
    .c-section-group .c-search-list__title {
      margin-block-end: var(--spacing-sm);
      font-size: var(--font-size-20);
    }
    .c-section-group .c-search-list__title:before {
      inset-block-start: 2px;
    }
  }
}
@layer component {
  .c-search-filter {
    box-sizing: border-box;
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    min-inline-size: 0;
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-md);
    background: var(--color-lightest);
    @media (768px <=width) and (width < 992px) {
      padding-inline: var(--spacing-sm);
    }
    @media (width < 768px) {
      flex-direction: column;
      gap: var(--spacing-xs);
      padding-block: var(--spacing-xs);
      padding-inline: var(--spacing-xs);
    }
  }
  .c-search-filter__inner {
    display: flex;
    min-inline-size: 0;
    max-inline-size: 100%;
    @media (768px <=width) {
      flex: 1 1 0%;
      align-items: center;
      min-inline-size: 0;
    }
    @media (768px <=width) and (width < 992px) {
      flex-wrap: wrap;
      gap: 5px;
      min-inline-size: 0;
      max-inline-size: 100%;
    }
    @media (width < 768px) {
      flex-direction: column;
      gap: 5px;
      inline-size: 100%;
    }
  }
  .c-search-filter__label {
    position: relative;
    flex-shrink: 0;
    min-block-size: 16px;
    padding-inline: 20px var(--spacing-sm);
    font-size: var(--font-size-small);
    line-height: 1.2;
    @media (768px <=width) and (width < 992px) {
      box-sizing: border-box;
      flex-basis: 100%;
      inline-size: 100%;
      max-inline-size: 100%;
    }
    &:before {
      position: absolute;
      inset-block: 0.1em 0;
      inset-inline-start: 0;
      display: block;
      inline-size: 16px;
      block-size: 16px;
      content: "";
      background: url(../images/common/icon-history.svg) no-repeat 50% / contain;
      @media (width < 768px) {
        inset-block-start: 0.08em;
      }
    }
  }
  .c-search-filter__keywords {
    flex: 1 1 0%;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size-small);
    font-feature-settings: "palt";
    line-height: var(--line-height-title);
    color: var(--color-text-gray);
    white-space: nowrap;
    @media (768px <=width) and (width < 992px) {
      box-sizing: border-box;
      min-inline-size: 0;
      max-inline-size: 100%;
    }
    @media (width < 768px) {
      position: relative;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      white-space: normal;
      &:before {
        z-index: 1;
        display: block;
        inline-size: 4em;
        block-size: calc(1em * var(--line-height-title));
        content: "";
        background: var(--color-lightest);
      }
      &:after,
      &:before {
        position: absolute;
        inset-block-end: 0;
        inset-inline-end: 0;
      }
      &:after {
        z-index: 2;
        font-size: var(--font-size-small-1);
        line-height: var(--line-height-title);
        color: var(--color-text-gray);
        white-space: nowrap;
        content: "…を含む";
      }
    }
  }
  .c-search-filter__etc {
    box-sizing: border-box;
    flex-shrink: 0;
    font-size: var(--font-size-small-1);
    line-height: var(--line-height-title);
    color: var(--color-text-gray);
    @media (width < 768px) {
      display: none;
    }
  }
  .c-search-filter__button {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-s) var(--spacing-lg);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-jp-medium);
    line-height: var(--line-height-button);
    color: var(--color-lightest);
    background: var(--color-darkest);
    border-radius: var(--radius-normal);
    transition: background 0.2s ease-in-out;
    @media (width < 992px) {
      padding-inline: var(--spacing-s) var(--spacing-md);
    }
    @media (width < 768px) {
      inline-size: 100%;
    }
    @media (any-hover: hover) {
      &:hover {
        background: var(--color-text-gray);
        &:after {
          inset-inline-end: 5px;
        }
      }
    }
    &:after {
      position: absolute;
      inset-block: 0;
      inset-inline-end: 9px;
      display: block;
      inline-size: 16px;
      block-size: 16px;
      margin-block: auto;
      content: "";
      background: url(../images/common/icon-arrow-white-right.svg) no-repeat 50% / contain;
      transition: inset-inline-end 0.2s ease-in-out;
    }
  }
}
@layer component {
  .c-search-results {
    display: grid;
    grid-template-areas: "side main";
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-xl);
    align-items: start;
    @media (width < 940px) {
      grid-template-areas: "side" "main";
      grid-template-columns: 1fr;
      gap: var(--spacing-lg);
    }
  }
  .c-search-results__main {
    display: grid;
    grid-area: main;
    grid-template-columns: 1fr;
    gap: var(--spacing-4xl);
    @media (width < 768px) {
      gap: var(--spacing-2xl);
      margin-block-start: calc((var(--spacing-xl) - var(--spacing-xs)) * -1);
    }
  }
  .c-search-results__content {
    display: grid;
    grid-template-columns: 1fr;
    @media (768px <=width) {
      gap: var(--spacing-md);
    }
  }
  .c-search-results__summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-s);
    padding-block-end: var(--spacing-md);
    @media (width < 768px) {
      gap: var(--spacing-xs);
      padding-block-end: var(--spacing-sm);
    }
    :where(h1) {
      margin-block: var(--spacing-no);
      font-size: var(--font-size-20);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      letter-spacing: 0.05em;
      @media (width < 768px) {
        font-size: var(--font-size-large);
      }
    }
  }
  .c-search-results__main-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4xl);
  }
  .c-search-results__side {
    position: relative;
    z-index: 10;
    grid-area: side;
    padding-block: var(--spacing-md) 0;
    padding-inline: var(--spacing-sm);
    margin-block-start: calc(var(--spacing-md) * -1);
    margin-inline: calc(var(--spacing-sm) * -1);
    background: var(--color-bg-secondary);
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
    transition-property: background-color;
    &:has(.c-dropdown-search[aria-hidden="false"]) {
      background-color: var(--lightest-color);
    }
  }
  @media (width >= 940px) {
    .c-search-results__side {
      position: sticky;
      inset-block-end: var(--sticky-cta-height);
      align-self: end;
    }
    .c-search-results__side[data-smart-sticky="true"] {
      inset-block: var(--sidebar-top) auto;
      align-self: start;
    }
    .c-search-results__side .c-side-search {
      --side-search-sticky-gap: 16px;
      padding-block-end: 0;
    }
  }
  .c-search-results__count {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .c-search-results__count-text {
    padding-inline-end: 1em;
    font-size: var(--font-size-base);
    line-height: var(--line-height-button);
    letter-spacing: 0.05em;
    &[data-version="202502"] {
      @media screen and (width < 940px) {
        :where(span):not(.c-search-results__count-text-number):not(.c-search-results__count-text-number-strong-unit) {
          display: none;
        }
      }
      p {
        @media screen and (width < 940px) {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .c-search-results__count-text-number {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-jp-bold);
  }
  .c-search-results__count-text-number-strong-unit {
    margin-block-start: 0.2em;
    font-size: var(--font-size-small);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.7px;
    @media screen and (width >= 940px) {
      font-size: var(--font-size-small-1);
      font-weight: unset;
      line-height: unset;
      letter-spacing: unset;
    }
  }
  .c-search-results__count-text-unit {
    font-size: var(--font-size-small-1);
  }
  .c-search-results__count-text-title {
    margin-inline-end: var(--spacing-x-min);
  }
  .c-search-results__count-controls {
    display: flex;
    gap: var(--spacing-xl);
    @media screen and (width < 940px) {
      gap: var(--spacing-min);
    }
    :where(.c-pagination) {
      @media (width < 768px) {
        display: none;
      }
    }
  }
  .c-search-results__structured-finance-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    align-content: start;
    align-items: start;
    padding-block: var(--spacing-md);
    padding-inline: var(--spacing-md);
    background: var(--color-lightest);
    @media (width < 768px) {
      grid-template-columns: 1fr;
    }
    > :where(div) {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--spacing-xs);
      align-items: start;
      :where(h3) {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-jp-bold);
        line-height: var(--line-height-button);
        letter-spacing: 0.05em;
      }
      :where(h4) {
        font-size: var(--font-size-small-1);
        font-weight: var(--font-weight-jp-bold);
        line-height: var(--line-height-button);
        letter-spacing: 0.05em;
      }
    }
  }
  .c-search-results__structured-finance-meta {
    display: flex;
    gap: var(--spacing-xs);
    align-items: flex-end;
  }
  .c-search-results__structured-finance-date {
    padding-block-end: var(--spacing-x-min);
    font-size: var(--font-size-small-2);
    line-height: var(--line-height-button);
  }
  .c-search-results__structured-finance-count {
    font-size: var(--font-size-22);
    font-weight: var(--font-weight-jp-bold);
    line-height: var(--line-height-button);
    letter-spacing: 0.05em;
  }
  .c-search-results__structured-finance-text {
    font-size: var(--font-size-small);
    line-height: var(--line-height-text);
  }
  .c-search-results__recommend,
  .c-search-results__structured-finance {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    :where(h2) {
      font-size: var(--font-size-20);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
      letter-spacing: 0.05em;
    }
  }
  .c-search-results__related {
    :where(ul) {
      display: inline-flex;
      flex-wrap: wrap;
    }
  }
  .c-search-results__no-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    padding-block: var(--spacing-lg);
    padding-inline: calc(var(--spacing-lg) - 1px);
    background: var(--color-lightest);
    border: 1px solid var(--color-primary);
    @media (width < 768px) {
      padding-block: var(--spacing-md);
      padding-inline: var(--spacing-sm);
    }
    :where(p) {
      line-height: var(--line-height-title);
      color: var(--color-primary);
      text-align: center;
      letter-spacing: 0.05em;
    }
    div.c-button {
      margin-block-end: 0;
      @media (width < 768px) {
        inline-size: 100%;
      }
    }
  }
  .c-search-results__no-results-title {
    font-size: var(--font-size-20);
    @media (width < 768px) {
      margin-inline: calc(var(--spacing-min) * -1);
    }
  }
  .c-search-results__no-results-description {
    font-size: var(--font-size-base);
    @media (width < 768px) {
      font-size: var(--font-size-small);
    }
    > :where(span) {
      display: block;
      > :where(span) {
        @media (width < 768px) {
          display: block;
        }
      }
    }
  }
  .c-search-results__condition-button {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--spacing-x-min);
    align-items: center;
    justify-content: center;
    padding-block: var(--spacing-min);
    padding-inline: var(--spacing-xs);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-jp-medium);
    line-height: var(--line-height-button);
    background: var(--color-lightest);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-small);
    @media screen and (width < 940px) {
      gap: var(--spacing-min);
      padding-block: var(--spacing-xs);
      padding-inline: var(--spacing-s);
    }
    @media screen and (width >= 940px) {
      display: none;
    }
    &:before {
      inline-size: 16px;
      block-size: 16px;
      content: "";
      background: url(../images/common/icon-filter.svg) no-repeat 50% / contain;
    }
  }
}
@layer component {
  .c-search-detail {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4xl);
    @media (width < 768px) {
      gap: var(--spacing-2xl);
    }
  }
  .c-search-detail__main {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-md);
    padding-block: var(--spacing-xl);
    padding-inline: var(--spacing-xl);
    background: var(--color-lightest);
    border-block-start: 4px solid var(--color-secondary);
    @media (width < 768px) {
      padding-block: var(--spacing-md) var(--spacing-xl);
      padding-inline: var(--spacing-sm);
    }
  }
  .c-search-detail__main-tag {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding-block: var(--spacing-xs) var(--spacing-sm);
    @media (768px <=width) {
      padding-inline: 14px;
    }
    @media (width < 768px) {
      gap: var(--spacing-x-min);
      padding-block: var(--spacing-xs);
    }
    :where(li) {
      padding-block: 3px var(--spacing-min);
      padding-inline: var(--spacing-xs);
      font-size: var(--font-size-small-2);
      line-height: var(--line-height-button);
      letter-spacing: 0.05em;
      background: var(--color-bg-secondary);
      @media (width < 768px) {
        padding-inline: var(--spacing-min);
        font-size: var(--font-size-small-3);
      }
    }
  }
  .c-search-detail__main-summary {
    @media (768px <=width) {
      padding-block-end: var(--spacing-xs);
    }
  }
  .c-search-detail__message {
    display: grid;
    grid-template: "title" auto "text" auto/1fr;
    gap: var(--spacing-s) var(--spacing-md);
    padding-block: var(--spacing-md);
    padding-inline: var(--spacing-md);
    background: var(--color-bg-secondary);
    @media (width < 768px) {
      gap: var(--spacing-s);
      padding-block: var(--spacing-sm);
      padding-inline: var(--spacing-sm);
    }
    :where(h2) {
      position: relative;
      display: flex;
      grid-area: title;
      align-items: flex-start;
      padding-inline-start: calc(var(--spacing-md) + var(--spacing-s));
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      color: var(--color-primary);
      @media (width < 768px) {
        margin-block-start: var(--spacing-xs);
      }
      &:before {
        position: absolute;
        inset-block: 0 auto;
        inset-inline: 0 auto;
        inline-size: 24px;
        block-size: 24px;
        content: "";
        background: url(../images/common/icon-people.svg) no-repeat 0 0 / contain;
      }
    }
    :where(p) {
      grid-area: text;
      font-size: var(--font-size-small);
      line-height: var(--line-height-text);
      :where(span) {
        display: block;
      }
    }
  }
  .c-search-detail__same-filters,
  .c-search-detail__similar {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-md);
    @media (width < 768px) {
      row-gap: var(--spacing-sm);
    }
    :where(h2) {
      font-size: var(--font-size-20);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
      letter-spacing: 0.05em;
    }
    div.c-button {
      margin-block-end: var(--spacing-no);
    }
  }
  .c-search-detail__other {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    padding-block: var(--spacing-md);
    padding-inline: var(--spacing-md);
    line-height: var(--line-height-title);
    background: var(--color-lightest);
    :where(h2) {
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-jp-bold);
      color: var(--color-secondary);
    }
    :where(ul) {
      display: flex;
      flex-direction: column;
      margin-block-end: var(--spacing-xl);
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-jp-medium);
      :where(li) {
        display: flex;
        align-items: center;
        &:not(:last-child) {
          :where(a) {
            border-block-end: 1px solid var(--color-border-light);
          }
        }
        :where(a) {
          position: relative;
          display: grid;
          grid-template-columns: 1fr auto;
          gap: var(--spacing-xs);
          align-items: center;
          inline-size: 100%;
          padding-block: var(--spacing-s);
          padding-inline: var(--spacing-s) 36px;
          transition:
            color 0.2s ease-in-out,
            border-color 0.2s ease-in-out;
          @media (any-hover: hover) {
            &:hover {
              color: var(--color-secondary);
              &:after {
                inset-inline-end: calc(var(--spacing-min) * -1);
              }
            }
          }
          &:after {
            position: absolute;
            inset: 0 0 0 auto;
            inline-size: 16px;
            block-size: 16px;
            margin-block: auto;
            content: "";
            background: url(../images/common/icon-arrow-primary-right.svg) no-repeat 50% / contain;
            transition: inset-inline-end 0.2s ease-in-out;
          }
          :where(span) {
            min-inline-size: 0;
            max-inline-size: 64rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .c-search-detail__other-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-xs);
    overflow: hidden;
    transition: max-block-size 0.4s ease;
    will-change: max-block-size;
  }
  .c-search-detail__other-inner:after {
    position: absolute;
    inset: auto 0 0;
    inline-size: 100%;
    block-size: 128px;
    content: "";
    background: var(--gradient-white);
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .c-search-detail__other details:not([open]) + .c-search-detail__other-inner {
    max-block-size: 266px;
    overflow: hidden;
  }
  .c-search-detail__other details[open] + .c-search-detail__other-inner {
    max-block-size: 2000px;
  }
  .c-search-detail__other details[open] + .c-search-detail__other-inner:after {
    pointer-events: none;
    opacity: 0;
  }
  .c-search-detail__other-button .c-search-detail__other-close,
  .c-search-detail__other-button .c-search-detail__other-open {
    transition: opacity 0.2s ease;
    will-change: opacity;
  }
  .c-search-detail__other-button .c-search-detail__other-open {
    pointer-events: auto;
    opacity: 1;
  }
  .c-search-detail__other-button .c-search-detail__other-close {
    pointer-events: none;
    opacity: 0;
  }
  details[open] .c-search-detail__other-button .c-search-detail__other-open {
    pointer-events: none;
    opacity: 0;
    transition-delay: 0.4s;
  }
  details:not([open]) .c-search-detail__other-button .c-search-detail__other-open,
  details[open] .c-search-detail__other-button .c-search-detail__other-close {
    pointer-events: auto;
    opacity: 1;
    transition-delay: 0.4s;
  }
  details:not([open]) .c-search-detail__other-button .c-search-detail__other-close {
    pointer-events: none;
    opacity: 0;
    transition-delay: 0.4s;
  }
  details[open] .c-search-detail__other-button :where(span):after {
    rotate: 180deg;
  }
  .c-search-detail__other-button {
    position: absolute;
    inset: auto 0 var(--spacing-sm);
    z-index: 1;
    display: grid;
    content: "";
    :where(span) {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      grid-area: 1/1/-1/-1;
      place-content: center;
      align-items: center;
      justify-content: center;
      inline-size: fit-content;
      min-inline-size: 200px;
      padding-block: var(--spacing-xs);
      padding-inline: var(--spacing-lg) var(--spacing-xl);
      margin-inline: auto;
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
      color: var(--color-secondary);
      background: var(--color-lightest);
      border: 1px solid var(--color-secondary);
      border-radius: var(--radius-normal);
      transition:
        color 0.2s ease-in-out,
        border-color 0.2s ease-in-out;
      &:after {
        position: absolute;
        inset: 0 var(--spacing-sm) 0 auto;
        inline-size: 16px;
        block-size: 16px;
        margin-block: auto;
        content: "";
        background: url(../images/common/icon-arrow-primary-down.svg) no-repeat 50% / contain;
        transition: rotate 0.2s ease-in-out;
      }
    }
  }
  @media (any-hover: hover) {
    .c-search-detail__other-button:hover :where(span) {
      color: var(--color-text-link-hover);
      border-color: var(--color-text-link-hover);
    }
  }
  .c-search-detail__related {
    :where(.c-table) {
      div.c-table__sm-block-02 th {
        @media (768px <=width) {
          inline-size: auto;
        }
      }
      :where(ul) {
        display: inline-flex;
        flex-wrap: wrap;
        gap: var(--spacing-s);
        :where(li) {
          font-size: var(--font-size-small);
          line-height: var(--line-height-button);
        }
      }
    }
  }
}
@layer component {
  .c-search-category {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs) var(--spacing-lg);
    max-inline-size: 1200px;
    @media (width < 992px) {
      grid-template-columns: 1fr;
    }
    :where(> li) {
      display: grid;
      grid-template-rows: auto 1fr;
      gap: var(--spacing-xs);
    }
  }
  .c-search-category__title {
    position: relative;
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-x-min);
    margin-block-end: var(--spacing-xs);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-jp-bold);
    line-height: var(--line-height-button);
    border-block-end: 1px solid var(--color-border-light);
    &:before {
      position: absolute;
      inset-block-end: -1px;
      inset-inline-start: 0;
      inline-size: 48px;
      block-size: 1px;
      content: "";
      background: var(--color-secondary);
    }
  }
  .c-search-category__sub {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--spacing-sm);
    font-size: var(--font-size-small);
    font-feature-settings: "palt";
    :where(> li) {
      :where(a) {
        display: block;
        inline-size: 100%;
        padding-inline-end: 1em;
      }
    }
    li {
      padding-block: 6px;
      margin-inline-start: var(--spacing-sm);
      line-height: var(--line-height-button);
      a {
        position: relative;
        color: var(--color-text-gray);
        border-block-end: 1px solid #0000;
        transition:
          color 0.2s ease-in-out,
          border-color 0.2s ease-in-out;
        @media (any-hover: hover) {
          &:hover {
            color: var(--color-darkest);
            border-color: var(--color-darkest);
            &:before {
              background: url(../images/common/icon-arrow-primary-right-sm.svg) 0 0 no-repeat;
            }
          }
        }
        &:before {
          position: absolute;
          inset-block-start: 0.3em;
          inset-inline-start: calc(var(--spacing-sm) * -1);
          inline-size: 12px;
          block-size: 12px;
          content: "";
          background: url(../images/common/icon-arrow-black-right-sm.svg) 0 0 no-repeat;
          background-size: contain;
          transition: background 0.2s ease-in-out;
        }
      }
    }
  }
}
@layer component {
  .c-search-category-title {
    max-inline-size: var(--view-size-content-main);
    margin-block-end: var(--spacing-sm);
    margin-inline: auto;
    :where(h2) {
      font-size: var(--font-size-20);
      line-height: var(--line-height-button);
      letter-spacing: 0.05em;
      @media (width < 768px) {
        font-size: var(--font-size-22);
      }
    }
  }
}
@layer component {
  .c-search-cta {
    div.c-column {
      padding-block-start: 0;
      @media (width < 768px) {
        grid-template: "apply" auto "save" auto/1fr;
      }
    }
    ul.c-button {
      margin-block-end: 0;
    }
    div.c-column__item-auto {
      &:has(.c-button__link-save) {
        @media (width < 768px) {
          grid-area: save;
        }
      }
      &:has(.c-button__link-apply) {
        @media (width < 768px) {
          grid-area: apply;
        }
      }
    }
  }
}
@layer component {
  .c-sticky-cta {
    position: sticky;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 10;
    inline-size: calc(100% + var(--spacing-sm) * 2);
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-sm);
    margin-inline: calc(var(--spacing-sm) * -1);
    background: url(../images/common/bg-cta.svg) no-repeat 50% / cover;
    @media (width < 768px) {
      padding-inline: var(--spacing-sm);
      background: url(../images/common/bg-cta-sp.svg) no-repeat 50% / cover;
    }
    div.c-column {
      align-items: center;
      padding-block-start: 0;
      margin-block-end: 0;
      @media (width < 768px) {
        grid-template-columns: 40px 1fr;
        column-gap: var(--spacing-xs);
        align-items: stretch;
      }
      div.c-column__item-auto {
        &:has(.c-button__link-apply) {
          @media (width < 768px) {
            inline-size: 100%;
          }
          div.c-column__item-btn {
            @media (width < 768px) {
              inline-size: 100%;
              max-inline-size: unset;
              block-size: 100%;
            }
            div.c-button {
              @media (width < 768px) {
                block-size: 100%;
              }
            }
          }
        }
      }
      div.c-column__item-btn {
        @media (width < 768px) {
          min-inline-size: unset;
        }
        a {
          @media (width < 768px) {
            min-inline-size: unset;
          }
        }
      }
      div.c-column__item-btn div.c-button:has(> a.c-button__link-apply) {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-normal);
      }
      div.c-column__item-btn div.c-button:has(> a.c-button__link-apply):before {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        pointer-events: none;
        content: "";
        background: var(--gradient-button-bg-gold);
        border-radius: inherit;
      }
      a,
      button {
        padding-block: var(--spacing-s);
        border-radius: var(--radius-normal);
        @media (width < 768px) {
          max-inline-size: unset;
          padding-block: var(--spacing-xs);
        }
      }
      button.c-button__link-save {
        @media (width < 768px) {
          inline-size: var(--spacing-xl);
          min-inline-size: unset;
          block-size: 100%;
          aspect-ratio: 1/1;
          padding-inline: var(--spacing-xs);
        }
        &:before {
          @media (width < 768px) {
            inset-inline: 0;
            margin-inline: auto;
          }
        }
        span {
          @media (width < 768px) {
            position: absolute;
            inline-size: 1px;
            block-size: 1px;
            padding-left: 0;
            padding-bottom: 0;
            padding-right: 0;
            padding-top: 0;
            margin-left: -1px;
            margin-bottom: -1px;
            margin-right: -1px;
            margin-top: -1px;
            overflow: hidden;
            white-space: nowrap;
            border: 0;
          }
        }
      }
      a.c-button__link-apply {
        color: var(--color-lightest);
        background-color: initial;
        border: none;
        isolation: isolate;
        @media (width < 768px) {
          inline-size: 100%;
          block-size: 100%;
        }
        &:hover {
          color: var(--color-cta);
          background: var(--color-lightest);
          border: none;
        }
        &:before {
          position: absolute;
          inset: 0;
          z-index: -1;
          padding: 1px;
          pointer-events: none;
          content: "";
          background: var(--gradient-border-gold);
          border-radius: var(--radius-normal);
          mask:
            linear-gradient(var(--color-lightest) 0 0) content-box,
            linear-gradient(var(--color-lightest) 0 0);
          mask-composite: exclude;
          transition: opacity 0.2s ease-in;
        }
      }
    }
  }
  div.c-page-sub__main .c-sticky-cta {
    inline-size: calc(100% + var(--spacing-sm) * 2);
    margin-inline: calc(var(--spacing-sm) * -1);
  }
}
@layer component {
  .c-sticky-cta-register {
    position: sticky;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 10;
    inline-size: calc(100% + var(--spacing-sm) * 2);
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-sm);
    margin-inline: calc(var(--spacing-sm) * -1);
    @media (width < 768px) {
      padding-block: var(--spacing-s) var(--spacing-sm);
    }
    &:before {
      z-index: -2;
      background-image: url(../images/common/bg-cta-register.svg);
      background-repeat: repeat;
      background-position: 0 0;
      background-size: 40px 40px;
      opacity: 0.6;
    }
    &:after,
    &:before {
      position: absolute;
      inset: 0;
      content: "";
    }
    &:after {
      z-index: -1;
      background-image: var(--gradient-cta-register-bg);
    }
    &[data-on-footer="true"] {
      &:before {
        opacity: 1;
      }
      &:after {
        background-image: var(--gradient-cta-register-bg-on-footer);
      }
    }
    div.c-column {
      align-items: center;
      padding-block-start: 0;
      margin-block-end: 0;
      @media (width < 768px) {
        grid-template-columns: 1fr;
        gap: var(--spacing-x-min);
      }
    }
    :where(.c-column__item-auto) {
      :where(p) {
        font-size: var(--font-size-base);
        line-height: var(--line-height-title);
        color: var(--color-lightest);
        letter-spacing: 0.08em;
        @media (width < 768px) {
          font-size: var(--font-size-small);
        }
      }
    }
    div.c-column__item-btn {
      max-inline-size: unset;
      @media (width < 768px) {
        min-inline-size: auto;
      }
      div.c-button {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-normal);
        @media (width < 768px) {
          max-inline-size: 280px;
          margin-inline: auto;
        }
        &:before {
          position: absolute;
          inset: 0;
          inline-size: 100%;
          block-size: 100%;
          pointer-events: none;
          content: "";
          background: var(--gradient-gold-04);
        }
      }
      a {
        padding-block: var(--spacing-sm);
        @media (width < 768px) {
          inline-size: 100%;
          padding-block: var(--spacing-s);
        }
      }
    }
    div.c-column__item-auto:has(.c-button__link-apply) {
      @media (width < 768px) {
        inline-size: 100%;
      }
    }
    div.c-column:has(.c-column__item-auto) a {
      @media (768px <=width) {
        min-inline-size: 352px;
      }
      @media (width < 768px) {
        inline-size: 100%;
        min-inline-size: auto;
      }
    }
    a.c-button__link-apply {
      position: relative;
      font-size: var(--font-size-large);
      line-height: var(--line-height-button);
      color: var(--color-lightest);
      background-color: initial;
      border: none;
      border-radius: var(--radius-normal);
      box-shadow: 0 4px 0 0 #0006;
      isolation: isolate;
      transition-timing-function: ease-in;
      transition-duration: 0.2s;
      transition-property: color, background;
      @media (width < 768px) {
        inline-size: 100%;
        font-size: var(--font-size-base);
      }
      &:before {
        position: absolute;
        inset: 0;
        z-index: -1;
        padding: 1px;
        pointer-events: none;
        content: "";
        background: var(--gradient-border-gold);
        border-radius: inherit;
        mask:
          linear-gradient(var(--color-lightest) 0 0) content-box,
          linear-gradient(var(--color-lightest) 0 0);
        mask-composite: exclude;
      }
    }
  }
  @media (any-hover: hover) {
    .c-sticky-cta-register a.c-button__link-apply:hover {
      color: var(--color-cta);
      background-color: var(--color-lightest);
      &:after {
        background-image: url(../images/common/icon-arrow-gold-right.svg);
      }
    }
  }
  div.c-page-home__main .c-sticky-cta-register {
    inline-size: 100%;
    margin-inline: 0;
  }
}
@layer component {
  .c-consultant {
    @media (width > 940px) {
      padding-block-start: var(--spacing-sm);
    }
    > section {
      margin-block-end: var(--spacing-2xl);
      &:last-child,
      > :last-child {
        margin-block-end: 0;
      }
    }
  }
  .c-consultant__profile {
    display: grid;
    gap: var(--spacing-md) var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: var(--color-bg-secondary);
    @media (768px <=width) {
      grid-template-columns: 1fr 1fr;
    }
    > div {
      > h2 {
        margin-block: 0 var(--spacing-xs);
        font-size: var(--font-size-small);
        line-height: var(--line-height-button);
        color: var(--color-primary);
        letter-spacing: 0.05em;
      }
      > p {
        font-size: var(--font-size-small-1);
        line-height: 2;
        @media (width < 768px) {
          font-size: var(--font-size-small);
        }
        > span {
          display: block;
        }
      }
      &:first-child {
        @media (768px <=width) {
          padding-inline-end: var(--spacing-sm);
          border-inline-end: 1px solid var(--color-border-light);
        }
        @media (width < 768px) {
          padding-block-end: var(--spacing-md);
          border-block-end: 1px solid var(--color-border-light);
        }
      }
    }
  }
  .c-consultant__results-content {
    position: relative;
    margin-block-end: var(--spacing-md);
  }
  .c-consultant__results-table {
    position: relative;
    overflow: hidden;
    transition: max-block-size 0.4s ease;
    will-change: max-block-size;
    [class="c-table"] {
      margin-block-end: 0;
    }
    table {
      [data-sp-hidden="true"] {
        @media (width < 768px) {
          display: none;
        }
      }
      thead th {
        @media (width < 768px) {
          min-inline-size: 56px;
        }
      }
      th[data-value="income"] {
        &:after {
          @media (width < 768px) {
            display: block;
            content: "(万円)";
          }
        }
      }
      td[data-value="income"] {
        > span {
          @media (width < 768px) {
            display: none;
          }
        }
      }
    }
  }
  .c-consultant__results-table:after {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    inline-size: 100%;
    block-size: 70px;
    content: "";
    background: var(--gradient-white);
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .c-consultant__results-details:not([open]) + .c-consultant__results-table {
    max-block-size: 347px;
    overflow: hidden;
    @media (width < 768px) {
      max-block-size: 537px;
    }
  }
  .c-consultant__results-details[open] + .c-consultant__results-table {
    max-block-size: 2000px;
    padding-block-end: var(--spacing-3xl);
  }
  .c-consultant__results-details[open] + .c-consultant__results-table:after {
    pointer-events: none;
    opacity: 0;
  }
  .c-consultant__results-details[open] + .c-consultant__results-table .c-consultant__results-text-note {
    position: static;
    padding-block: 0;
  }
  .c-consultant__results-details-button .c-consultant__results-details-close,
  .c-consultant__results-details-button .c-consultant__results-details-open {
    transition: opacity 0.2s ease;
    will-change: opacity;
  }
  .c-consultant__results-details-button .c-consultant__results-details-open {
    pointer-events: auto;
    opacity: 1;
  }
  .c-consultant__results-details-button .c-consultant__results-details-close {
    pointer-events: none;
    opacity: 0;
  }
  .c-consultant__results-details[open] .c-consultant__results-details-button .c-consultant__results-details-open {
    pointer-events: none;
    opacity: 0;
    transition-delay: 0.4s;
  }
  .c-consultant__results-details:not([open]) .c-consultant__results-details-button .c-consultant__results-details-open,
  .c-consultant__results-details[open] .c-consultant__results-details-button .c-consultant__results-details-close {
    pointer-events: auto;
    opacity: 1;
    transition-delay: 0.4s;
  }
  .c-consultant__results-details:not([open]) .c-consultant__results-details-button .c-consultant__results-details-close {
    pointer-events: none;
    opacity: 0;
    transition-delay: 0.4s;
  }
  .c-consultant__results-details-button {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: grid;
    inline-size: fit-content;
    margin-block-start: calc(1em + var(--spacing-sm));
    margin-inline: auto;
    content: "";
    :where(span) {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      grid-area: 1/1/-1/-1;
      place-content: center;
      align-items: center;
      justify-content: center;
      inline-size: fit-content;
      min-inline-size: 200px;
      padding-block: var(--spacing-xs);
      padding-inline: var(--spacing-lg);
      margin-inline: auto;
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
      color: var(--color-lightest);
      background: var(--gradient-blue-03);
      border: 1px solid var(--color-secondary);
      border-radius: var(--radius-normal);
      transition:
        color 0.2s ease-in-out,
        border-color 0.2s ease-in-out;
    }
  }
  @media (any-hover: hover) {
    .c-consultant__results-details-button:hover :where(span) {
      color: var(--color-secondary);
      background: var(--color-lightest);
    }
  }
  .c-consultant__voice-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    @media (width < 768px) {
      gap: var(--spacing-sm);
    }
    :where(li) {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: var(--spacing-s) var(--spacing-sm);
      @media (width < 768px) {
        gap: var(--spacing-xs) var(--spacing-s);
      }
      :where(img) {
        inline-size: 100%;
        block-size: auto;
        vertical-align: middle;
        @media (width < 768px) {
          align-self: center;
        }
      }
      :where(.c-consultant__voice-header) {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
      }
      :where(.c-consultant__voice-profile) {
        display: flex;
        gap: var(--spacing-min);
        :where(span) {
          font-size: var(--font-size-small);
          line-height: var(--line-height-button);
          letter-spacing: 0.05em;
        }
      }
      :where(.c-consultant__voice-title) {
        font-size: var(--font-size-large);
        font-weight: var(--font-weight-jp-bold);
        line-height: var(--line-height-button);
        color: var(--color-secondary);
        letter-spacing: 0.05em;
      }
      :where(.c-consultant__voice-description) {
        grid-column: span 2;
        font-size: var(--font-size-small);
        @media (width < 768px) {
          font-size: var(--font-size-base);
        }
      }
    }
  }
  .c-consultant__articles-item {
    margin-block-end: var(--spacing-xs);
    > a {
      display: block;
      padding: var(--spacing-sm);
      border: 1px solid var(--color-border-default);
      transition: background-color 0.2s;
      > * {
        &:last-child {
          margin-block-end: 0;
        }
        &:first-child {
          margin-block-start: 0;
        }
      }
    }
    h3 {
      margin-block-end: var(--spacing-xs);
      font-size: var(--font-size-base);
      line-height: var(--line-height-title);
      color: var(--color-secondary);
      text-wrap: wrap;
      transition: color 0.2s;
      @media (width < 768px) {
        margin-block-end: var(--spacing-min);
      }
    }
    p {
      font-size: var(--font-size-small);
      transition: color 0.2s;
    }
    &:last-child {
      margin-block-end: 0;
    }
  }
  @media (any-hover: hover) {
    .c-consultant__articles-item > a:hover {
      background-color: var(--color-bg-secondary);
      h3 {
        color: var(--color-text-link-hover);
      }
      p {
        color: var(--color-text-gray);
      }
    }
  }
}
@layer component {
  .c-consultant-introduction__radio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--spacing-xs) var(--spacing-s);
    padding: var(--spacing-sm);
    margin-block-end: var(--spacing-md);
    line-height: var(--line-height-button);
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
      gap: var(--spacing-min) var(--spacing-xs);
      padding: var(--spacing-s);
    }
    [class="c-radio"]:has(input[type="radio"]) {
      > span.c-radio__text {
        font-weight: var(--font-weight-jp-regular);
        color: var(--color-darkest);
      }
    }
    label.c-radio:has(input[type="radio"]) {
      padding-block: var(--spacing-x-min);
    }
  }
  .c-consultant-introduction__list {
    display: grid;
    grid-template-columns: repeat(var(--col-pc), 1fr);
    gap: var(--spacing-xs);
    margin-block-end: var(--spacing-md);
    @media (width < 768px) {
      grid-template-columns: repeat(var(--col-sp), 1fr);
    }
  }
  .c-consultant-introduction__list-inner {
    display: grid;
    grid-template-rows: auto 1fr;
    block-size: 100%;
  }
  .c-consultant-introduction__list-link {
    &:hover {
      [class="c-consultant-introduction__list-textarea"] {
        color: var(--color-secondary);
        &:before {
          opacity: 0;
        }
      }
      [class="c-consultant-introduction__list-label"] {
        border-color: var(--color-secondary);
        &:after {
          background-image: url(../images/common/icon-arrow-primary-right.svg);
        }
      }
    }
  }
  .c-consultant-introduction__list-image {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 246/199;
    text-align: center;
    background-image: url(../images/common/bg-person-consultant.jpg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
  }
  .c-consultant-introduction__list-image img {
    inline-size: auto;
    block-size: 100%;
    padding-block-start: var(--spacing-s);
    @media (width < 768px) {
      padding-block-start: var(--spacing-xs);
    }
  }
  .c-consultant-introduction__list-textarea {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    block-size: auto;
    padding: var(--spacing-sm);
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-lightest);
    transition: color 0.2s ease;
    @media (width < 768px) {
      padding-inline: var(--spacing-s);
    }
    &:before {
      position: absolute;
      inset: 0;
      z-index: -1;
      content: "";
      background: var(--gradient-blue-04);
      transition: opacity 0.2s ease;
    }
  }
  .c-consultant-introduction__list-position {
    margin-block-end: var(--spacing-xs);
    font-size: var(--font-size-small-1);
  }
  .c-consultant-introduction__list-position span {
    display: block;
    padding-block-start: var(--spacing-x-min);
  }
  .c-consultant-introduction__list-name {
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-large);
    font-weight: 500;
    letter-spacing: 1.8px;
    @media (width < 768px) {
      letter-spacing: 1.6px;
    }
  }
  .c-consultant-introduction__list-label {
    display: flex;
    gap: var(--spacing-min);
    align-items: center;
    justify-content: flex-end;
    padding-block-start: var(--spacing-xs);
    margin-block-start: auto;
    font-size: var(--font-size-small-2);
    text-align: end;
    border-block-start: 1px solid var(--color-border-light-02);
    transition: border-color 0.2s ease;
  }
  .c-consultant-introduction__list-label:after {
    inline-size: 12px;
    block-size: 12px;
    content: "";
    background-image: url(../images/common/icon-arrow-white-right.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    transition: background-image 0.2s ease;
  }
  .c-search-sort {
    position: relative;
    font-weight: var(--font-weight-jp-medium);
    line-height: var(--line-height-button);
  }
}
@layer component {
  .c-search-sort__button {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--spacing-x-min);
    align-items: center;
    justify-content: center;
    padding-block: var(--spacing-min);
    padding-inline: var(--spacing-xs);
    font-size: var(--font-size-small);
    line-height: var(--line-height-button);
    background: var(--color-lightest);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-small);
    @media screen and (width < 940px) {
      gap: var(--spacing-min);
      padding-block: var(--spacing-xs);
      padding-inline: var(--spacing-s);
    }
    &:after {
      inline-size: 12px;
      block-size: 12px;
      content: "";
      background: url(../images/common/icon-arrow-primary-down-sm.svg) no-repeat 50% / contain;
      transition: rotate 0.3s ease-in-out;
    }
    &[aria-expanded="true"]:after {
      rotate: 180deg;
    }
  }
  .c-search-sort__select {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    z-index: 10;
    display: none;
    inline-size: 170px;
    padding: var(--spacing-min);
    margin: 0;
    text-align: center;
    background: var(--color-lightest);
    &[data-open] {
      display: block;
    }
  }
  .c-search-sort__item {
    position: relative;
    inline-size: 100%;
    padding-block: var(--spacing-xs);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-jp-medium);
    line-height: var(--line-height-button);
    border: none;
    &:hover {
      background: var(--color-bg-secondary);
    }
    &[aria-pressed="true"] {
      &:after {
        position: absolute;
        inset-block: auto var(--spacing-x-min);
        inset-inline: 0;
        inline-size: 26px;
        block-size: 1px;
        margin-inline: auto;
        text-align: center;
        content: "";
        background: var(--color-secondary);
      }
    }
  }
}
@layer component {
  .c-search-related-list {
    padding-block-end: var(--spacing-2xl);
    [class="c-search-results"] & {
      padding-block-end: 0;
    }
    :where(dl) {
      display: grid;
      row-gap: var(--spacing-xs);
      :where(dd) {
        padding-block-end: var(--spacing-xs);
        :where(ul) {
          display: inline-flex;
          flex-wrap: wrap;
          gap: var(--spacing-xs) var(--spacing-sm);
        }
      }
    }
    dl {
      dt {
        position: relative;
        padding-block: var(--spacing-xs);
        padding-inline: var(--spacing-x-min);
        font-size: var(--font-size-large);
        line-height: var(--line-height-button);
        border-block-end: 1px solid var(--color-border-light);
        &:before {
          position: absolute;
          inset-block-end: -1px;
          inset-inline-start: 0;
          inline-size: 48px;
          block-size: 1px;
          content: "";
          background: var(--color-secondary);
        }
      }
      dd {
        ul {
          font-size: var(--font-size-small);
          font-feature-settings: "palt";
          line-height: var(--line-height-title);
          @media (width < 768px) {
            font-size: var(--font-size-base);
          }
          li {
            a {
              color: var(--color-secondary);
              border-block-end: 1px solid #0000;
              transition: border-color 0.2s ease-in-out;
              @media (any-hover: hover) {
                &:hover {
                  border-color: var(--color-secondary);
                }
              }
            }
          }
        }
      }
    }
  }
}
@layer component {
  .c-request {
    :where(h1) {
      margin-block: var(--spacing-no);
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-jp-regular);
    }
    :where(h2) {
      font-size: var(--font-size-20);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
      letter-spacing: 0.05em;
    }
    div.c-button {
      margin-block-end: var(--spacing-no);
      @media (width < 768px) {
        margin-block-start: var(--spacing-xs);
      }
    }
    :where(section) {
      display: grid;
      row-gap: var(--spacing-md);
      padding-block-end: var(--spacing-4xl);
      @media (width < 768px) {
        row-gap: var(--spacing-sm);
        padding-block-end: var(--spacing-2xl);
      }
      &:last-of-type {
        @media (width < 768px) {
          padding-block-end: 0;
        }
      }
    }
  }
  .c-request__text {
    padding-block-end: var(--spacing-lg);
    @media (width < 768px) {
      padding-block-end: var(--spacing-md);
    }
    p.c-text {
      margin-block-end: var(--spacing-no);
    }
  }
}
@layer component {
  .c-company-info {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-2xl);
    align-items: start;
    :where(section) {
      inline-size: 100%;
    }
  }
  .c-company-info__main {
    padding-block-end: var(--spacing-sm);
    p.c-text {
      padding-block-start: var(--spacing-min);
      font-size: var(--font-size-small);
      :where(span) {
        display: block;
      }
    }
    div.c-button {
      margin-block-end: var(--spacing-no);
    }
    div.c-table {
      margin-block-end: var(--spacing-md);
      :where(table) {
        :where(td) {
          inline-size: 20%;
          @media (width < 992px) {
            inline-size: 26.82216%;
          }
        }
      }
    }
  }
  .c-company-info__search {
    padding-block-end: var(--spacing-sm);
    div.c-button {
      margin-block-end: var(--spacing-no);
      a.c-button__link-em-gradation {
        @media (width < 768px) {
          inline-size: 100%;
        }
      }
    }
  }
  .c-company-info__interview {
    display: grid;
    grid-template-columns: 1fr;
    @media (width < 768px) {
      gap: var(--spacing-xs);
    }
    > :where(li) {
      border-block-end: 1px solid var(--color-bg-category);
    }
    :where(li) {
      padding-block: 0;
      margin-block: 0;
      line-height: 0;
      :where(a) {
        position: relative;
        display: grid;
        grid-template: "image ." 1fr "image title" auto "image list" auto "image text" auto "image ." 1fr/135px 1fr;
        gap: 0 var(--spacing-md);
        align-content: center;
        align-items: start;
        padding-block: var(--spacing-sm) var(--spacing-md);
        overflow: hidden;
        color: var(--color-darkest);
        border-radius: var(--radius-normal);
        transition: background-color 0.2s ease-in-out;
        @media (width < 768px) {
          grid-template: "image title" auto "list list" auto "text text" auto/24cqi 1fr;
          gap: var(--spacing-s);
        }
        @media (any-hover: hover) {
          &:hover {
            :where(h3) {
              color: var(--color-text-link-hover);
              text-decoration-color: initial;
            }
          }
        }
      }
    }
    :where(img) {
      grid-area: image;
      padding-block: var(--spacing-xs);
    }
    :where(h3) {
      position: relative;
      display: inline-block;
      grid-area: title;
      inline-size: fit-content;
      margin-block: var(--spacing-no) var(--spacing-xs);
      font-size: var(--font-size-large);
      line-height: var(--line-height-title);
      color: var(--color-primary);
      text-wrap: wrap;
      text-decoration: underline;
      text-decoration-color: #0000;
      transition:
        color 0.2s ease-in-out,
        text-decoration-color 0.2s ease-in-out;
      @media (width < 768px) {
        margin-block-end: var(--spacing-min);
        font-size: var(--font-size-large);
      }
    }
    :where(p) {
      position: relative;
      grid-area: text;
      padding-inline-start: calc(var(--font-size-small-3) + var(--spacing-x-min));
      margin-block: 0;
      font-size: var(--font-size-small-3);
      font-weight: var(--font-weight-jp-regular);
      line-height: var(--line-height-title);
      color: var(--color-text-gray);
      @media (width < 768px) {
        padding-inline-start: calc(var(--font-size-small-3) + var(--spacing-x-min));
        font-size: var(--font-size-small-3);
      }
      &:before {
        position: absolute;
        inset-block: 0 auto;
        inset-inline: 0 auto;
        content: "※";
      }
    }
    :where(ul) {
      grid-area: list;
      margin-block: 0 var(--spacing-xs);
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-jp-regular);
      line-height: var(--line-height-button);
      @media (width < 768px) {
        font-size: var(--font-size-small-1);
      }
      :where(li) {
        line-height: var(--line-height-button);
        :where(a) {
          line-height: var(--line-height-button);
        }
      }
    }
  }
  .c-company-info__message {
    p.c-text {
      margin-block-end: var(--spacing-no);
    }
  }
  .c-company-info__sdgs {
    padding-block-end: var(--spacing-lg);
  }
  .c-company-info__sdgs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(85px, 85px));
    gap: var(--spacing-s);
    @media (width < 768px) {
      grid-template-columns: repeat(auto-fill, minmax(17.33333cqi, 17.33333cqi));
      gap: var(--spacing-min);
    }
    :where(li) {
      :where(img) {
        max-inline-size: 100%;
        aspect-ratio: 85/85;
      }
    }
  }
  .c-company-info__summary {
    div.c-table__sm-block > table {
      th {
        @media (768px <=width) {
          inline-size: 27.08333%;
        }
      }
      td {
        font-size: var(--font-size-small);
      }
    }
    :where(.c-table) {
      & + .c-company-info__features {
        margin-block-start: var(--spacing-2xl);
      }
    }
  }
  .c-company-info__features {
    display: grid;
    row-gap: var(--spacing-sm);
    padding-block: var(--spacing-lg) var(--spacing-xl);
    padding-inline: var(--spacing-md);
    text-align: center;
    background: url(../images/common/bg-company-info-features.png) no-repeat 50% / cover;
    @media (width < 768px) {
      row-gap: var(--spacing-xs);
      padding-block: var(--spacing-md) var(--spacing-lg);
      padding-inline: var(--spacing-sm);
      background: url(../images/common/bg-company-info-features-sp.png) no-repeat 50% / cover;
    }
    :where(h3) {
      position: relative;
      display: flex;
      gap: 0.5em;
      justify-content: center;
      font-size: var(--font-size-22);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      color: var(--color-lightest);
      letter-spacing: 0.08em;
      @media (width < 768px) {
        flex-direction: column;
        gap: var(--spacing-no);
      }
    }
    :where(ul) {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--spacing-2xl);
      justify-content: center;
      margin-inline: auto;
      @media (768px <=width) {
        inline-size: 87.2807%;
      }
      @media (width < 768px) {
        grid-template-columns: 1fr;
        row-gap: var(--spacing-xs);
        padding-inline-start: var(--spacing-min);
        margin-inline: var(--spacing-xs);
        text-align: start;
      }
      :where(li) {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
        @media (width < 768px) {
          grid-template-columns: auto 1fr;
          gap: var(--spacing-s);
          align-items: center;
        }
        & + li:before {
          @media (768px <=width) {
            position: absolute;
            inset-block: 0;
            inset-inline: calc(var(--spacing-md) * -1) auto;
            inline-size: 1px;
            block-size: 51px;
            margin-block: auto;
            content: "";
            background: var(--color-lightest);
            opacity: 0.5;
          }
        }
        :where(span) {
          @media (768px <=width) {
            display: block;
          }
        }
        :where(p) {
          &:first-child {
            font-family: var(--font-family-en);
            font-size: var(--font-size-h1);
            font-weight: var(--font-weight-jp-regular);
            line-height: 1;
            color: var(--color-cta-02);
            @media (width < 768px) {
              font-size: 2.14286em;
              line-height: var(--line-height-title);
            }
          }
          &:last-child {
            font-size: var(--font-size-15);
            font-weight: var(--font-weight-jp-regular);
            line-height: var(--line-height-title);
            color: var(--color-lightest);
            @media (width < 768px) {
              font-size: var(--font-size-base);
            }
          }
        }
      }
    }
    div.c-button {
      inline-size: 100%;
      margin-block: var(--spacing-xs) var(--spacing-no);
      @media (width < 768px) {
        margin-block-start: var(--spacing-sm);
      }
      :where(a.c-button__link-register):not(:hover) {
        background-color: initial;
        border-color: #0000;
      }
    }
  }
  .c-company-info__career {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--spacing-md);
    @media (width < 768px) {
      grid-template-columns: 1fr;
      gap: var(--spacing-xs);
    }
    :where(li) {
      padding-block: 0;
      margin-block: 0;
      line-height: 0;
      &:not(:has(.c-company-info__career-text)) {
        grid-column: 1/-1;
        :where(a) {
          inline-size: calc((100% - var(--spacing-md)) / 2);
          margin-inline: 0;
          border: none;
          @media (width < 768px) {
            inline-size: 100%;
          }
        }
        :where(img) {
          display: block;
          inline-size: 100%;
          block-size: auto;
          aspect-ratio: 468/156;
        }
      }
      :where(.c-company-info__career-text) {
        display: grid;
        grid-area: text;
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
        @media (width < 768px) {
          gap: var(--spacing-min);
        }
      }
      :where(a) {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        overflow: hidden;
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-normal);
        transition: opacity 0.2s ease-in-out;
        @media (any-hover: hover) {
          &:hover {
            opacity: 0.6;
          }
        }
      }
      :where(a):has(.c-company-info__career-text) {
        grid-template: "image text" auto/130px 1fr;
        gap: var(--spacing-md);
        align-items: center;
        padding-block: var(--spacing-sm);
        padding-inline: var(--spacing-sm) var(--spacing-lg);
        overflow: hidden;
        line-height: var(--line-height-title);
        color: var(--color-darkest);
        @media (width < 768px) {
          grid-template-columns: 24cqi 1fr;
          gap: var(--spacing-sm);
        }
        &:after {
          position: absolute;
          inset: 0;
          inset-block: 0;
          inset-inline: auto var(--spacing-s);
          inline-size: 16px;
          block-size: 16px;
          margin-block: auto;
          content: "";
          background: url(../images/common/icon-arrow-primary-right.svg) no-repeat 50% / cover;
        }
        :where(h3) {
          font-size: var(--font-size-20);
          font-weight: var(--font-weight-jp-bold);
          color: var(--color-secondary);
        }
        :where(ul) {
          font-size: var(--font-size-small-1);
          font-weight: var(--font-weight-jp-regular);
          color: var(--color-text-gray);
          :where(li) {
            position: relative;
            padding-inline-start: 10px;
            line-height: var(--line-height-button);
            &:before {
              position: absolute;
              inset-block: 0.65em auto;
              inset-inline: 0 auto;
              inline-size: 6px;
              block-size: 1px;
              content: "";
              background: var(--color-text-gray);
            }
          }
        }
      }
    }
  }
  @supports (height: 1lh) {
    .c-company-info__career :where(li) :where(a):has(.c-company-info__career-text) :where(ul) :where(li):before {
      inset-block: calc(0.5lh - 0.5px) auto;
    }
  }
}
@layer component {
  .c-favorites {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-2xl);
    &:has(.c-favorites__pagination) {
      row-gap: var(--spacing-no);
    }
    p.c-text {
      color: var(--color-text-gray);
    }
    div.c-button,
    p.c-text {
      margin-block-end: var(--spacing-no);
    }
  }
  .c-favorites__pagination {
    padding-block: var(--spacing-4xl);
    @media (width < 768px) {
      padding-block: var(--spacing-no) var(--spacing-2xl);
    }
  }
  .c-favorites__actions {
    display: grid;
    row-gap: var(--spacing-md);
    text-align: center;
    div.c-button {
      inline-size: 100%;
    }
    :where(button) {
      position: relative;
      display: flex;
      gap: var(--spacing-xs);
      align-items: center;
      justify-content: center;
      inline-size: fit-content;
      padding-block: var(--spacing-s);
      padding-inline: var(--spacing-sm) var(--spacing-xl);
      margin-inline: auto;
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-jp-medium);
      line-height: var(--line-height-button);
      color: var(--color-text-gray);
      background: var(--color-lightest);
      border: 1px solid var(--color-text-gray);
      border-radius: var(--radius-normal);
      transition: background 0.2s;
      @media (any-hover: hover) {
        &:hover {
          background: var(--color-bg-link-back-hover);
        }
      }
      &:after {
        position: absolute;
        inset-block: 0;
        inset-inline: auto var(--spacing-sm);
        inline-size: 16px;
        block-size: 16px;
        margin-block: auto;
        content: "";
        background: url(../images/common/icon-cancel-gray.svg) no-repeat 50% / contain;
      }
    }
  }
}
@layer component {
  .c-dev-only {
    display: grid;
    place-content: center;
    padding: var(--spacing-md);
    font-size: var(--font-size-24);
    color: var(--color-text-gray);
    text-align: center;
    background: var(--color-bg-bgb-gray);
    border: 2px solid var(--color-text-gray);
  }
  .c-heading {
    color: var(--base-font-color);
  }
}
@layer component {
  .c-heading__02 {
    padding-block-end: var(--spacing-s);
    margin-block-end: var(--spacing-md);
    font-size: var(--font-size-20);
    line-height: var(--line-height-title);
    color: var(--color-primary);
    text-wrap: wrap;
    border-block-end: 1px solid var(--color-border-default);
    @media (width < 768px) {
      margin-block-end: var(--spacing-sm);
      font-size: var(--font-size-22);
    }
  }
  .c-heading__03 {
    position: relative;
    padding-inline-start: 11px;
    margin-block-end: var(--spacing-md);
    font-size: var(--font-size-large);
    line-height: var(--line-height-title);
    color: var(--color-primary);
    text-wrap: wrap;
    @media (width < 768px) {
      margin-block-end: var(--spacing-sm);
      font-size: var(--font-size-20);
    }
    &:before {
      position: absolute;
      inset-block-start: 3px;
      inset-inline-start: 0;
      display: inline-block;
      inline-size: 3px;
      block-size: 22px;
      content: "";
      background-color: var(--color-secondary);
      @media (width < 768px) {
        inset-block-start: 2px;
      }
    }
  }
  .c-heading__04 {
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-s);
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-base);
    line-height: var(--line-height-title);
    color: var(--color-primary);
    text-wrap: wrap;
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      font-size: var(--font-size-large);
    }
  }
  .c-heading__05 {
    margin-block-end: var(--spacing-s);
    font-size: var(--font-size-base);
    line-height: var(--line-height-title);
    color: var(--color-primary);
    text-wrap: wrap;
    @media (width < 768px) {
      margin-block-end: var(--spacing-xs);
      font-size: var(--font-size-large);
    }
  }
  .c-heading__06 {
    margin-block-end: var(--spacing-s);
    font-size: var(--font-size-small);
    line-height: var(--line-height-title);
    color: var(--color-primary);
    text-wrap: wrap;
    @media (width < 768px) {
      margin-block-end: var(--spacing-xs);
      font-size: var(--font-size-base);
    }
  }
}
@layer component {
  .c-heading-02 {
    padding-block-end: var(--spacing-s);
    margin-block-end: var(--spacing-md);
    font-size: var(--font-size-20);
    line-height: var(--line-height-title);
    color: var(--color-primary);
    text-wrap: wrap;
    border-block-end: 1px solid var(--color-border-default);
    @media (width < 768px) {
      margin-block-end: var(--spacing-sm);
      font-size: var(--font-size-22);
    }
  }
}
@layer component {
  .c-heading-03 {
    position: relative;
    padding-inline-start: 11px;
    margin-block-end: var(--spacing-md);
    font-size: var(--font-size-large);
    line-height: var(--line-height-title);
    color: var(--color-primary);
    text-wrap: wrap;
    @media (width < 768px) {
      margin-block-end: var(--spacing-sm);
      font-size: var(--font-size-20);
    }
    &:before {
      position: absolute;
      inset-block-start: 3px;
      inset-inline-start: 0;
      display: inline-block;
      inline-size: 3px;
      block-size: 22px;
      content: "";
      background-color: var(--color-secondary);
      @media (width < 768px) {
        inset-block-start: 2px;
      }
    }
  }
}
@layer component {
  .c-heading-04 {
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-s);
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-base);
    line-height: var(--line-height-title);
    color: var(--color-primary);
    text-wrap: wrap;
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      font-size: var(--font-size-large);
    }
  }
}
@layer component {
  .c-heading-05 {
    margin-block-end: var(--spacing-s);
    font-size: var(--font-size-base);
    line-height: var(--line-height-title);
    color: var(--color-primary);
    text-wrap: wrap;
    @media (width < 768px) {
      margin-block-end: var(--spacing-xs);
      font-size: var(--font-size-large);
    }
  }
}
@layer component {
  .c-heading-06 {
    margin-block-end: var(--spacing-s);
    font-size: var(--font-size-small);
    line-height: var(--line-height-title);
    color: var(--color-primary);
    text-wrap: wrap;
    @media (width < 768px) {
      margin-block-end: var(--spacing-xs);
      font-size: var(--font-size-base);
    }
  }
}
@layer component {
  .c-text {
    color: var(--base-font-color);
    :where(span) {
      display: block;
    }
  }
  .c-text,
  .c-text__align-center,
  .c-text__align-center-pc,
  .c-text__align-center-sp,
  .c-text__align-right,
  .c-text__align-right-pc,
  .c-text__align-right-sp,
  .c-text__color-gray,
  .c-text__mb-small,
  .c-text__note {
    margin-block-end: var(--spacing-md);
    font-size: var(--font-size-small);
    @media (width < 768px) {
      font-size: var(--font-size-base);
    }
  }
  .c-text__note {
    position: relative;
    padding-inline-start: calc(1em + 5px);
    font-size: var(--font-size-small-1);
  }
  .c-text__note:before {
    position: absolute;
    inset: 0 auto auto 0;
    content: "※";
  }
  .c-text__align-center {
    text-align: center;
  }
  .c-text__align-center-pc {
    @media (768px <=width) {
      text-align: center;
    }
  }
  .c-text__align-center-sp {
    @media (width < 768px) {
      text-align: center;
    }
  }
  .c-text__align-right {
    text-align: end;
  }
  .c-text__align-right-pc {
    @media (768px <=width) {
      text-align: end;
    }
  }
  .c-text__align-right-sp {
    @media (width < 768px) {
      text-align: end;
    }
  }
  .c-text__color-gray {
    color: var(--color-text-gray);
  }
  .c-text a {
    font-weight: var(--font-weight-jp-medium);
    color: var(--color-secondary);
    border-block-end: 1px solid var(--color-secondary);
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
    transition-property: color, border-color;
    &:hover {
      color: var(--color-text-link-hover);
      border-color: #0000;
    }
    &[target="_blank"] {
      position: relative;
      margin-inline-end: 1.5rem;
      &:after {
        position: absolute;
        inset-block-end: 2px;
        inset-inline-end: -1.25rem;
        inline-size: 1rem;
        block-size: 1rem;
        content: "";
        background:
          url(../images/common/icon-blank.svg),
          url(../images/common/icon-blank-lighter.svg) no-repeat 50%;
        background-size: contain, 0;
        transition: background-image 0.2s ease-in;
      }
      &:hover:after {
        background-image: url(../images/common/icon-blank-lighter.svg);
      }
    }
    &[href$=".doc"],
    &[href$=".docx"],
    &[href$=".pdf"],
    &[href$=".xls"],
    &[href$=".xlsm"],
    &[href$=".xlsx"],
    &[href$=".zip"] {
      position: relative;
      margin-inline-end: 1.5rem;
      &:after {
        position: absolute;
        inset-block-end: 2px;
        inset-inline-end: -1.25rem;
        inline-size: 1rem;
        block-size: 1rem;
        content: "";
        background-size: contain, 0;
        transition: background-image 0.2s ease-in;
      }
    }
    &[href$=".pdf"] {
      &:after {
        background:
          url(../images/common/icon-pdf.svg),
          url(../images/common/icon-pdf-hover.svg) no-repeat 50%;
      }
      &:hover:after {
        background-image: url(../images/common/icon-pdf-hover.svg);
      }
    }
    &[href$=".zip"] {
      &:after {
        background:
          url(../images/common/icon-zip.svg),
          url(../images/common/icon-zip-hover.svg) no-repeat 50%;
      }
      &:hover:after {
        background-image: url(../images/common/icon-zip-hover.svg);
      }
    }
    &[href$=".doc"],
    &[href$=".docx"] {
      &:after {
        background:
          url(../images/common/icon-download.svg),
          url(../images/common/icon-download-hover.svg) no-repeat 50%;
      }
      &:hover:after {
        background-image: url(../images/common/icon-download-hover.svg);
      }
    }
    &[href$=".xls"],
    &[href$=".xlsm"],
    &[href$=".xlsx"] {
      &:after {
        background:
          url(../images/common/icon-xls.svg),
          url(../images/common/icon-xls-hover.svg) no-repeat 50%;
      }
      &:hover:after {
        background-image: url(../images/common/icon-xls-hover.svg);
      }
    }
  }
  .c-text:has(.c-text__mb-small) {
    margin-block-end: 0;
  }
  .c-text__mb-small {
    margin-block-end: var(--spacing-xs);
  }
  .c-box {
    color: var(--base-font-color);
  }
}
@layer component {
  .c-box__bg-gray,
  .c-box__bg-quote,
  .c-box__bg-red,
  .c-box__bg-yellow,
  .c-box__border-bold,
  .c-box__border-dot,
  .c-box__border-thin {
    padding: var(--spacing-xl);
    margin-block-end: var(--spacing-2xl);
    font-size: var(--font-size-small);
    @media (width < 768px) {
      padding: var(--spacing-md);
      font-size: var(--font-size-base);
    }
    &:has(.c-box__link) {
      padding: 0;
    }
  }
  .c-box__link {
    display: block;
    padding: var(--spacing-sm);
    transition: background-color 0.2s;
    > * {
      transition: color 0.2s;
      &:last-child {
        margin-block-end: 0;
      }
      &:first-child {
        margin-block-start: 0;
      }
    }
  }
  @media (any-hover: hover) {
    .c-box__link:hover {
      background-color: var(--color-bg-secondary);
      [class="c-heading-06"] {
        color: var(--color-text-link-hover);
      }
      [class="c-text"] {
        color: var(--color-text-gray);
      }
    }
  }
  .c-box__bg-quote {
    position: relative;
    background-color: var(--color-bg-secondary);
    &:after,
    &:before {
      position: absolute;
      block-size: auto;
      font-size: 2.5rem;
      line-height: 1;
      color: var(--color-text-placeholder);
      @media (width < 768px) {
        font-size: 2rem;
      }
    }
    &:before {
      inset-block-start: 8px;
      inset-inline-start: 12px;
      content: "“";
    }
    &:after {
      inset-block-end: -8px;
      inset-inline-end: 12px;
      content: "”";
      @media (width < 768px) {
        inset-block-end: -6px;
      }
    }
  }
  .c-box__bg-gray {
    background-color: var(--color-bg-secondary);
  }
  .c-box__bg-yellow {
    background-color: var(--color-bg-bgb-yellow);
  }
  .c-box__bg-red {
    background-color: var(--color-bg-bgb-pink);
  }
  .c-box__border-thin {
    border: 1px solid var(--color-border-default);
  }
  .c-box__border-bold {
    padding: var(--spacing-xl);
    margin-block-end: var(--spacing-2xl);
    border: 4px solid var(--color-border-default);
    @media (width < 768px) {
      padding: var(--spacing-md);
    }
  }
  .c-box__border-dot {
    border: 2px dashed var(--color-border-default);
  }
  .c-box__map,
  .c-box__movie {
    position: relative;
    min-block-size: 180px;
    aspect-ratio: 2/1;
    margin-block-end: var(--spacing-2xl);
    @media (width < 768px) {
      aspect-ratio: 2/1.2;
    }
  }
  .c-box__map iframe,
  .c-box__movie iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: auto;
    border: 0;
  }
}
@layer component {
  .c-link__list {
    display: grid;
    grid-template-columns: repeat(var(--col-pc), 1fr);
    gap: 1px;
    padding: 1px;
    padding-block-end: var(--pbe-pc, var(--spacing-no));
    margin-block-end: var(--mbe-pc, var(--spacing-5xl));
    @media (width < 768px) {
      grid-template-columns: repeat(var(--col-sp), 1fr);
      padding-block: 0 var(--pbe-sp, var(--pbe-pc, var(--spacing-no)));
      padding-inline-start: 0;
      margin-block-end: var(--mbe-sp, var(--mbe-pc, var(--spacing-xl)));
      border-block-start: 1px solid var(--color-border-light);
      border-inline-start: 1px solid var(--color-border-light);
    }
  }
  .c-link__list-item {
    position: relative;
    line-height: var(--line-height-button);
    border-collapse: collapse;
    box-shadow: 0 0 0 1px var(--color-border-light);
  }
  .c-link__list-item a {
    display: flex;
    align-items: center;
    inline-size: 100%;
    block-size: 100%;
    padding: var(--spacing-sm);
    padding-inline-end: var(--spacing-lg);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-jp-medium);
    color: var(--color-primary);
    background-color: var(--color-lightest);
    transition: background-color 0.2s ease;
    @media (width < 768px) {
      padding: var(--spacing-s);
      padding-inline-end: 28px;
    }
  }
  @media (any-hover: hover) {
    .c-link__list-item a:hover {
      color: var(--color-text-link-hover);
      background-color: var(--color-bg-secondary);
      &:after {
        inset-inline-end: 8px;
      }
    }
  }
  .c-link__list a:after {
    position: absolute;
    inset-inline-end: var(--spacing-s);
    display: inline-block;
    inline-size: 16px;
    block-size: 16px;
    content: "";
    background-image: url(../images/common/icon-arrow-primary-right-lg.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    transition: all 0.2s ease;
    @media (width < 768px) {
      inset-inline-end: var(--spacing-xs);
    }
  }
  .c-link__anchor {
    display: grid;
    grid-template-columns: repeat(var(--col-pc), 1fr);
    gap: 8px;
    padding: var(--spacing-sm);
    margin-block-end: var(--mbe-pc, var(--spacing-2xl));
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      grid-template-columns: repeat(var(--col-sp), 1fr);
      gap: 4px;
      padding: var(--spacing-s);
      margin-block-end: var(--mbe-sp, var(--mbe-pc, var(--spacing-md)));
    }
  }
  .c-link__anchor-item {
    line-height: var(--line-height-button);
    text-align: center;
  }
  .c-link__anchor-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    padding-block: 8px;
    padding-inline: 12px;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-jp-medium);
    color: var(--color-secondary);
    background-color: var(--color-lightest);
    border-radius: var(--radius-small);
    transition: all 0.2s ease;
  }
  @media (any-hover: hover) {
    .c-link__anchor-item a:hover {
      padding-block-end: 4px;
      color: var(--color-text-link-hover);
      background-color: var(--color-bg-gray);
      &:after {
        margin-block-start: 4px;
      }
    }
  }
  .c-link__anchor-item a:after {
    display: inline-block;
    inline-size: 12px;
    block-size: 12px;
    content: "";
    background-image: url(../images/common/icon-arrow-primary-down-sm.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    transition: all 0.2s ease;
  }
  .c-link__box {
    padding-block-end: var(--pbe-pc, var(--spacing-no));
    margin-block-end: var(--mbe-pc, var(--spacing-2xl));
    @media (width < 768px) {
      padding-block-end: var(--pbe-sp, var(--pbe-pc, var(--spacing-no)));
      margin-block-end: var(--mbe-sp, var(--mbe-pc, var(--spacing-2xl)));
    }
  }
  .c-link__box-item {
    border: 1px solid var(--color-border-light);
  }
  .c-link__box-item:not(:last-child) {
    margin-block-end: var(--spacing-xs);
  }
  .c-link__box-item a {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    transition: background-color 0.2s ease;
    @media (width < 768px) {
      gap: var(--spacing-xs);
    }
  }
  @media (any-hover: hover) {
    .c-link__box-item a:hover {
      background-color: var(--color-bg-gray);
      & > .c-link__box-textarea p {
        color: var(--color-text-link-hover);
      }
    }
  }
  .c-link__box-image {
    inline-size: 160px;
    @media (width < 768px) {
      inline-size: 90px;
    }
  }
  .c-link__box-image img {
    inline-size: 100%;
    block-size: auto;
  }
  .c-link__box-textarea p {
    margin-block-end: var(--spacing-xs);
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-primary);
    transition: color 0.2s ease;
    @media (width < 768px) {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
  .c-link__box-text-label {
    display: inline-block;
    padding-block: var(--spacing-min);
    padding-inline: var(--spacing-s);
    margin-block-end: var(--spacing-xs);
    font-size: var(--spacing-s);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-secondary);
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      padding-inline: var(--spacing-xs);
      margin-block-end: 0;
    }
  }
  .c-link__box-text-desc {
    font-size: var(--font-size-small);
    font-weight: 400;
    line-height: 1.8;
    @media (width < 768px) {
      display: none;
    }
  }
}
@layer component {
  .c-list {
    color: var(--base-font-color);
  }
  .c-list__ol,
  .c-list__ol-note,
  .c-list__ul {
    margin-block-end: var(--spacing-2xl);
    font-size: var(--font-size-small);
    @media (width < 768px) {
      font-size: var(--font-size-base);
    }
  }
  .c-list__index-dot li:not(:last-of-type),
  .c-list__ol li:not(:last-of-type),
  .c-list__ul li:not(:last-of-type) {
    padding-block-end: var(--spacing-min);
  }
  .c-list__index-dot > li,
  .c-list__ul > li,
  :where(.c-list__ul, .c-list__ol, .c-list__index-dot) li > ul > li {
    position: relative;
    padding-inline-start: 20px;
  }
  .c-list__index-dot > li,
  .c-list__ul > li {
    padding-inline-start: 24px;
  }
  .c-list__ol > li,
  :where(.c-list__ul, .c-list__ol) li > ol > li {
    position: relative;
    padding-inline-start: 24px;
  }
  .c-list__ol,
  :where(.c-list__ul, .c-list__ol) li > ol {
    counter-reset: list;
  }
  .c-list__index-dot > li:before,
  .c-list__ul > li:before,
  :where(.c-list__ul, .c-list__ol, .c-list__index-dot) li > ul > li:before {
    position: absolute;
    inset: 0.65em auto auto 5px;
    display: block;
    inline-size: 6px;
    block-size: 6px;
    content: "";
    background-color: var(--color-secondary);
    border-radius: 3px;
  }
  .c-list__index-dot > li:before,
  .c-list__ul > li:before {
    inset-inline-start: 9px;
  }
  .c-list__index-dot li > ul > li:before,
  .c-list__ol li > ul > li:before,
  .c-list__ul li > ul > li:before {
    background-color: var(--color-text-placeholder);
  }
  .c-list__ol > li:before,
  :where(.c-list__ul, .c-list__ol, .c-list__index-dot) li > ol > li:before {
    position: absolute;
    inset: auto auto auto 0;
    inline-size: var(--spacing-md);
    font-family: var(--font-family-en);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-en-bold);
    color: var(--color-secondary);
    text-align: center;
    content: counter(list, decimal-leading-zero);
    counter-increment: list;
  }
  .c-list__index-dot li > ol > li:before,
  .c-list__ol li > ol > li:before,
  .c-list__ul li > ol > li:before {
    color: var(--color-text-placeholder);
  }
  .c-list__ol-note {
    counter-reset: list;
  }
  .c-list__ol-note li {
    position: relative;
    padding-inline-start: calc(2.5em + 4px);
    font-size: var(--font-size-small-1);
  }
  .c-list__ol-note li:before {
    position: absolute;
    inset: 0 auto auto 0;
    content: "※" counter(list, decimal-leading-zero);
    counter-increment: list;
  }
  .c-list:has(.c-list__link-arrow) {
    display: grid;
    grid-template-columns: repeat(var(--col-pc), 1fr);
    column-gap: var(--spacing-sm);
    margin-block-end: var(--spacing-2xl);
    @media (width < 768px) {
      grid-template-columns: repeat(var(--col-sp), 1fr);
    }
    &:last-child {
      @media (width < 768px) {
        margin-block-end: 0;
      }
    }
  }
  .c-list__link-arrow {
    line-height: var(--line-height-button);
  }
  .c-list__link-arrow a {
    position: relative;
    display: inline-flex;
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-sm) var(--spacing-min);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-jp-medium);
    font-feature-settings: "palt";
    color: var(--color-secondary);
    text-decoration: underline;
    text-decoration-color: #0000;
    text-underline-offset: 2px;
    transition: all 0.2s ease;
  }
  @media (any-hover: hover) {
    .c-list__link-arrow a:hover {
      color: var(--color-text-link-hover);
      text-decoration-color: var(--color-text-link-hover);
      &:before {
        inset-inline-start: 4px;
      }
    }
  }
  .c-list__link-arrow a:before {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 0;
    display: inline-block;
    inline-size: var(--spacing-s);
    block-size: var(--spacing-s);
    content: "";
    background-image: url(../images/common/icon-arrow-primary-right-sm.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    transition: all 0.2s ease;
    @media (width < 768px) {
      inset-block-start: 10px;
    }
  }
  .c-list__index {
    max-inline-size: 700px;
    padding-block: var(--spacing-md);
    padding-inline: var(--spacing-xl);
    margin-inline: auto;
    border: 2px solid var(--color-border-gray-02);
    @media (width < 768px) {
      padding: var(--spacing-sm);
    }
  }
  .c-list__index-heading {
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-large);
    line-height: var(--line-height-title);
    text-align: center;
    @media (width < 768px) {
      margin-block-end: var(--spacing-xs);
    }
  }
  .c-list__index-dot {
    font-size: var(--font-size-small);
    @media (width < 768px) {
      font-size: var(--font-size-base);
    }
    a {
      text-decoration: none;
      transition: all 0.2s ease;
    }
  }
  @media (any-hover: hover) {
    .c-list__index-dot a:hover {
      color: var(--color-text-link-hover);
      text-decoration: underline;
    }
  }
}
@layer component {
  .c-table {
    color: var(--base-font-color);
    &:not(:last-child) {
      margin-block-end: var(--spacing-2xl);
    }
  }
  .c-table table {
    inline-size: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    :where(a) {
      color: var(--color-secondary);
      border-block-end: 1px solid #0000;
      transition: border-color 0.2s ease-in-out;
      @media (any-hover: hover) {
        &:hover {
          border-color: var(--color-secondary);
        }
      }
    }
  }
  .c-table caption {
    margin-block: var(--spacing-x-min) var(--spacing-xs);
    font-size: var(--font-size-small-1);
    font-weight: 700;
    line-height: 1.5;
  }
  .c-table tbody th,
  .c-table td {
    padding: 1rem;
    border: 1px solid var(--color-border-light);
    @media (width < 768px) {
      padding-left: 12px;
      padding-bottom: 12px;
      padding-right: 12px;
      padding-top: 12px;
    }
  }
  .c-table thead th {
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-sm);
    font-weight: 500;
    line-height: var(--line-height-title);
    color: var(--color-lightest);
    background-color: var(--color-darkest);
    border: 1px solid var(--color-darkest);
    border-block-end-color: var(--color-border-light);
    border-inline-end-color: var(--color-border-light);
  }
  .c-table th {
    font-size: var(--font-size-small);
    font-weight: 500;
    line-height: var(--line-height-title);
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      font-size: var(--font-size-base);
    }
  }
  .c-table td {
    font-size: var(--font-size-small);
    line-height: var(--line-height-text);
    background-color: var(--color-lightest);
  }
  .c-table__sm-block th,
  .c-table__sm-block-02 th {
    inline-size: 31.25%;
  }
  .c-table__sm-block-02 tbody th {
    font-weight: 700;
    background-color: var(--color-bg-tertiary);
  }
  .c-table__sm-block-02 tbody th,
  .c-table__sm-block-02 td {
    border: 1px solid var(--color-border-default);
  }
  @media (width < 768px) {
    .c-table__sm-block table,
    .c-table__sm-block tbody,
    .c-table__sm-block td,
    .c-table__sm-block th,
    .c-table__sm-block tr,
    .c-table__sm-block-02 table,
    .c-table__sm-block-02 tbody,
    .c-table__sm-block-02 td,
    .c-table__sm-block-02 th,
    .c-table__sm-block-02 tr {
      display: block;
      inline-size: 100%;
      margin-block-start: -1px;
    }
  }
  .c-table__sm-scroll-note {
    display: none;
  }
  .c-table__sm-scroll table {
    @media (width < 768px) {
      min-inline-size: 740px;
    }
  }
  .c-table__sort {
    display: inline;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: inherit;
    color: inherit;
    text-align: inherit;
    letter-spacing: inherit;
    appearance: none;
    background: #0000;
    border: 0;
  }
  .c-table__list-nested {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-min);
    @media (width < 768px) {
      display: inline;
    }
    :where(li) {
      position: relative;
      display: inline;
      :where(a) {
        display: inline;
      }
      &:has(+ li) {
        &:after {
          inset-inline-end: 0;
          display: inline-block;
          inline-size: 12px;
          block-size: 12px;
          margin-inline: var(--spacing-min) auto;
          content: "";
          background: url(../images/common/icon-arrow-gray-right-sm.svg) no-repeat 50% / contain;
        }
      }
    }
  }
  @media (width < 768px) {
    .c-table__sm-scroll {
      overflow-x: auto;
    }
    .c-table__sm-scroll-note {
      position: sticky;
      inset-inline-start: 0;
      display: block;
      margin-block-end: var(--spacing-min);
    }
    .c-table__sm-scroll-note:before {
      display: inline-block;
      inline-size: 23px;
      block-size: 1.3em;
      margin-inline-end: 8px;
      vertical-align: text-bottom;
      content: "";
      background-image: url(../images/common/icon-arrow-primary-table.svg);
      background-repeat: no-repeat;
    }
    .c-table__sm-scroll table {
      inline-size: 100%;
    }
  }
  .c-table__style-02,
  .c-table__style-04 {
    table {
      thead {
        th {
          padding-block: var(--spacing-sm);
          padding-inline: var(--spacing-s);
          color: var(--color-primary);
          background: none;
          border-block-start: none;
          border-block-end: 1px solid var(--color-border-light);
          border-inline: none;
        }
      }
      tbody {
        td,
        th {
          padding-block: var(--spacing-s);
          padding-inline: var(--spacing-s);
          border-inline: none;
          a {
            transition: color 0.2s ease-in-out;
            &:hover {
              color: var(--color-text-link-hover);
              border-color: var(--color-text-link-hover);
            }
          }
        }
        th {
          background: none;
        }
        tr:first-child {
          td,
          th {
            border-block-start: none;
          }
        }
      }
    }
  }
  .c-table__style-04 {
    tbody {
      th {
        color: var(--color-primary);
      }
    }
  }
  .c-table__style-03 {
    table {
      thead th {
        padding-block: var(--spacing-sm);
        padding-inline: var(--spacing-s);
        font-weight: var(--font-weight-jp-bold);
        color: var(--color-primary);
        background-color: var(--color-lightest);
        border: 1px solid var(--color-secondary);
        border-inline: none;
        @media (width < 768px) {
          padding: var(--spacing-xs);
        }
        &:nth-child(odd) {
          @media (width < 768px) {
            background-color: var(--color-bg-secondary);
          }
        }
      }
      tbody td,
      tbody th {
        padding-block: var(--spacing-s) var(--spacing-sm);
        padding-inline: var(--spacing-s);
        background-color: var(--color-lightest);
        border-block-start: none;
        border-block-end: 1px solid var(--color-border-light);
        border-inline: none;
        @media (width < 768px) {
          padding: var(--spacing-xs);
        }
      }
      tbody th {
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-jp-regular);
        @media (width < 768px) {
          background-color: var(--color-bg-secondary);
        }
      }
      tbody td {
        &:nth-child(odd) {
          @media (width < 768px) {
            background-color: var(--color-bg-secondary);
          }
        }
      }
    }
  }
  .c-table__style-05 {
    thead {
      th {
        color: var(--color-primary);
        background-color: var(--color-lightest);
        border-block-start: 1px solid var(--color-primary);
        border-block-end-color: var(--color-primary);
        border-inline: #0000;
      }
    }
    tbody {
      th {
        color: var(--color-primary);
        background-color: var(--color-lightest);
      }
      td,
      th {
        border-inline: #0000;
      }
    }
  }
  .c-table__period {
    > :where(span) {
      display: block;
      inline-size: max-content;
      &:last-child {
        @media (768px <=width) {
          margin-inline-start: 3rem;
        }
      }
    }
  }
  .c-table__text-bold {
    font-weight: var(--font-weight-jp-bold);
  }
  .c-slide {
    position: relative;
    margin-block-end: var(--spacing-2xl);
    color: var(--base-font-color);
  }
}
@layer component {
  .c-slide-bottom-arrows__arrow-prev,
  .c-slide__button-arrow-prev {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 16px;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    margin-block: auto;
    background-color: var(--color-secondary);
    background-image: url(../images/common/icon-arrow-white-left-lg.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto;
    border: 1px solid var(--color-lightest);
    @media (width < 768px) {
      inset-inline-start: -11px;
      inline-size: 32px;
      block-size: 32px;
    }
    &:hover {
      background-color: var(--color-text-link-hover);
      transition: all 0.2s ease;
    }
  }
  .c-slide-bottom-arrows__arrow-next,
  .c-slide__button-arrow-next {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 16px;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    margin-block: auto;
    background-color: var(--color-secondary);
    background-image: url(../images/common/icon-arrow-white-right-lg.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto;
    border: 1px solid var(--color-lightest);
    @media (width < 768px) {
      inset-inline-end: -11px;
      inline-size: 32px;
      block-size: 32px;
    }
    &:hover {
      background-color: var(--color-text-link-hover);
      transition: all 0.2s ease;
    }
  }
  .c-slide__button-arrow-next svg,
  .c-slide__button-arrow-prev svg {
    display: none;
  }
  .c-slide figcaption {
    font-size: var(--font-size-small-1);
  }
  .c-slide__thumb-item {
    padding-block-start: var(--spacing-md);
    @media (width < 768px) {
      padding-block-start: var(--spacing-sm);
    }
  }
  .c-slide__thumb-item .c-slide__list {
    justify-content: center;
  }
  .c-slide__thumb-item .c-slide__item {
    border-radius: 2px;
    &:hover {
      opacity: 0.5;
      transition: all 0.2s ease;
    }
  }
  .c-slide__thumb-item .c-slide__button {
    display: none;
  }
  .c-slide__thumb-item .c-slide__item.is-active {
    position: relative;
    &:after {
      position: absolute;
      inset: 0;
      inline-size: 56px;
      block-size: 56px;
      content: "";
      border: 2px solid var(--color-secondary);
      border-radius: 2px;
      @media (width < 768px) {
        inline-size: 40px;
        block-size: 40px;
      }
    }
  }
  .c-slide img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    transition: opacity 0.2s ease;
  }
  .c-slide-multi {
    @media (width < 768px) {
      margin-inline: calc(var(--spacing-sm) * -1);
    }
  }
  @media (any-hover: hover) {
    .c-slide.c-slide-bottom-arrows .splide a:hover img {
      opacity: 0.6;
    }
  }
  .c-slide-bottom-arrows .c-slide-bottom-arrows__button {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 0;
    place-items: center center;
    inline-size: fit-content;
    margin-block-start: var(--spacing-md);
    margin-inline: auto;
  }
  @media (max-width: 767px) {
    .c-slide-bottom-arrows .c-slide-bottom-arrows__button {
      margin-block-start: var(--spacing-sm);
    }
  }
  .c-slide-bottom-arrows .splide__arrows {
    display: contents;
  }
  .c-slide-bottom-arrows .c-slide-bottom-arrows__arrow-next,
  .c-slide-bottom-arrows .c-slide-bottom-arrows__arrow-prev {
    position: static;
    inset: auto;
    display: inline-block;
    margin: 0;
    background-color: initial;
    border: none;
    transition: translate 0.2s ease;
  }
  .c-slide-bottom-arrows .c-slide-bottom-arrows__arrow-prev {
    background-image: url(../images/common/icon-arrow-primary-left-lg.svg);
    background-repeat: no-repeat;
    background-position: 50%;
  }
  .c-slide-bottom-arrows .c-slide-bottom-arrows__pagination {
    display: inline-flex;
    gap: var(--spacing-s);
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    margin-inline: 16px;
    list-style: none;
  }
  .c-slide-bottom-arrows .splide__pagination__page {
    box-sizing: border-box;
    display: block;
    inline-size: 7px;
    block-size: 7px;
    padding: 0;
    background-color: initial;
    border: 1px solid var(--color-secondary);
    border-radius: 9999px;
  }
  .c-slide-bottom-arrows .splide__pagination__page.is-active,
  .c-slide-bottom-arrows .splide__pagination__page:hover,
  .c-slide-bottom-arrows .splide__pagination__page[aria-current="true"] {
    background-color: var(--color-secondary);
  }
  .c-slide-bottom-arrows .c-slide-bottom-arrows__arrow-next {
    background-image: url(../images/common/icon-arrow-primary-right-lg.svg);
    background-repeat: no-repeat;
    background-position: 50%;
  }
  @media (any-hover: hover) {
    .c-slide-bottom-arrows .c-slide-bottom-arrows__arrow-prev:hover {
      background-image: url(../images/common/icon-arrow-blue-left-lg.svg);
      translate: -4px 0;
    }
    .c-slide-bottom-arrows .c-slide-bottom-arrows__arrow-next:hover {
      background-image: url(../images/common/icon-arrow-blue-right-lg.svg);
      translate: 4px 0;
    }
  }
  .c-slide-bottom-arrows .c-slide-bottom-arrows__toggle {
    inline-size: 16px;
    block-size: 16px;
    padding: 0;
    margin: 0;
    margin-inline-start: var(--spacing-md);
    cursor: pointer;
    background-color: initial;
    background-image: none;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    border: none;
  }
  .c-slide-bottom-arrows .c-slide-bottom-arrows__toggle.is-active,
  .c-slide-bottom-arrows .c-slide-bottom-arrows__toggle:not(.is-active) {
    background-image: none;
  }
  .c-slide-bottom-arrows .c-slide-bottom-arrows__toggle > .c-slide-bottom-arrows__icon {
    display: none;
    inline-size: 16px;
    block-size: 16px;
  }
  .c-slide-bottom-arrows .c-slide-bottom-arrows__toggle.is-active > .c-slide-bottom-arrows__icon:last-of-type,
  .c-slide-bottom-arrows .c-slide-bottom-arrows__toggle:not(.is-active) > .c-slide-bottom-arrows__icon:first-of-type {
    display: block;
  }
  @media (any-hover: hover) {
    .c-slide-bottom-arrows .c-slide-bottom-arrows__toggle:hover:not(.is-active) > .c-slide-bottom-arrows__icon {
      display: none;
    }
    .c-slide-bottom-arrows .c-slide-bottom-arrows__toggle:hover:not(.is-active) > .c-slide-bottom-arrows__icon-hover-pause {
      display: block;
    }
    .c-slide-bottom-arrows .c-slide-bottom-arrows__toggle:hover.is-active > .c-slide-bottom-arrows__icon {
      display: none;
    }
    .c-slide-bottom-arrows .c-slide-bottom-arrows__toggle:hover.is-active > .c-slide-bottom-arrows__icon-hover-play {
      display: block;
    }
  }
}
@layer component {
  .c-button {
    block-size: 100%;
    padding-block-end: var(--pbe-pc, var(--spacing-no));
    margin-block-end: var(--mbe-pc, var(--content-padding));
    margin-inline: auto;
    color: var(--color-secondary);
    text-align: center;
    @media (width < 768px) {
      padding-block-end: var(--pbe-sp, var(--pbe-pc, var(--spacing-no)));
      margin-block-end: var(--mbe-sp, var(--mbe-pc, var(--content-padding)));
    }
    &:last-child {
      margin-block-end: 0;
    }
  }
  .c-button__link,
  .c-button__link-apply,
  .c-button__link-back,
  .c-button__link-em,
  .c-button__link-em-gradation,
  .c-button__link-register,
  .c-button__link-request,
  .c-button__link-save {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 280px;
    max-inline-size: 400px;
    block-size: 100%;
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-lg);
    font-weight: 700;
    line-height: var(--line-height-button);
    background-color: var(--color-lightest);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-normal);
    transition: all 0.2s ease;
    @media (width < 768px) {
      padding-inline: var(--spacing-md) calc(var(--spacing-md) + 6px);
    }
  }
  .c-button__link-apply:after,
  .c-button__link-back:before,
  .c-button__link-em-gradation:after,
  .c-button__link-em:after,
  .c-button__link-register:after,
  .c-button__link-request:after,
  .c-button__link-save:before,
  .c-button__link:after {
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--spacing-sm);
    inline-size: 16px;
    block-size: 16px;
    margin-block: auto;
    content: "";
    background-image: url(../images/common/icon-arrow-primary-right-lg.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 16px 16px;
    transition: all 0.2s ease;
    @media (width < 768px) {
      inset-inline-end: var(--spacing-s);
    }
  }
  .c-button__link-save:hover,
  .c-button__link:hover {
    color: var(--color-text-link-hover);
    border-color: var(--color-text-link-hover);
  }
  .c-button__link:not(.c-button__link[target="_blank"], .c-button__link[href$=".pdf"], .c-button__link[href$=".zip"], .c-button__link[href$=".xls"]):hover:after {
    inset-inline-end: var(--spacing-s);
    @media (width < 768px) {
      inset-inline-end: var(--spacing-xs);
    }
  }
  .c-button__link[target="_blank"] {
    &:after {
      background-image: url(../images/common/icon-blank.svg), url(../images/common/icon-blank-lighter.svg);
      background-size: contain, 0;
    }
    &:hover:after {
      background-image: url(../images/common/icon-blank-lighter.svg);
    }
  }
  .c-button__link[href$=".pdf"] {
    &:after {
      background-image: url(../images/common/icon-pdf.svg), url(../images/common/icon-pdf-hover.svg);
      background-size: contain, 0;
    }
    &:hover:after {
      background-image: url(../images/common/icon-pdf-hover.svg);
    }
  }
  .c-button__link[href$=".zip"] {
    &:after {
      background-image: url(../images/common/icon-zip.svg), url(../images/common/icon-zip-hover.svg);
      background-size: contain, 0;
    }
    &:hover:after {
      background-image: url(../images/common/icon-zip-hover.svg);
    }
  }
  .c-button__link[href$=".xls"] {
    &:after {
      background-image: url(../images/common/icon-xls.svg), url(../images/common/icon-xls-hover.svg);
      background-size: contain, 0;
    }
    &:hover:after {
      background-image: url(../images/common/icon-xls-hover.svg);
    }
  }
  .c-button__link[download] {
    &:after {
      background-image: url(../images/common/icon-download.svg), url(../images/common/icon-download-hover.svg);
      background-size: contain, 0;
    }
    &:hover:after {
      background-image: url(../images/common/icon-download-hover.svg);
    }
  }
  .c-button__link-back {
    font-weight: var(--font-weight-jp-medium);
    color: var(--color-text-gray);
    border-color: var(--color-text-gray);
  }
  .c-button__link-back:hover {
    background-color: var(--color-bg-link-back-hover);
    border-color: var(--color-text-gray);
    &:before {
      inset-inline-start: var(--spacing-s);
      @media (width < 768px) {
        inset-inline-start: var(--spacing-xs);
      }
    }
  }
  .c-button__link-back:before {
    inset-inline-start: var(--spacing-sm);
    background-image: url(../images/common/icon-arrow-gray-left.svg);
    @media (width < 768px) {
      inset-inline-start: var(--spacing-s);
    }
  }
  .c-button__link-em-gradation:hover,
  .c-button__link-em:hover {
    background-color: var(--color-text-link-hover);
    border-color: var(--color-text-link-hover);
    &:after {
      inset-inline-end: var(--spacing-s);
      @media (width < 768px) {
        inset-inline-end: var(--spacing-xs);
      }
    }
  }
  .c-button__link-em {
    color: var(--color-lightest);
    background-color: var(--color-secondary);
  }
  .c-button__link-em-gradation {
    color: var(--color-lightest);
    background: var(--gradient-blue-02);
    border: none;
    @media (width < 768px) {
      padding-block: var(--spacing-sm);
      font-size: var(--font-size-large);
    }
  }
  .c-button__link-apply:after,
  .c-button__link-em-gradation:after,
  .c-button__link-em:after,
  .c-button__link-register:after,
  .c-button__link-request:after {
    background-image: url(../images/common/icon-arrow-white-right.svg);
  }
  .c-button__link-size {
    padding-inline-start: var(--spacing-xs);
    font-size: var(--font-size-small-1);
    font-weight: var(--font-weight-jp-medium);
    color: var(--color-text-gray);
  }
  .c-button__link-apply,
  .c-button__link-register,
  .c-button__link-request {
    position: relative;
    z-index: 1;
    max-inline-size: none;
    padding-inline: var(--spacing-lg);
    font-size: var(--font-size-large);
    color: var(--color-lightest);
    border: 1px solid #0000;
    @media (width < 768px) {
      inline-size: 100%;
      max-inline-size: 400px;
      padding-inline: var(--spacing-sm);
    }
  }
  .c-button__link-apply:before,
  .c-button__link-register:before,
  .c-button__link-request:before {
    position: absolute;
    inset: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
    content: "";
    background: var(--gradient-gold-02);
    border-radius: var(--radius-normal);
    transition: opacity 0.2s ease-in;
  }
  .c-button__link-register:after,
  .c-button__link-request:after {
    @media (width < 768px) {
      inset-inline-end: var(--spacing-xs);
    }
  }
  .c-button__link-register,
  .c-button__link-request {
    padding-block: var(--spacing-sm);
    background-color: initial;
    border: none;
    @media (width < 768px) {
      padding-block: var(--spacing-s);
    }
  }
  .c-button:has(> a.c-button__link-register),
  .c-button:has(> a.c-button__link-request) {
    position: relative;
    inline-size: max-content;
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--radius-normal);
  }
  @media (width < 768px) {
    .c-button:has(> a.c-button__link-register),
    .c-button:has(> a.c-button__link-request) {
      inline-size: 100%;
      max-inline-size: 400px;
    }
  }
  .c-button:has(> a.c-button__link-register):before,
  .c-button:has(> a.c-button__link-request):before {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
    content: "";
    background: var(--gradient-button-bg-gold);
    border-radius: inherit;
  }
  .c-button__link-register:before,
  .c-button__link-request:before {
    z-index: -1;
    padding: 1px;
    background: var(--gradient-border-gold);
    border-radius: inherit;
    mask:
      linear-gradient(var(--color-lightest) 0 0) content-box,
      linear-gradient(var(--color-lightest) 0 0);
    mask-composite: exclude;
  }
  .c-button__link-apply:hover,
  .c-button__link-register:hover,
  .c-button__link-request:hover {
    position: relative;
    color: var(--color-cta);
    background: var(--color-lightest);
    border-color: var(--color-cta);
    &:after {
      inset-inline-end: var(--spacing-s);
      background-image: url(../images/common/icon-arrow-gold-right.svg);
      @media (width < 768px) {
        inset-inline-end: var(--spacing-min);
      }
    }
  }
  .c-button__link-apply:hover:before {
    opacity: 0;
  }
  .c-button__link-apply:hover {
    &:after {
      @media (width < 768px) {
        inset-inline-end: var(--spacing-xs);
      }
    }
  }
  .c-button__link-register-tag,
  .c-button__link-request-tag {
    display: inline-block;
    padding-block: var(--spacing-x-min);
    padding-inline: var(--spacing-min);
    margin-inline-end: var(--spacing-xs);
    font-size: var(--font-size-small);
    font-weight: 500;
    color: var(--color-cta);
    background-color: var(--color-lightest);
    border-radius: var(--radius-small);
    transition: all 0.2s ease;
    @media (width < 768px) {
      margin-inline-end: 0;
    }
  }
  .c-button__link-register:hover .c-button__link-register-tag,
  .c-button__link-request:hover .c-button__link-request-tag {
    color: var(--color-lightest);
    background-color: var(--color-cta);
  }
  .c-button__link-request {
    @media (width < 768px) {
      flex-direction: column;
    }
  }
  .c-button__link-request-tag {
    @media (width < 768px) {
      font-size: var(--font-size-small-2);
    }
  }
  .c-button__link-request-text {
    display: inline-flex;
    align-items: center;
    @media (width < 768px) {
      display: flex;
      justify-content: center;
      margin-block-start: 4px;
    }
  }
  .c-button__link-request-note {
    margin-inline: 0.3em var(--spacing-xs);
    font-size: var(--font-size-small-1);
    line-height: 1;
    vertical-align: text-bottom;
  }
  .c-button__link-register-item {
    display: flex;
    align-items: center;
    @media (width < 768px) {
      display: block;
    }
  }
  .c-button__link-register-tag {
    padding-block: 1px;
    margin-inline-end: var(--spacing-min);
    font-size: var(--font-size-small-2);
    font-weight: 700;
  }
  .c-button__link-register-note {
    font-size: var(--font-size-small);
    line-height: 1;
  }
  .c-button__link-register-text {
    margin-inline: var(--spacing-s) var(--spacing-sm);
    @media (width < 768px) {
      display: block;
      margin-block-start: 2px;
    }
  }
  .c-button__link-apply,
  .c-button__link-save {
    padding-inline: var(--spacing-xl);
    border-radius: var(--radius-max);
  }
  .c-button__link-save {
    font-size: var(--font-size-large);
    &:before {
      inline-size: 24px;
      block-size: 24px;
      background-image: url(../images/common/icon-favorite.svg), url(../images/common/icon-favorite-hover.svg);
      background-size: contain, 0;
    }
    &:hover:before {
      background-image: url(../images/common/icon-favorite-hover.svg);
    }
    &[data-saved="true"] {
      &:before,
      &:hover:before {
        background-image: url(../images/common/icon-favorite-saved.svg);
      }
    }
  }
  .c-button__link-apply {
    @media (width < 768px) {
      inline-size: auto;
    }
    &:before {
      border-radius: var(--radius-max);
    }
  }
}
@layer component {
  .c-button-dialog {
    display: flex;
    gap: var(--spacing-x-min);
    align-items: center;
    justify-content: center;
    padding-block: var(--spacing-min);
    padding-inline: var(--spacing-md);
    font-weight: var(--font-weight-jp-regular);
    background: var(--color-lightest);
    border: 1px solid var(--color-text-gray);
    border-radius: var(--radius-normal);
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
    transition-property: color, border-color;
    @media (width < 768px) {
      padding-block: var(--spacing-xs);
      padding-inline: var(--spacing-md);
    }
  }
  @media (any-hover: hover) {
    .c-button-dialog:hover {
      color: var(--color-text-link-hover);
      border-color: var(--color-text-link-hover);
    }
  }
  .c-button-dialog:focus-visible {
    color: var(--color-text-link-hover);
    border-color: var(--color-text-link-hover);
  }
  .c-image {
    margin-block-end: var(--spacing-lg);
    color: var(--base-font-color);
  }
  .c-image img {
    inline-size: 100%;
  }
  .c-image figcaption {
    margin-block-start: 4px;
    font-size: var(--font-size-small-1);
    line-height: 1.5;
  }
}
@layer component {
}
@layer component {
  .c-column {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--column-gap-2col);
    margin-block-end: var(--spacing-2xl);
    font-size: var(--font-size-small);
    @media (width < 768px) {
      grid-template-columns: 1fr;
      font-size: var(--font-size-base);
    }
  }
  .c-column:has(> .c-column__item:nth-child(4)) {
    gap: var(--column-gap-4col);
  }
  .c-column:has(> .c-column__item:nth-child(5)) {
    gap: var(--column-gap-5col);
    @media (width < 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }
  .c-column:has(.c-button) {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    place-items: end center;
    margin-block-end: 0;
    @media (width < 768px) {
      grid-template-columns: 1fr;
      gap: 0;
    }
  }
  .c-column:has(.c-column__item-btn) {
    margin-block-end: var(--spacing-sm);
    @media (width < 768px) {
      gap: var(--column-gap-2col);
    }
  }
  .c-column__item .c-box__border-thin {
    margin-block-end: 0;
  }
  .c-column__item-btn,
  .c-column__item-btn a {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 280px;
    @media (width < 768px) {
      min-inline-size: 280px;
    }
  }
  .c-column:has(.c-column__item-auto) {
    grid-template-columns: auto auto;
    gap: var(--column-gap-4col);
    justify-content: center;
    padding-block-start: var(--spacing-md);
    @media (width < 768px) {
      grid-template-columns: 1fr;
      gap: var(--column-gap-5col);
      padding-block-start: 0;
    }
  }
  .c-column:has(.c-column__item-auto) .c-button {
    margin: 0;
  }
  .c-column:has(.c-column__item-auto) a {
    min-inline-size: 280px;
  }
  .c-column__item-image img {
    inline-size: 100%;
  }
  .c-column__item-image figcaption {
    margin-block-start: 4px;
    font-size: var(--font-size-small-1);
    line-height: 1.5;
  }
  .c-offer {
    max-inline-size: calc(var(--view-size-content-main) + var(--spacing-lg));
    padding-inline: var(--spacing-sm);
    margin-block-end: var(--spacing-4xl);
    margin-inline: auto;
  }
}
@layer component {
  .c-offer__inner {
    display: grid;
    gap: var(--spacing-xl) var(--spacing-lg);
    @media (768px <=width) {
      grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    }
    @media (width < 768px) {
      gap: var(--spacing-no);
    }
  }
  .c-offer__title {
    @media (768px <=width) {
      margin-block-end: var(--spacing-sm);
      text-align: center;
    }
    > a,
    > button {
      gap: var(--spacing-min);
      align-items: center;
      color: var(--color-primary);
      > span {
        font-size: var(--font-size-24);
        font-weight: 700;
        line-height: var(--line-height-title);
        letter-spacing: 0.04em;
      }
      &:after {
        display: inline-block;
        vertical-align: middle;
        content: "";
        transition: transform 0.2s;
      }
    }
    > a {
      display: inline-flex;
      transition-timing-function: ease-in;
      transition-duration: 0.2s;
      transition-property: color;
      @media (width < 768px) {
        display: none;
      }
      > span {
        font-size: var(--font-size-24);
      }
      &:after {
        inline-size: var(--spacing-md);
        block-size: var(--spacing-md);
        background: url(../images/common/icon-arrow-primary-right-lg.svg) no-repeat 50%/100% auto;
        transition-timing-function: ease-in;
        transition-duration: 0.2s;
        transition-property: translate;
      }
    }
    > button {
      display: flex;
      justify-content: space-between;
      inline-size: 100%;
      padding-block: var(--spacing-sm);
      padding-inline: 0;
      color: var(--color-primary);
      background: none;
      border: none;
      border-block-end: 1px solid var(--color-border-light);
      @media (768px <=width) {
        display: none;
      }
      &[aria-expanded="true"] {
        border-color: var(--color-primary);
        border-width: 2px;
        &:after {
          rotate: 180deg;
        }
      }
      > span {
        font-size: var(--font-size-20);
      }
      &:after {
        inline-size: var(--spacing-sm);
        block-size: var(--spacing-sm);
        background: url(../images/common/icon-arrow-primary-down.svg) no-repeat 50%/100% auto;
        transition-timing-function: ease-in;
        transition-duration: 0.2s;
        transition-property: rotate;
      }
    }
  }
  @media (any-hover: hover) {
    .c-offer__title a:hover {
      color: var(--color-text-link-hover);
      &:after {
        translate: 4px;
      }
    }
  }
  .c-offer__button {
    position: relative;
    display: block;
    max-inline-size: 17.5rem;
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-sm);
    margin-block-start: var(--spacing-sm);
    margin-inline: auto;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-jp-bold);
    color: var(--color-lightest);
    text-align: center;
    background-color: var(--color-secondary);
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    @media (768px <=width) {
      display: none;
    }
    &:after {
      position: absolute;
      inset-block: 0;
      inset-inline-end: var(--spacing-sm);
      display: inline-block;
      inline-size: var(--spacing-sm);
      block-size: var(--spacing-sm);
      margin-block: auto;
      vertical-align: middle;
      content: "";
      background: url(../images/common/icon-arrow-white-right.svg) no-repeat 50%/100% auto;
      transition: transform 0.3s;
    }
  }
  .c-offer__contents-wrap {
    @media (width < 768px) {
      max-block-size: 0;
      overflow: hidden;
      transition: max-block-size 0.4s ease;
      &[aria-hidden="false"] {
        max-block-size: 62.5rem;
        padding-block-end: var(--spacing-md);
      }
    }
  }
  .c-offer__list {
    border: 1px solid var(--color-border-light);
  }
  .c-offer__item {
    > a {
      position: relative;
      display: grid;
      grid-template-columns: 9.0625rem 1fr;
      gap: var(--spacing-sm);
      align-items: start;
      padding-block: var(--spacing-s);
      padding-inline: var(--spacing-s) 2.25rem;
      transition-timing-function: ease-in;
      transition-duration: 0.2s;
      transition-property: background-color;
      @media (width < 768px) {
        grid-template-columns: 5rem 1fr;
      }
      &:after {
        position: absolute;
        inset-block: 0;
        inset-inline-end: var(--spacing-s);
        display: inline-block;
        inline-size: var(--spacing-sm);
        block-size: var(--spacing-sm);
        margin-block: auto;
        vertical-align: middle;
        content: "";
        background: url(../images/common/icon-arrow-primary-right.svg) no-repeat 50%/100% auto;
        transition-timing-function: ease-in;
        transition-duration: 0.2s;
        transition-property: inset-inline-end;
      }
    }
    &:not(:last-child) {
      > a {
        border-block-end: 1px solid var(--color-border-light);
      }
    }
  }
  @media (any-hover: hover) {
    .c-offer__item a:hover {
      background-color: var(--color-bg-secondary);
      &:after {
        inset-inline-end: var(--spacing-xs);
      }
    }
  }
  .c-offer__item-meta {
    font-weight: var(--font-weight-jp-medium);
    color: var(--color-primary);
    > span {
      text-align: center;
      @media (width < 768px) {
        line-height: var(--line-height-button);
      }
    }
    > span:not(.c-offer__item-label) {
      display: block;
      font-size: var(--font-size-small);
      line-height: var(--line-height-title);
    }
  }
  .c-offer__item-label {
    display: inline-block;
    inline-size: 100%;
    padding-block: var(--spacing-x-min) var(--spacing-min);
    margin-block-end: var(--spacing-x-min);
    font-size: var(--font-size-small-1);
    line-height: 1;
    background-color: var(--color-bg-category);
    @media (width < 768px) {
      padding-block: var(--spacing-x-min) 1px;
      margin-block-end: var(--spacing-min);
    }
  }
  .c-offer__item-title {
    line-height: var(--line-height-title);
    h3 {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-jp-medium);
      text-wrap: wrap;
      @media (width < 768px) {
        margin-block-end: var(--spacing-min);
        font-size: var(--font-size-small);
      }
    }
    span {
      display: block;
      font-size: var(--font-size-small-1);
      @media (width < 768px) {
        font-size: var(--font-size-small-2);
      }
    }
  }
  .c-section-group .c-offer {
    padding-inline: 0;
    margin-block-end: var(--spacing-2xl);
    @media (width < 768px) {
      margin-block-end: var(--spacing-no);
    }
  }
  .c-section-group .c-offer__title {
    position: relative;
    padding-inline-start: 11px;
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-20);
    line-height: var(--line-height-title);
    text-align: start;
    letter-spacing: 0.05em;
    @media (width < 768px) {
      margin-block-end: var(--spacing-sm);
      font-size: var(--font-size-20);
    }
  }
  .c-section-group .c-offer__title:before {
    position: absolute;
    inset-block-start: 5px;
    inset-inline-start: 0;
    display: inline-block;
    inline-size: 3px;
    block-size: 22px;
    content: "";
    background-color: var(--color-secondary);
    @media (width < 768px) {
      inset-block-start: 2px;
    }
  }
  .c-section-group .c-offer__list {
    background: var(--color-lightest);
    border: none;
  }
  .c-section-group .c-offer__item a:hover {
    @media (any-hover: hover) {
      background-color: var(--color-bg-gray);
      &:after {
        inset-inline-end: var(--spacing-xs);
      }
      .c-offer__item-title {
        color: var(--color-text-link-hover);
      }
    }
  }
  .c-section-group .c-offer__contents-wrap {
    @media (width < 768px) {
      padding-block-end: var(--spacing-lg);
    }
  }
}
@layer component {
  .c-news {
    max-inline-size: calc(62.5rem + var(--spacing-lg));
    padding-inline: var(--spacing-sm);
    margin-block-end: var(--spacing-2xl);
    margin-inline: auto;
    @media (width < 768px) {
      margin-block-end: var(--spacing-4xl);
    }
  }
  .c-news__item {
    > details {
      padding-block: 0.5rem;
      border-block-end: 1px solid var(--color-border-light);
      > summary {
        position: relative;
        display: flex;
        gap: 0.75rem;
        padding-inline: 0.25rem 2rem;
        font-size: var(--font-size-small-1);
        line-height: 1.5;
        color: var(--color-primary);
        [open] & {
          &:after {
            rotate: 180deg;
          }
        }
        &:after {
          position: absolute;
          inset-block: 0;
          inset-inline-end: 0;
          display: inline-block;
          inline-size: 1rem;
          block-size: 1rem;
          margin-block: auto;
          vertical-align: middle;
          content: "";
          background: url(../images/common/icon-arrow-gray-down.svg) no-repeat 50%/100% auto;
          transition: rotate 0.3s;
        }
      }
    }
  }
  .c-news__item-meta {
    flex: 0 0 auto;
    font-family: var(--font-family-en);
  }
  .c-news__item-content {
    padding-inline: var(--spacing-5xl) var(--spacing-min);
    margin-block-start: var(--spacing-min);
    @media (width < 768px) {
      padding-inline-end: var(--spacing-min);
    }
    > ul {
      > li {
        position: relative;
        padding-inline-start: 0.625rem;
        font-size: var(--font-size-small-1);
        list-style: none;
        &:before {
          position: absolute;
          inset: 9px auto auto 0;
          display: block;
          inline-size: 0.375rem;
          block-size: 0.375rem;
          content: "";
          background-color: var(--color-secondary);
          border-radius: var(--radius-max);
          @media (width < 768px) {
            inset: 8px auto auto 0;
          }
        }
      }
    }
    > p {
      font-size: 0.75rem;
      > a {
        margin-inline-end: 1rem;
        font-size: 0.8125rem;
        color: var(--color-primary);
        text-decoration: underline;
        &:before {
          display: inline-block;
          inline-size: var(--spacing-s);
          block-size: var(--spacing-s);
          margin-block: auto;
          margin-block-end: -0.1em;
          margin-inline-end: var(--spacing-min);
          content: "";
          background-image: url(../images/common/icon-arrow-primary-right-sm.svg);
          background-repeat: no-repeat;
          background-size: var(--spacing-s) var(--spacing-s);
        }
      }
    }
  }
}
@layer component {
  .c-hero {
    overflow: hidden;
  }
  .c-hero__inner {
    display: grid;
    max-block-size: 315px;
    > div {
      grid-area: 1/-1;
    }
  }
  .c-hero__textarea {
    position: relative;
    z-index: 4;
    block-size: 100%;
    padding-block: var(--spacing-lg);
    text-align: center;
    @media (768px <=width) {
      display: grid;
      align-items: center;
      align-self: center;
      max-inline-size: 75%;
    }
    @media (width < 768px) {
      padding-block: var(--spacing-md);
    }
    &:before {
      position: absolute;
      inset: 0;
      z-index: -1;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      pointer-events: none;
      @media (768px <=width) {
        content: "";
        background-image: var(--gradient-hero-bg-blue);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover;
        mask-image: linear-gradient(90deg, #fff 75%, #fff0);
        mask-repeat: no-repeat;
        mask-size: cover;
      }
    }
    h2 {
      margin-block-end: var(--spacing-md);
      font-size: var(--font-size-38);
      font-weight: 300;
      line-height: 1.7;
      color: var(--color-lightest);
      @media (width < 992px) {
        font-size: var(--font-size-32);
      }
      @media (width < 768px) {
        padding-block: var(--spacing-min);
        margin-block-end: var(--spacing-sm);
        font-size: var(--font-size-22);
      }
    }
  }
  .c-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
    content: "";
    isolation: isolate;
    @media (768px <=width) {
      background-image: var(--gradient-hero-bg-blue);
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: cover;
      opacity: 0.7;
      mask-image: linear-gradient(90deg, #fff 75%, #fff0);
      mask-repeat: no-repeat;
      mask-size: cover;
    }
    @media (width < 768px) {
      background-color: var(--color-primary-darker-02);
      opacity: 0.8;
    }
    &.c-hero__bg-industry {
      @media (width < 768px) {
        opacity: 0.6;
      }
    }
    &:before {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      background-image: url(../images/home/hero-bg-01.png);
      background-repeat: repeat;
      background-position: 50%;
      background-size: 130px;
      mix-blend-mode: multiply;
      opacity: 0.6;
      @media (768px <=width) {
        content: "";
      }
    }
  }
  .c-hero__bg-obj-01,
  .c-hero__bg-obj-02,
  .c-hero__bg-obj-03,
  .c-hero__bg-obj-04 {
    position: absolute;
    z-index: 1;
    display: inline-block;
    mix-blend-mode: multiply;
    opacity: 0.8;
    rotate: 44deg;
    @media (width < 768px) {
      display: none;
    }
  }
  .c-hero__bg-obj-01 {
    inset-block-start: -7.5rem;
    inset-inline-start: 3.625rem;
    inline-size: 4.5625rem;
    block-size: 20.875rem;
    background: var(--gradient-hero-obj-blue-01);
  }
  .c-hero__bg-obj-02 {
    inset-inline-start: 1.875rem;
    inline-size: 9.375rem;
    block-size: 16.0625rem;
  }
  .c-hero__bg-obj-02,
  .c-hero__bg-obj-03 {
    inset-block-end: -3.4375rem;
    background: var(--gradient-hero-obj-blue-02);
  }
  .c-hero__bg-obj-03 {
    inset-inline-start: 18.125rem;
    inline-size: 2.25rem;
    block-size: 12.8125rem;
  }
  .c-hero__bg-obj-04 {
    inset-block-start: -3.4375rem;
    inset-inline-end: 13.125rem;
    inline-size: 3.5rem;
    block-size: 11.25rem;
    background: var(--gradient-hero-obj-blue-03);
  }
  .c-hero__button {
    position: relative;
    inline-size: 100%;
    max-inline-size: 22rem;
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--radius-normal);
    @media (width < 768px) {
      max-inline-size: 17.5rem;
    }
    &:before {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      pointer-events: none;
      content: "";
    }
    &.c-hero__button-gold {
      &:before {
        background: var(--gradient-button-bg-gold);
      }
      a {
        background-color: initial;
        &:before {
          background: var(--gradient-border-gold);
        }
      }
    }
    &.c-hero__button-black {
      &:before {
        background: var(--gradient-button-bg-black);
      }
      a {
        background-color: initial;
        &:before {
          background: var(--gradient-border-black);
        }
      }
    }
    &.c-hero__button-red {
      &:before {
        background: var(--gradient-button-bg-red);
      }
      a {
        padding-inline: var(--spacing-lg) var(--spacing-2xl);
        background-color: initial;
        &:before {
          background: var(--gradient-border-red);
        }
        > span:first-child {
          display: inline-block;
          padding-block: var(--spacing-x-min);
          padding-inline: var(--spacing-min);
          margin-inline-end: var(--spacing-xs);
          font-size: var(--font-size-small);
          font-weight: 500;
          color: var(--color-red);
          background-color: var(--color-lightest);
          border-radius: var(--radius-small);
          @media (width < 768px) {
            margin-inline-end: 0;
          }
        }
      }
    }
    a {
      position: relative;
      display: inline-block;
      inline-size: 100%;
      padding-block: var(--spacing-sm);
      padding-inline: var(--spacing-lg) var(--spacing-xl);
      font-size: var(--font-size-large);
      line-height: var(--line-height-button);
      color: var(--color-lightest);
      border-radius: var(--radius-normal);
      box-shadow: 0 4px 0 0 #0006;
      isolation: isolate;
      transition-timing-function: ease-in;
      transition-duration: 0.2s;
      transition-property: color, background;
      @media (width < 768px) {
        padding-block: var(--spacing-s);
        font-size: var(--font-size-base);
      }
      &:before {
        inset: 0;
        z-index: -1;
        padding: 1px;
        pointer-events: none;
        border-radius: inherit;
        mask:
          linear-gradient(var(--color-lightest) 0 0) content-box,
          linear-gradient(var(--color-lightest) 0 0);
        mask-composite: exclude;
      }
      &:after,
      &:before {
        position: absolute;
        content: "";
      }
      &:after {
        inset-block: 0;
        inset-inline-end: var(--spacing-sm);
        display: inline-block;
        inline-size: var(--spacing-sm);
        block-size: var(--spacing-sm);
        margin-block: auto;
        vertical-align: middle;
        background: url(../images/common/icon-arrow-white-right.svg) no-repeat 50%/100% auto;
        transition-timing-function: ease-in;
        transition-duration: 0.2s;
        transition-property: background-image;
      }
    }
    &:not(:first-of-type) {
      margin-block-start: var(--spacing-xs);
    }
  }
  @media (any-hover: hover) {
    .c-hero__button-gold a:hover {
      color: var(--color-cta);
      background-color: var(--color-lightest);
      &:after {
        background-image: url(../images/common/icon-arrow-gold-right.svg);
      }
    }
  }
  @media (any-hover: hover) {
    .c-hero__button-black a:hover {
      color: var(--color-darkest);
      background-color: var(--color-lightest);
      &:after {
        background-image: url(../images/common/icon-arrow-gray-right.svg);
      }
    }
  }
  @media (any-hover: hover) {
    .c-hero__button-red a:hover {
      color: var(--color-red);
      background-color: var(--color-lightest);
    }
  }
  .c-hero__link {
    display: inline-flex;
    gap: var(--spacing-x-min) var(--spacing-sm);
    justify-content: center;
    padding-block: 0.375rem;
    padding-inline: 1.25rem;
    margin-block-start: var(--spacing-xs);
    font-size: var(--font-size-small);
    color: var(--color-lightest);
    letter-spacing: 0.08em;
    @media (width < 768px) {
      flex-direction: column;
      padding-block: 0;
    }
    > span {
      line-height: 1.7;
    }
    > a {
      position: relative;
      padding-inline-end: var(--spacing-md);
      font-weight: 700;
      line-height: 1.7;
      transition-timing-function: ease-in;
      transition-duration: 0.2s;
      transition-property: color;
      @media (width < 768px) {
        padding-inline-end: 1.125rem;
        font-size: var(--font-size-base);
        line-height: 1;
      }
      &:after {
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        display: inline-block;
        inline-size: var(--spacing-sm);
        block-size: var(--spacing-sm);
        margin-block: auto;
        vertical-align: middle;
        content: "";
        background: url(../images/common/icon-arrow-white-right.svg) no-repeat 50%/100% auto;
        transition-timing-function: ease-in;
        transition-duration: 0.2s;
        transition-property: background-image;
        @media (width < 768px) {
          background: url(../images/common/icon-arrow-white-right-sm.svg) no-repeat 50%/100% auto;
        }
      }
    }
  }
  @media (any-hover: hover) {
    .c-hero__link a:hover {
      color: var(--color-text-gray);
      &:after {
        background-image: url(../images/common/icon-arrow-gray-right.svg);
      }
    }
  }
  .c-hero__image {
    max-block-size: 250px;
    @media (768px <=width) {
      display: none;
    }
    img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }
  .c-hero__slide {
    z-index: 1;
    block-size: 100%;
    margin-inline-start: auto;
    text-align: end;
    @media (768px <=width) {
      max-inline-size: 47%;
      &:has(.splide__list > .splide__slide:only-child) {
        inline-size: 47%;
      }
    }
    @media (width < 768px) {
      display: none;
    }
    img {
      inline-size: 100%;
      block-size: 315px;
      object-fit: cover;
    }
  }
}
@layer component {
  .c-flow {
    padding-block: var(--spacing-2xl);
    background-color: var(--color-bg-secondary);
    @media (width < 992px) {
      padding-block: var(--spacing-xl);
    }
  }
  .c-flow__wrap {
    max-inline-size: calc(var(--view-size-content-main) + var(--spacing-lg));
    padding-inline: var(--spacing-sm);
    margin-inline: auto;
  }
  .c-flow__heading {
    h2 {
      margin-block-end: var(--spacing-md);
      font-size: var(--font-size-28);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      color: var(--color-secondary);
      text-align: center;
      letter-spacing: 0.05em;
      @media (width < 768px) {
        margin-block-end: var(--spacing-sm);
        font-size: var(--font-size-22);
      }
    }
  }
  .c-flow__list {
    position: relative;
    display: flex;
    gap: var(--spacing-md);
    @media (width < 992px) {
      flex-direction: column;
      gap: var(--spacing-sm);
      overflow: hidden;
    }
    @media (width < 768px) {
      gap: var(--spacing-xs);
    }
    &:before {
      position: absolute;
      inset-block: 0;
      inset-inline: 0;
      z-index: 0;
      inline-size: 100%;
      block-size: 6px;
      margin-block: auto;
      margin-inline: auto;
      content: "";
      background: var(--gradient-border-gold-02);
      @media (width < 992px) {
        inline-size: 6px;
        block-size: 100%;
        background: var(--gradient-border-gold-02-sp);
      }
      @media (width < 768px) {
        content: none;
      }
    }
    > li {
      z-index: 1;
      flex: 1 1 0;
      padding: var(--spacing-md);
      background-color: var(--color-lightest);
      @media (width < 992px) {
        position: relative;
        padding: var(--spacing-sm);
      }
      @media (width < 768px) {
        padding-block: var(--spacing-s);
      }
      h3,
      h4 {
        position: relative;
        padding-block-end: var(--spacing-s);
        margin-block-end: var(--spacing-xs);
        font-size: var(--font-size-large);
        font-weight: var(--font-weight-jp-bold);
        line-height: 1.5;
        color: var(--color-secondary);
        text-align: center;
        letter-spacing: 0.04em;
        @media (width < 992px) {
          padding-block-end: var(--spacing-no);
          margin-block-end: var(--spacing-min);
          text-align: start;
        }
        @media (width < 768px) {
          margin-block-end: var(--spacing-no);
        }
        > span {
          display: inline-block;
          inline-size: 100%;
          line-height: 1;
          text-align: center;
          @media (width < 992px) {
            display: inline;
            text-align: start;
          }
          &:first-child {
            padding-block-end: var(--spacing-x-min);
            margin-block-end: var(--spacing-x-min);
          }
          &:last-child {
            font-size: var(--font-size-base);
            line-height: var(--line-height-title);
            color: var(--color-darkest);
            @media (width < 992px) {
              margin-inline-start: var(--spacing-xs);
              font-size: var(--font-size-large);
            }
          }
          > span {
            font-family: var(--font-family-en);
            font-weight: var(--font-weight-jp-regular);
            &:first-child {
              font-size: var(--font-size-small-1);
              line-height: 1;
              @media (width < 992px) {
                font-size: var(--font-size-small);
              }
            }
            &:nth-child(2) {
              margin-inline-start: var(--spacing-x-min);
              font-size: var(--font-size-large);
              line-height: 1;
              @media (width < 992px) {
                font-size: var(--font-size-20);
              }
            }
          }
        }
        &:after {
          position: absolute;
          inset-block-end: 0;
          inset-inline: 0;
          display: inline-block;
          inline-size: 100%;
          block-size: 1px;
          margin-inline: auto;
          vertical-align: middle;
          content: "";
          background: var(--color-secondary);
          transition: transform 0.3s;
          @media (width < 992px) {
            display: none;
          }
        }
      }
      p {
        font-size: var(--font-size-small);
        line-height: var(--line-height-text);
        > span {
          display: block;
        }
      }
    }
  }
  .c-flow__text-pc-only {
    @media (width < 768px) {
      display: none;
    }
  }
}
@layer component {
  .c-flow-knowhow {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    padding-block-end: var(--pbe-pc, var(--spacing-2xl));
    @media (width < 768px) {
      padding-block-end: var(--pbe-sp, var(--pbe-pc, var(--spacing-2xl)));
    }
    div.c-button {
      margin-block-end: var(--spacing-no);
    }
  }
  .c-flow-knowhow__wrap {
    inline-size: 100%;
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-sm);
    margin-inline: auto;
    background: var(--color-bg-secondary);
  }
  .c-flow-knowhow__heading {
    h2 {
      margin-block-end: var(--spacing-md);
      font-size: var(--font-size-28);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      color: var(--color-secondary);
      text-align: center;
      letter-spacing: 0.05em;
      @media (width < 768px) {
        margin-block-end: var(--spacing-sm);
        font-size: var(--font-size-22);
      }
    }
  }
  .c-flow-knowhow__list {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: var(--spacing-xs);
    @media (width < 992px) {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
      overflow: hidden;
    }
    > li {
      z-index: 1;
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / span 2;
      padding-block: var(--spacing-md);
      padding-inline: var(--spacing-s);
      background-color: var(--color-lightest);
      @media (width < 992px) {
        position: relative;
        display: block;
        padding-block: var(--spacing-md);
        padding-inline: var(--spacing-s);
      }
      h3,
      h4 {
        position: relative;
        grid-row: 1;
        padding-block-end: var(--spacing-s);
        margin-block-end: var(--spacing-s);
        font-weight: var(--font-weight-jp-bold);
        line-height: var(--line-height-button);
        color: var(--color-secondary);
        text-align: center;
        @media (width < 992px) {
          padding-block-end: var(--spacing-xs);
          margin-block-end: var(--spacing-min);
          text-align: start;
        }
        > span {
          display: inline-block;
          inline-size: 100%;
          line-height: 1;
          text-align: center;
          @media (width < 992px) {
            display: inline;
            text-align: start;
          }
          &:first-child {
            padding-block-end: var(--spacing-x-min);
            margin-block-end: var(--spacing-x-min);
            letter-spacing: 0.04em;
          }
          &:last-child {
            font-size: var(--font-size-base);
            line-height: var(--line-height-title);
            color: var(--color-darkest);
            @media (width < 992px) {
              margin-inline-start: var(--spacing-xs);
              font-size: var(--font-size-large);
            }
          }
          > span {
            font-family: var(--font-family-en);
            font-weight: var(--font-weight-jp-regular);
            &:first-child {
              font-size: var(--font-size-small-1);
              line-height: 1;
              @media (width < 992px) {
                font-size: var(--font-size-small);
              }
            }
            &:nth-child(2) {
              margin-inline-start: var(--spacing-x-min);
              font-size: var(--font-size-large);
              line-height: 1;
              @media (width < 992px) {
                font-size: var(--font-size-20);
              }
            }
          }
        }
        &:after {
          position: absolute;
          inset-block-end: 0;
          inset-inline: 0;
          display: inline-block;
          inline-size: 100%;
          block-size: 1px;
          margin-inline: auto;
          vertical-align: middle;
          content: "";
          background: var(--color-secondary);
          transition: transform 0.3s;
        }
      }
      p {
        font-size: var(--font-size-small);
        line-height: var(--line-height-text);
        > span {
          display: block;
        }
      }
    }
  }
  .c-flow-knowhow__list > li > .c-flow-knowhow__sub-list {
    grid-row: 2;
  }
  .c-flow-knowhow__sub-list {
    line-height: var(--line-height-button);
    :where(a) {
      display: block;
    }
    > :where(li + li) {
      border-block-start: 1px solid var(--color-border-light);
    }
    > :where(li:has(ul)) {
      & + :where(li) {
        @media (width < 992px) {
          margin-block-start: var(--spacing-s);
        }
      }
    }
    > :where(li) {
      > :where(a) {
        position: relative;
        display: inline-block;
        padding-block: var(--spacing-xs);
        font-size: var(--font-size-small-1);
        font-weight: var(--font-weight-jp-medium);
        color: var(--color-primary);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-decoration-color: #0000;
        text-underline-offset: 2px;
        transition:
          color 0.2s ease-in-out,
          text-decoration-color 0.2s ease-in-out;
        @media (any-hover: hover) {
          &:hover {
            color: var(--color-text-link-hover);
            text-decoration-color: initial;
          }
        }
        @media (width < 992px) {
          padding-block-start: var(--spacing-s);
          font-size: var(--font-size-base);
        }
        &:after {
          position: absolute;
          inset-block-end: var(--spacing-xs);
          inset-inline: 0;
          display: inline-block;
          inline-size: 100%;
          block-size: 1px;
          margin-inline: auto;
          vertical-align: middle;
          content: "";
          background: currentcolor;
          opacity: 0;
          transition: opacity 0.2s ease-in-out;
        }
      }
      > :where(ul) {
        display: flex;
        flex-direction: column;
        padding-block: var(--spacing-x-min) var(--spacing-s);
        @media (width < 992px) {
          padding-block: var(--spacing-no) var(--spacing-xs);
        }
        > :where(li) {
          > :where(a) {
            position: relative;
            display: inline-flex;
            align-items: center;
            padding-inline-start: calc(var(--spacing-s) + var(--spacing-x-min));
            font-size: var(--font-size-small-2);
            color: var(--color-text-gray);
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-decoration-color: #0000;
            text-underline-offset: 2px;
            transition:
              color 0.2s ease-in-out,
              text-decoration-color 0.2s ease-in-out;
            @media (any-hover: hover) {
              &:hover {
                text-decoration-color: initial;
              }
            }
            @media (width < 992px) {
              padding-block: var(--spacing-min);
              font-size: var(--font-size-small);
            }
            &:after {
              position: absolute;
              inset-block-end: 0;
              inset-inline: calc(var(--spacing-s) + var(--spacing-x-min)) 0;
              display: inline-block;
              block-size: 1px;
              margin-inline: auto;
              vertical-align: middle;
              content: "";
              background: currentcolor;
              opacity: 0;
              transition: opacity 0.2s ease-in-out;
            }
            &:before {
              position: absolute;
              inset: 0.22em auto auto 0;
              inline-size: 12px;
              block-size: 12px;
              content: "";
              background: url(../images/common/icon-arrow-gray-right-sm.svg) no-repeat 50%/100% auto;
              @media (width < 992px) {
                inset-block-start: 0.56em;
              }
            }
          }
        }
      }
    }
  }
  .c-section-group .c-flow-knowhow__wrap {
    background: none;
  }
}
@layer component {
  .c-cta {
    overflow: hidden;
    &:has(.c-cta__text-industry) {
      div.c-cta__bg:after {
        background: var(--gradient-indrustry-bg-blue);
      }
    }
  }
  .c-cta__inner {
    display: grid;
    > div {
      grid-area: 1/-1;
    }
  }
  .c-cta__textarea {
    position: relative;
    z-index: 4;
    display: grid;
    align-items: center;
    align-self: center;
    block-size: 100%;
    padding-block: var(--spacing-lg);
    padding-inline: var(--spacing-sm);
    text-align: center;
    @media (width < 768px) {
      padding-block: var(--spacing-md);
    }
    &:after {
      position: absolute;
      inset-block: 0;
      inset-inline-end: 0;
      z-index: -1;
      inline-size: 60%;
      content: "";
      background-image: url(../images/home/bg-cta.png);
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: cover;
      mix-blend-mode: multiply;
      opacity: 0.4;
      mask-image: linear-gradient(270deg, #fff 40%, #fff0);
      mask-repeat: no-repeat;
      mask-size: 100% auto;
      @media (width < 576px) {
        inline-size: 90%;
        background-image: url(../images/home/bg-cta-sp.png);
        mask-image: linear-gradient(270deg, #fff 80%, #fff0);
      }
    }
    &:has(.c-cta__text-industry) {
      padding-block: var(--spacing-2xl);
      @media (width < 768px) {
        padding-block-start: var(--spacing-lg);
      }
      &:after {
        background-position: 100%;
        @media (width < 576px) {
          inline-size: 100%;
          background-image: url(../images/common/bg-industry-cta-sp.png);
          background-position: 100% 0;
          mask-image: none;
        }
      }
      div.c-button {
        margin-block-end: var(--spacing-no);
        @media (width < 576px) {
          max-inline-size: 17.5rem;
        }
      }
    }
    p {
      margin-block-end: var(--spacing-sm);
      font-size: var(--font-size-20);
      font-weight: var(--font-weight-jp-medium);
      line-height: var(--line-height-button);
      color: var(--color-lightest);
      @media (width < 992px) {
        font-size: var(--font-size-large);
      }
      @media (width < 576px) {
        font-size: var(--font-size-large);
      }
      > span {
        @media (width < 576px) {
          display: block;
        }
      }
    }
    p.c-cta__text-industry {
      margin-block-end: calc(var(--spacing-sm) + var(--spacing-min));
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-jp-normal);
      line-height: var(--line-height-text);
      @media (width < 768px) {
        margin-block-end: var(--spacing-sm);
      }
      > span {
        display: block;
        > span {
          @media (width < 768px) {
            display: block;
          }
        }
      }
    }
  }
  .c-cta__bg {
    position: relative;
    pointer-events: none;
    &:after,
    &:before {
      position: absolute;
      inset: 0;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      content: "";
      background-position: 50%;
    }
    &:before {
      background-image: url(../images/home/hero-bg-01.png);
      background-repeat: repeat;
      background-size: 60px;
    }
    &:after {
      pointer-events: none;
      background-image: var(--gradient-hero-bg-blue);
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.7;
    }
  }
  .c-cta__bg-obj-01,
  .c-cta__bg-obj-02 {
    position: absolute;
    display: inline-block;
    mix-blend-mode: multiply;
    rotate: 44deg;
    @media (width < 576px) {
      display: none;
    }
  }
  .c-cta__bg-obj-01 {
    inset-block-start: -6.25rem;
    inset-inline-start: 2.5rem;
    inline-size: 4.5625rem;
    block-size: 20.875rem;
    background: var(--gradient-cta-obj-blue-01);
  }
  .c-cta__bg-obj-02 {
    inset-block-end: -11.875rem;
    inset-inline-start: 5rem;
    inline-size: 9.375rem;
    block-size: 16.0625rem;
    background: var(--gradient-cta-obj-blue-02);
  }
  .c-cta__button {
    position: relative;
    inline-size: max-content;
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--radius-normal);
    @media (width < 576px) {
      inline-size: 100%;
      max-inline-size: 17.5rem;
    }
    &:before {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      pointer-events: none;
      content: "";
      background: var(--gradient-button-bg-gold);
      border-radius: inherit;
    }
    a {
      position: relative;
      display: flex;
      gap: var(--spacing-xs);
      align-items: center;
      justify-content: center;
      inline-size: 100%;
      max-inline-size: 27.5rem;
      padding-block: var(--spacing-sm);
      padding-inline: var(--spacing-lg) var(--spacing-xl);
      margin-inline: auto;
      overflow: hidden;
      font-size: var(--font-size-large);
      line-height: var(--line-height-button);
      color: var(--color-lightest);
      background-color: initial;
      border-radius: var(--radius-normal);
      box-shadow: 0 4px 0 0 #0006;
      isolation: isolate;
      transition-timing-function: ease-in;
      transition-duration: 0.2s;
      transition-property: color, background;
      @media (width < 576px) {
        gap: var(--spacing-min);
        max-inline-size: 17.5rem;
        padding-block: var(--spacing-s);
        padding-inline: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-base);
      }
      > span {
        position: relative;
        z-index: 2;
      }
      > span:first-child {
        display: inline-block;
        padding-block: var(--spacing-x-min);
        padding-inline: var(--spacing-min);
        font-size: var(--font-size-small);
        color: var(--color-cta);
        background-color: var(--color-lightest);
        border-radius: 2px;
        transition-timing-function: ease-in;
        transition-duration: 0.2s;
        transition-property: color, background-color;
        @media (width < 576px) {
          font-size: var(--font-size-small-3);
        }
      }
      &:before {
        position: absolute;
        inset: 0;
        z-index: -1;
        padding: 1px;
        pointer-events: none;
        content: "";
        background: var(--gradient-border-gold);
        border-radius: inherit;
        mask:
          linear-gradient(var(--color-lightest) 0 0) content-box,
          linear-gradient(var(--color-lightest) 0 0);
        mask-composite: exclude;
        transition-timing-function: ease-in;
        transition-duration: 0.2s;
        transition-property: opacity;
      }
      &:after {
        position: absolute;
        inset-block: 0;
        inset-inline-end: var(--spacing-sm);
        display: inline-block;
        inline-size: var(--spacing-sm);
        block-size: var(--spacing-sm);
        margin-block: auto;
        vertical-align: middle;
        content: "";
        background: url(../images/common/icon-arrow-white-right.svg) no-repeat 50%/100% auto;
        transition-timing-function: ease-in;
        transition-duration: 0.2s;
        transition-property: background-image;
        @media (width < 576px) {
          inset-inline-end: var(--spacing-xs);
        }
      }
    }
  }
  @media (any-hover: hover) {
    .c-cta__button a:hover {
      color: var(--color-cta);
      background-color: var(--color-lightest);
      > span:first-child {
        color: var(--color-lightest);
        background-color: var(--color-cta);
      }
      &:after {
        background-image: url(../images/common/icon-arrow-gold-right.svg);
      }
    }
  }
}
@layer component {
  .c-qa__heading {
    h2 {
      margin-block-end: var(--spacing-md);
      font-size: var(--font-size-28);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      color: var(--color-secondary);
      text-align: center;
      letter-spacing: 0.05em;
      @media (width < 768px) {
        margin-block-end: var(--spacing-sm);
        font-size: var(--font-size-22);
      }
    }
  }
  .c-qa__list {
    padding-block-end: var(--spacing-md);
    [class="c-page-home"] & {
      @media (992px <=width) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 var(--spacing-md);
      }
    }
  }
  .c-qa__item {
    display: flex;
    align-items: flex-start;
    [class="c-page-home"] & {
      min-block-size: 4.5rem;
    }
    &:has(details[open]) {
      border-block-end: 1px solid var(--color-border-light);
    }
    &:has(details:not([open])) {
      summary {
        border-block-end: 1px solid var(--color-border-light);
      }
    }
    details {
      inline-size: 100%;
      > summary {
        position: relative;
        display: flex;
        align-items: center;
        inline-size: 100%;
        padding-block: var(--spacing-s);
        padding-inline: 10px var(--spacing-s);
        line-height: var(--line-height-title);
        transition: background-color 0.2s ease;
        @media (width < 768px) {
          padding-inline: var(--spacing-xs);
        }
        @media (any-hover: hover) {
          &:hover {
            background-color: var(--color-bg-secondary);
          }
        }
        [class="c-page-home"] & {
          min-block-size: calc(var(--base-font-size) * 2 * var(--line-height-title) + var(--spacing-s) * 2);
          @media (width < 768px) {
            padding-inline: var(--spacing-min) var(--spacing-s);
          }
        }
        > span {
          position: relative;
          display: inline-flex;
          padding-inline: 33px 20px;
          @media (992px <=width) {
            align-items: center;
          }
          > span {
            position: absolute;
            inset-block: 0 auto;
            inset-inline: 0 auto;
            flex: 0 0 22px;
            padding-block-start: var(--spacing-x-min);
            font-family: var(--font-family-en);
            font-size: var(--font-size-20);
            font-weight: var(--font-weight-en-medium);
            line-height: 1;
            color: var(--color-primary);
            @media (width < 992px) {
              font-size: var(--font-size-22);
            }
          }
        }
        &:after {
          position: absolute;
          inset-block: 0;
          inset-inline-end: var(--spacing-s);
          inline-size: 16px;
          block-size: 16px;
          margin-block: auto;
          content: "";
          background: url(../images/common/icon-arrow-primary-down.svg) no-repeat 50%/100% auto;
          transition: rotate 0.2s ease-in-out;
          @media (width < 768px) {
            inset-inline-end: var(--spacing-xs);
          }
          [class="c-page-home"] & {
            inline-size: 12px;
            block-size: 12px;
            background: url(../images/common/icon-arrow-gray-down.svg) no-repeat 50%/100% auto;
            @media (width < 768px) {
              inset-inline-end: var(--spacing-s);
            }
          }
        }
        details[open] & {
          &:after {
            rotate: 180deg;
          }
        }
      }
    }
  }
  .c-qa__item-contents {
    display: flex;
    gap: var(--spacing-s);
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-s) var(--spacing-xl);
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      padding-inline: 10px var(--spacing-s);
    }
    [class="c-page-home"] & {
      padding-block-start: 0;
      padding-inline: var(--spacing-min) var(--spacing-s);
      background-color: var(--color-lightest);
      @media (width < 768px) {
        padding-inline: var(--spacing-min) var(--spacing-s);
      }
    }
    details[open] & {
      animation: c-qa-open-fade 0.3s ease both;
    }
    > span {
      flex: 0 0 22px;
      padding-block-start: var(--spacing-min);
      font-family: var(--font-family-en);
      font-size: var(--font-size-20);
      font-weight: var(--font-weight-en-medium);
      line-height: 1;
      color: var(--color-primary);
      @media (width < 992px) {
        font-size: var(--font-size-22);
      }
      [class="c-page-home"] & {
        color: var(--color-text-placeholder);
      }
    }
    > div {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
      > p {
        font-size: var(--font-size-small);
        line-height: var(--line-height-text);
        > span {
          display: block;
        }
      }
      span.c-text__note {
        margin-block-end: var(--spacing-no);
        font-size: var(--font-size-small-1);
      }
      a {
        font-weight: var(--font-weight-jp-bold);
        color: var(--color-secondary);
      }
      ul {
        font-size: var(--font-size-small);
        > li {
          position: relative;
          padding-inline-start: var(--spacing-md);
          &:before {
            position: absolute;
            inset: 0.65em auto auto 5px;
            inset-inline-start: 9px;
            display: block;
            inline-size: 6px;
            block-size: 6px;
            content: "";
            background-color: var(--color-secondary);
            border-radius: 3px;
          }
        }
      }
    }
  }
  .c-qa__item-contents-note {
    position: relative;
    padding-inline-start: calc(1em + 5px);
    font-size: var(--font-size-small-1);
    color: var(--color-text-gray);
    &:before {
      position: absolute;
      inset: 0 auto auto 0;
      content: "※";
    }
  }
  @keyframes c-qa-open-fade {
    0% {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .c-qa:has(.c-qa__link) {
    padding-inline: 0;
    margin-block: 0 var(--spacing-md);
  }
  .c-qa__link-item {
    border-block-end: 1px solid var(--color-border-gray-02);
  }
  .c-qa__link-item a {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    inline-size: 100%;
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-min) var(--spacing-s);
    transition: background-color 0.2s ease;
    @media (width < 768px) {
      padding-inline-end: var(--spacing-md);
    }
  }
  @media (any-hover: hover) {
    .c-qa__link-item a:hover {
      color: var(--color-text-link-hover);
      background-color: var(--color-bg-secondary);
      &:after {
        inset-inline-end: 8px;
      }
    }
  }
  .c-qa__link-item a:before {
    padding-block-start: 3px;
    margin-inline-end: var(--spacing-s);
    font-family: var(--font-family-en);
    font-size: var(--font-size-20);
    font-weight: 500;
    line-height: 0.9;
    color: var(--color-primary);
    content: "Q.";
  }
  .c-qa__link-item a:after {
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--spacing-s);
    inline-size: 16px;
    block-size: 16px;
    margin-block: auto;
    content: "";
    background: url(../images/common/icon-arrow-primary-right.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    transition: all 0.2s ease;
    @media (width < 768px) {
      inset-inline-end: var(--spacing-xs);
    }
  }
}
@layer component {
  .c-login {
    position: relative;
    inline-size: 100%;
    border-block-start: 4px solid var(--color-secondary);
  }
  .c-login__form {
    padding-block: var(--spacing-xl) var(--spacing-4xl);
    padding-inline: var(--content-padding-large);
    background-color: var(--color-lightest);
    border-block-end: 1px solid var(--color-border-light);
    border-inline-start: 1px solid var(--color-border-light);
    border-inline-end: 1px solid var(--color-border-light);
    border-end-start-radius: 4px;
    border-end-end-radius: 4px;
    @media (width < 768px) {
      padding-block: var(--spacing-lg) var(--spacing-2xl);
      padding-inline: var(--content-padding);
    }
    a.c-button__link-register,
    button.c-button__link-em {
      @media (width < 344px) {
        inline-size: calc(100cqi - var(--spacing-sm) * 4);
        min-inline-size: unset;
      }
    }
  }
  .c-login__title {
    font-size: var(--font-size-22);
    line-height: var(--line-height-title);
    color: var(--color-primary);
    text-align: center;
    @media (width < 768px) {
      font-size: var(--font-size-20);
    }
  }
  .c-login__description {
    padding-block-end: var(--spacing-lg);
    margin-block-start: var(--spacing-xs);
    line-height: var(--line-height-text);
    color: var(--color-text-gray);
    text-align: center;
    @media (width < 768px) {
      padding-block-end: var(--spacing-md);
      font-size: var(--font-size-small-1);
      text-align: unset;
    }
    :where(span) {
      display: inline-block;
    }
  }
  .c-login__entry {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    padding-block-end: var(--spacing-md);
    @media (width < 768px) {
      gap: var(--spacing-sm);
    }
  }
  .c-login__cta {
    display: grid;
    grid-template-columns: auto;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-block-end: var(--spacing-2xl);
    @media (width < 768px) {
      gap: var(--spacing-xs);
    }
    div.c-button {
      @media (width < 768px) {
        margin-block-start: var(--spacing--spacing-no);
      }
    }
  }
  .c-login__cta-check {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: center;
  }
  .c-login__input {
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-s);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-jp-medium);
    line-height: var(--line-height-button);
    appearance: none;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-normal);
    &::placeholder {
      color: var(--color-text-placeholder);
    }
  }
  .c-login__hr {
    margin: 0;
    border: 1px solid var(--color-border-light);
  }
  .c-login__register {
    display: grid;
    grid-template-columns: auto;
    gap: var(--spacing-sm);
    justify-content: center;
    padding-block-start: var(--spacing-xl);
    div.c-button {
      @media (width < 768px) {
        margin-block-start: var(--spacing--spacing-no);
      }
    }
  }
}
@layer component {
  .c-side-search {
    inline-size: 100%;
  }
  .c-side-search__body {
    padding-block-start: var(--spacing-s);
    background: var(--color-lightest);
  }
  @media (width < 940px) {
    .c-side-search__body {
      display: none;
    }
  }
  .c-side-search__title {
    --_bar-size-x: 6px;
    position: relative;
    display: flex;
    gap: var(--spacing-xs);
    align-items: flex-start;
    align-self: stretch;
    padding-inline-start: calc(var(--_bar-size-x) + var(--spacing-xs));
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-20);
    font-weight: 700;
    line-height: var(--line-height-title);
    letter-spacing: 1px;
  }
  .c-side-search__title:before {
    position: absolute;
    inset: 0;
    display: inline-block;
    inline-size: var(--_bar-size-x);
    block-size: 24px;
    margin-block: auto auto;
    margin-inline: 0 auto;
    content: "";
    background-color: var(--color-secondary);
  }
  .c-side-search__search {
    padding-block: 0 var(--spacing-xs);
    padding-inline: var(--spacing-sm);
  }
  .c-side-search__search-label {
    position: relative;
    display: grid;
    grid-template-columns: 16px auto;
    gap: var(--spacing-xs);
    align-items: center;
    align-self: stretch;
    inline-size: 100%;
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-xs);
    font-size: var(--font-size-small);
    font-style: normal;
    font-weight: 500;
    background: var(--color-lightest);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-normal);
    &:before {
      inset: 0;
      inline-size: 16px;
      block-size: 16px;
      margin-block: auto;
      margin-inline: 0 auto;
      content: "";
      background-image: url(../images/common/icon-search.svg);
    }
  }
  .c-side-search__search-label-input {
    inline-size: 100%;
    max-inline-size: 100%;
    line-height: var(--line-height-button);
    appearance: none;
    border: none;
    &:focus {
      outline: unset;
    }
    &::placeholder {
      color: var(--color-text-placeholder);
    }
  }
  .c-side-search__criteria {
    padding-inline: var(--spacing-sm);
  }
  .c-side-search__criteria-body {
    position: relative;
    padding-block: var(--spacing-xs);
    &:after {
      display: block;
      inline-size: calc(100% + var(--spacing-sm) * 2);
      block-size: 1px;
      margin-inline: calc(var(--spacing-sm) * -1);
      content: "";
      background-color: var(--color-border-light);
      translate: 0 var(--spacing-xs);
    }
  }
  .c-side-search__subtitle {
    display: grid;
    align-items: center;
    margin-block-end: var(--spacing-x-min);
  }
  .c-side-search__subtitle-text {
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: 700;
    font-feature-settings: "palt" on;
    line-height: var(--line-height-button);
    letter-spacing: 0.8px;
  }
  .c-side-search__subtitle:has(.c-button-dialog) {
    grid-template-columns: auto 76px;
  }
  .c-side-search__subtitle > button {
    gap: var(--spacing-x-min);
    align-items: center;
    justify-content: center;
    padding-block: var(--spacing-min);
    padding-inline: var(--spacing-md);
    font-size: var(--font-size-small-1);
  }
  .c-side-search__select {
    display: grid;
    grid-template-columns: auto;
    padding-block-end: var(--spacing-x-min);
    padding-inline-start: var(--spacing-min);
  }
  .c-side-search__empty {
    padding-block: var(--spacing-min);
    font-size: var(--font-size-small);
    font-feature-settings: "palt" on;
    line-height: var(--line-height-button);
  }
  .c-side-search__controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
    align-items: center;
    align-self: stretch;
    padding-block: var(--spacing-s) var(--spacing-md);
    padding-inline: var(--spacing-sm);
  }
  .c-side-search__controls-result {
    display: flex;
    gap: var(--spacing-min);
    align-items: baseline;
  }
  .c-side-search__controls-result-text {
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: 500;
    line-height: var(--line-height-button);
  }
  .c-side-search__controls-result-count {
    margin-inline-start: calc(var(--spacing-s) - var(--spacing-min));
    font-size: var(--font-size-24);
    font-weight: 700;
    line-height: var(--line-height-button);
    color: var(--color-secondary);
  }
  .c-side-search__controls-button {
    display: flex;
    justify-content: center;
    inline-size: 100%;
  }
  .c-side-search__controls-button-body {
    position: relative;
    display: inline-block;
    inline-size: 100%;
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-xl);
    font-weight: 700;
    line-height: var(--line-height-button);
    color: var(--color-lightest);
    text-align: center;
    background-color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-normal);
    transition:
      background-color 0.2s ease-in-out,
      border-color 0.2s ease-in-out;
  }
  .c-side-search__controls-button-body:after {
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--spacing-sm);
    inline-size: 16px;
    block-size: 16px;
    margin-block: auto;
    content: "";
    background-image: url(../images/common/icon-arrow-white-right.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 16px 16px;
    transition: inset-inline-end 0.2s ease-in-out;
  }
  @media (any-hover: hover) {
    .c-side-search__controls-button-body {
      &:hover {
        background-color: var(--color-text-link-hover);
        border-color: var(--color-text-link-hover);
        &:after {
          inset-inline-end: var(--spacing-s);
        }
      }
    }
  }
  .c-side-search__controls-clear {
    display: flex;
    justify-content: center;
  }
  .c-side-search__controls-clear-button {
    position: relative;
    display: flex;
    gap: var(--spacing-x-min);
    align-items: center;
    padding-block-end: var(--spacing-x-min);
    font-size: var(--font-size-small);
    font-style: normal;
    font-weight: 500;
    line-height: var(--line-height-button);
    border: none;
    border-block-end: 1px solid var(--color-text-primary);
    transition-timing-function: ease-in;
    transition-duration: 0.3s;
    transition-property: color, border-color;
    &[inert] {
      color: var(--color-text-link-disable);
      border-color: var(--color-text-link-disable);
    }
    &[inert]:after {
      filter: brightness(0) saturate(100%) invert(80%) sepia(0) saturate(0) hue-rotate(283deg) brightness(95%) contrast(105%);
    }
  }
  @media (any-hover: hover) {
    .c-side-search__controls-clear-button:hover {
      color: var(--color-text-gray);
      border-color: #0000;
    }
  }
  .c-side-search__controls-clear-button:after {
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 16px;
    block-size: 16px;
    content: "";
    background: url(../images/common/icon-cancel.svg) no-repeat 50% / contain;
  }
  .c-side-search__menu {
    position: relative;
    inline-size: 100%;
  }
  @media (width >= 940px) {
    .c-side-search__menu {
      display: none;
    }
  }
  .c-side-search__menu-controls {
    display: grid;
    grid-template-columns: 1fr 40px;
    gap: var(--spacing-min);
    align-items: stretch;
  }
  .c-side-search__menu-keywords {
    inline-size: 100%;
  }
  .c-side-search__menu-keywords-label {
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 16px auto;
    gap: var(--spacing-xs);
    align-items: center;
    inline-size: 100%;
    block-size: 100%;
    padding-block: calc(var(--spacing-s) - var(--spacing-x-min));
    padding-inline: var(--spacing-s);
    font-size: var(--font-size-small);
    font-weight: 500;
    line-height: var(--line-height-button);
    background: var(--color-lightest);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-normal);
    &:before {
      inset: 0;
      inline-size: 16px;
      block-size: 16px;
      margin-block: auto;
      margin-inline: 0 auto;
      content: "";
      background-image: url(../images/common/icon-search.svg);
    }
  }
  .c-side-search__menu-keywords-input {
    inline-size: 100%;
    max-inline-size: 100%;
    padding: 0;
    line-height: var(--line-height-button);
    appearance: none;
    border: none;
    &:focus {
      outline: unset;
    }
    &::placeholder {
      color: var(--color-text-placeholder);
    }
  }
  .c-side-search__menu-controls-button,
  .c-side-search__menu-status-button {
    display: flex;
    justify-content: center;
  }
  .c-side-search__menu-controls-button-body,
  .c-side-search__menu-status-button-body {
    position: relative;
    display: grid;
    place-content: center;
    inline-size: 40px;
    min-block-size: 41px;
    line-height: var(--line-height-button);
    appearance: none;
    background: var(--color-bg-link-normal);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-normal);
  }
  .c-side-search__menu-status-button {
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
    flex-shrink: 0;
    padding-inline: var(--spacing-sm) var(--spacing-xs);
    margin-inline-end: var(--spacing-xs);
    background: var(--color-bg-secondary);
    border-inline-end: 1px solid var(--color-border-light);
  }
  .c-side-search__menu-status {
    position: relative;
    display: flex;
    inline-size: 100vw;
    padding-block: var(--spacing-xs);
    padding-inline-start: var(--spacing-sm);
    margin-inline: calc(var(--spacing-sm) * -1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    &:has(.c-side-search__menu-status-button) {
      margin-inline: calc(var(--spacing-lg) * -1);
    }
  }
  .c-side-search__menu-status-list {
    position: relative;
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    inline-size: max-content;
    padding: 0;
    padding-inline-end: var(--spacing-sm);
    list-style: none;
  }
  .c-side-search__menu-status-item {
    min-inline-size: fit-content;
  }
  .c-side-search__menu-status-item-button {
    position: relative;
    display: inline-flex;
    gap: var(--spacing-x-min);
    align-items: center;
    justify-content: center;
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-xs);
    font-size: var(--font-size-small-1);
    font-weight: 500;
    line-height: var(--line-height-button);
    color: var(--color-text-primary);
    white-space: nowrap;
    appearance: none;
    cursor: pointer;
    background: var(--color-bg-link-normal);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-normal);
  }
  .c-side-search__menu-status-item-button[aria-expanded="true"]:after {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 2px;
    margin-block: auto calc(var(--spacing-xs) * -1 - 1px);
    margin-inline: auto auto;
    content: "";
    background-color: var(--color-secondary);
  }
  .c-side-search__menu-status-item-button-text {
    font-feature-settings: "palt" on;
  }
  .c-side-search__menu-status-item-button-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: fit-content;
    min-inline-size: 14px;
    block-size: 14px;
    padding-inline: var(--spacing-min);
    font-size: var(--font-size-small-3);
    font-weight: 700;
    line-height: 1;
    color: var(--color-lightest);
    background-color: var(--color-secondary);
    border-radius: var(--radius-max);
  }
  .c-side-search__menu-status-item-button-icon {
    inline-size: 12px;
    block-size: 12px;
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
    transition-property: rotate;
  }
  .c-side-search__menu-status-item-button[aria-expanded="true"] .c-side-search__menu-status-item-button-icon {
    rotate: 180deg;
  }
  .c-side-search__menu-status-item-button:has(.c-side-search__menu-status-item-button-count) {
    background: var(--color-bg-select);
    border-color: var(--color-bg-select);
  }
  .c-side-search__menu-status-item-button:has(.c-side-search__menu-status-item-button-count) .c-side-search__menu-status-item-button-text {
    font-weight: 700;
    color: var(--color-secondary);
  }
  @media (any-hover: hover) {
    .c-side-search__menu-status-item-button:hover {
      border-color: var(--color-text-link-hover);
    }
  }
}
@layer component {
  .c-search-panel {
    inline-size: 100%;
    padding-block: var(--spacing-md);
    margin-block-end: var(--search-panel-mbe-pc, var(--spacing-3xl));
    background-color: var(--color-bg-tertiary);
    @media (width < 768px) {
      margin-block-end: var(--search-panel-mbe-sp, var(--search-panel-mbe-pc, var(--spacing-xl)));
    }
    [class="c-page-sub"] & {
      padding-block: var(--spacing-sm);
      margin-block-end: 0;
      background-color: var(--color-bg-secondary);
    }
  }
  .c-search-panel__inner {
    max-inline-size: calc(var(--view-size-content-main) + var(--spacing-lg));
    padding-inline: var(--spacing-sm);
    margin-inline: auto;
    [class="c-page-sub"] & {
      @media (width < 768px) {
        padding-inline: var(--spacing-s);
      }
    }
  }
  .c-search-panel__search {
    display: flex;
    gap: var(--spacing-xs) 0;
    @media (768px <=width) {
      align-items: center;
    }
    [class="c-page-sub"] & {
      gap: var(--spacing-xs) var(--spacing-sm);
      @media (width < 1050px) {
        flex-direction: column;
        align-items: start;
      }
    }
  }
  .c-search-panel__search-inner {
    display: flex;
    flex-grow: 1;
    gap: var(--spacing-xs) 0;
    inline-size: 100%;
    @media (768px <=width) {
      align-items: center;
    }
  }
  .c-search-panel__search-wrap {
    display: flex;
    flex-grow: 1;
    gap: var(--spacing-min);
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-sm) 0;
    background-color: var(--color-lightest);
    border-start-start-radius: var(--radius-normal);
    border-end-start-radius: var(--radius-normal);
    @media (width < 768px) {
      padding-block: var(--spacing-s);
      padding-inline: var(--spacing-xs) 1.25rem;
    }
    &:has(.c-search-suggest) {
      @media (width <= 900px) {
        border-end-start-radius: 0;
      }
    }
    [class="c-page-sub"] & {
      @media (width > 940px) {
        min-block-size: 55px;
      }
      @media (width < 768px) {
        padding-inline: var(--spacing-xs) var(--spacing-s);
      }
    }
  }
  .c-search-panel__select-buttons {
    display: flex;
    flex-shrink: 0;
    line-height: 1;
    @media (width <= 900px) {
      display: none;
    }
    [class="c-page-sub"] & {
      display: flex;
      @media (width < 576px) {
        display: none;
      }
    }
  }
  .c-search-panel__select-button {
    position: relative;
    display: inline-block;
    max-inline-size: 140px;
    padding-block: 0;
    padding-inline: var(--spacing-sm) var(--spacing-lg);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-jp-bold);
    line-height: var(--line-height-button);
    color: var(--color-darkest);
    white-space: nowrap;
    background: none;
    border: none;
    border-inline-end: 1px solid var(--color-border-light);
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
    transition-property: color;
    &:focus-visible {
      color: var(--color-text-link-hover);
    }
    [class="c-page-sub"] & {
      padding-inline: var(--spacing-s) 1.75rem;
      font-size: var(--font-size-small);
      @media (width < 768px) {
        font-size: var(--font-size-small-1);
      }
      &:after,
      &:before {
        inset-inline-end: var(--spacing-s);
      }
      &:first-child {
        padding-inline-start: 0;
      }
    }
    &:after,
    &:before {
      position: absolute;
      inset-inline-end: var(--spacing-sm);
      display: inline-block;
      inline-size: var(--spacing-s);
      block-size: 2px;
      vertical-align: middle;
      content: "";
      background-color: var(--color-darkest);
      transition-timing-function: ease-in;
      transition-duration: 0.2s;
      transition-property: background-color, rotate;
    }
    &:before {
      inset-block-start: 50%;
    }
    &:after {
      inset-block: 50% auto;
      rotate: 90deg;
    }
    &:has(+ .c-search-panel__select-dialog[open]) {
      &:after {
        rotate: 180deg;
      }
    }
    &:has(+ .c-dialog-area__dialog[open]),
    &:has(+ .c-dialog-job__dialog[open]),
    &:has(+ .c-dialog-salary__dialog[open]) {
      &:after {
        rotate: 180deg;
      }
    }
  }
  @media (any-hover: hover) {
    .c-search-panel__select-button:hover {
      color: var(--color-text-gray);
      &:after,
      &:before {
        background-color: var(--color-text-gray);
      }
    }
  }
  .c-search-panel__search-box {
    position: relative;
    display: grid;
    flex-grow: 1;
    grid-template-columns: 16px 1fr;
    gap: var(--spacing-xs);
    align-items: center;
    @media (width >= 900px) {
      padding-inline: var(--spacing-md) var(--spacing-sm);
    }
    [class="c-page-sub"] & {
      @media (width >= 900px) {
        gap: var(--spacing-min);
        padding-inline: var(--spacing-min) var(--spacing-sm);
      }
    }
  }
  .c-search-panel__search-icon {
    display: grid;
    place-items: center;
    inline-size: 16px;
    block-size: 16px;
  }
  .c-search-panel__search-icon img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    filter: brightness(0);
  }
  .c-search-panel__search-field {
    min-inline-size: 0;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-jp-medium);
    line-height: 1;
    color: var(--color-text-primary);
    appearance: none;
    background: #0000;
    border: none;
    @media (width < 768px) {
      font-size: var(--font-size-small-1);
    }
    [class="c-page-sub"] & {
      font-size: var(--font-size-small);
      @media (width < 768px) {
        font-size: var(--font-size-small-1);
      }
    }
  }
  .c-search-panel__search-field::placeholder {
    color: var(--color-text-placeholder);
  }
  .c-search-panel__search-field:focus {
    outline: none;
  }
  .c-search-panel__controls {
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing-sm);
    align-items: center;
    @media (width < 768px) {
      gap: var(--spacing-xs);
    }
  }
  .c-search-panel__controls-submit {
    position: relative;
    padding: var(--spacing-sm);
    font-weight: var(--font-weight-jp-bold);
    color: var(--color-lightest);
    letter-spacing: 0.1em;
    background: var(--color-darkest);
    border: none;
    border-start-end-radius: var(--radius-normal);
    border-end-end-radius: var(--radius-normal);
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
    transition-property: color, background-color;
    @media (width < 768px) {
      block-size: 100%;
      padding-block: var(--spacing-s);
      padding-inline: var(--spacing-min);
      font-size: var(--font-size-small-1);
    }
    [class="c-page-sub"] & {
      font-size: var(--font-size-small);
      @media (width > 940px) {
        min-block-size: 55px;
      }
      @media (width < 768px) {
        padding-inline: var(--spacing-xs);
        font-size: var(--font-size-small-1);
      }
    }
    &:focus-visible {
      color: var(--color-secondary);
      background: var(--color-lightest);
    }
  }
  @media (any-hover: hover) {
    .c-search-panel__controls-submit:hover {
      background-color: var(--color-text-gray);
    }
  }
  .c-search-panel__controls-clear {
    position: relative;
    font-size: var(--font-size-small);
    line-height: var(--line-height-title);
    color: var(--color-darkest);
    text-align: center;
    text-decoration: underline;
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
    transition-property: color;
    @media (width < 768px) {
      font-size: var(--font-size-small-2);
    }
    > span {
      display: block;
    }
    [class="c-page-sub"] & {
      flex-shrink: 0;
      > a > span {
        @media (width > 1050px) {
          display: block;
        }
      }
    }
  }
  @media (any-hover: hover) {
    .c-search-panel__controls-clear > a:hover,
    a.c-search-panel__controls-clear:hover {
      color: var(--color-text-gray);
    }
  }
  .c-search-panel__select-dialog {
    &::backdrop {
      background-color: var(--color-bg-modal);
    }
  }
  .c-search-panel__select-dialog-wrap {
    z-index: 10;
    inline-size: 47.5rem;
    max-inline-size: 100%;
    block-size: 100%;
    max-block-size: calc(100vh - var(--spacing-5xl));
    background-color: var(--color-lightest);
  }
  .c-search-panel__select-dialog-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 3;
    display: grid;
    gap: var(--spacing-xs);
    padding-block-start: var(--spacing-md);
    padding-inline: var(--spacing-md);
    background-color: var(--color-lightest);
  }
  .c-search-panel__select-dialog-heading {
    display: flex;
    justify-content: space-between;
    h2 {
      font-size: var(--font-size-20);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
    }
  }
  .c-search-panel__select-dialog-selected {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    padding: var(--spacing-s);
    background-color: var(--color-bg-secondary);
    > h3 {
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
    }
  }
  .c-search-panel__select-dialog-selected-contents {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: center;
  }
  .c-search-panel__select-dialog-selected-item {
    display: flex;
    gap: var(--spacing-min);
    align-items: center;
    padding-block: var(--spacing-min);
    padding-inline: var(--spacing-xs);
    font-size: var(--font-size-small-1);
    font-weight: var(--font-weight-jp-bold);
    line-height: var(--line-height-button);
    color: var(--color-primary);
    background-color: var(--color-bg-select);
    border: 1px solid var(--color-bg-select);
    border-radius: var(--radius-normal);
    > span {
      position: relative;
      display: block;
      inline-size: var(--spacing-s);
      block-size: var(--spacing-s);
      padding: var(--spacing-x-min);
      font-size: 0;
      background: #0000;
      border: none;
      transition: background 0.3s;
      &:after,
      &:before {
        position: absolute;
        inset-inline-start: 0;
        display: inline-block;
        inline-size: 100%;
        block-size: 1.5px;
        vertical-align: middle;
        content: "";
        background: var(--color-primary);
        transition:
          rotate 0.3s,
          transform 0.3s;
      }
      &:before {
        inset-block-start: 50%;
        rotate: 45deg;
      }
      &:after {
        inset-block: 50% auto;
        rotate: -45deg;
      }
    }
  }
  .c-search-panel__select-dialog-close {
    position: relative;
    display: block;
    inline-size: var(--spacing-md);
    block-size: var(--spacing-md);
    padding: 0;
    font-size: 0;
    background: #0000;
    border: none;
    transition: background 0.3s;
    &:after,
    &:before {
      position: absolute;
      inset-inline-start: 0;
      display: inline-block;
      inline-size: 100%;
      block-size: 1.5px;
      vertical-align: middle;
      content: "";
      background: var(--color-primary);
      transition:
        rotate 0.3s,
        transform 0.3s;
    }
    &:before {
      inset-block-start: 50%;
      rotate: 45deg;
    }
    &:after {
      inset-block: 50% auto;
      rotate: -45deg;
    }
  }
  .c-search-panel__select-dialog-inner {
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-md);
    overflow-y: auto;
  }
  .c-search-panel__select-contents {
    > details {
      padding-block: var(--spacing-s);
      padding-inline: var(--spacing-min);
      font-weight: var(--font-weight-jp-medium);
      &:not(:last-child) {
        border-block-end: 1px solid var(--color-border-light);
      }
      > summary {
        display: flex;
        align-items: center;
        &:after {
          position: relative;
          display: inline-block;
          justify-self: end;
          inline-size: 1.5rem;
          block-size: 1.5rem;
          margin-inline-start: auto;
          vertical-align: middle;
          content: "";
          background-color: var(--color-bg-category);
          background-image: url(../images/common/icon-arrow-primary-down.svg);
          background-repeat: no-repeat;
          background-position: 50%;
          background-size: auto;
          transition: rotate 0.3s;
        }
      }
    }
  }
  .c-search-panel__search-item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-min);
    margin-block-start: var(--spacing-xs);
    &:has(input[type="radio"]) {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--spacing-sm);
    }
  }
  .c-search-panel__select-bar {
    position: sticky;
    inset-block-end: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-2xl);
    background-color: var(--color-lightest);
    border-block-start: 1px solid var(--color-border-light);
    @media (width < 768px) {
      flex-direction: column;
      gap: var(--spacing-sm);
      align-items: center;
    }
  }
  .c-search-panel__select-bar-count {
    display: flex;
    gap: var(--spacing-min);
    align-items: flex-end;
    padding-block-end: var(--spacing-min);
    font-weight: var(--font-weight-jp-medium);
    color: var(--color-text-primary);
  }
  .c-search-panel__select-bar-count-text {
    display: inline-block;
    margin-block-end: var(--spacing-x-min);
    font-weight: 500;
    line-height: 1.3;
  }
  .c-search-panel__select-bar-count-num {
    display: flex;
    gap: var(--spacing-min);
    align-items: baseline;
    justify-content: center;
  }
  .c-search-panel__select-bar-count-num-value {
    font-size: var(--font-size-26);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-secondary);
  }
  .c-search-panel__select-bar-count-num-unit {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-jp-medium);
    line-height: 1.3;
    color: var(--color-text-primary);
  }
  .c-search-panel__select-bar-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
  }
  .c-search-panel__select-bar-clear {
    position: relative;
    display: flex;
    gap: var(--spacing-x-min);
    align-items: center;
    padding-block-end: var(--spacing-x-min);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-jp-medium);
    line-height: 1.3;
    border-block-end: 1px solid var(--color-text-primary);
    transition-timing-function: ease-in;
    transition-duration: 0.3s;
    transition-property: color, border-color;
    &[inert] {
      color: var(--color-text-link-disable);
      border-color: var(--color-text-link-disable);
    }
    &[inert]:after {
      filter: brightness(0) saturate(100%) invert(80%) sepia(0) saturate(0) hue-rotate(283deg) brightness(95%) contrast(105%);
    }
    &:hover {
      @media (any-hover: hover) {
        color: var(--color-text-gray);
        text-decoration: none;
        border-left-color: #0000;
        border-bottom-color: #0000;
        border-right-color: #0000;
        border-top-color: #0000;
      }
    }
    &:after {
      inset-block: 0;
      inset-inline-end: 0;
      inline-size: 12px;
      block-size: 12px;
      content: "";
      background: url(../images/common/icon-cancel.svg) no-repeat 50% / contain;
    }
  }
  .c-search-panel__select-bar-submit {
    position: relative;
    display: flex;
    gap: var(--spacing-min);
    align-items: center;
    justify-content: center;
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-s);
    font-size: var(--font-size-large);
    color: var(--color-lightest);
    background: var(--color-secondary);
    border-radius: var(--radius-normal);
    transition-timing-function: ease-in;
    transition-duration: 0.3s;
    transition-property: color, background;
    &[inert] {
      background: var(--color-text-link-primary-disable);
    }
  }
}
@layer component {
  .c-pagetop {
    position: fixed;
    inset-block-end: 12px;
    inset-inline-end: 12px;
    z-index: 10;
    display: block;
    inline-size: auto;
    @media (width < 768px) {
      inset-block-end: 8px;
      inset-inline-end: 8px;
    }
    &:has(+ .c-sticky-cta-register) {
      inset-block-end: 91px;
      @media (width < 768px) {
        inset-block-end: 100px;
      }
    }
    &:has(+ .c-sticky-cta-register[data-on-footer="true"]) {
      inset-block-end: 12px;
      @media (width < 768px) {
        inset-block-end: 8px;
      }
    }
    &:has(+ .c-sticky-cta) {
      inset-block-end: 93px;
      @media (width < 768px) {
        inset-block-end: 80px;
      }
    }
    &:has(+ .c-sticky-cta[data-on-footer="true"]) {
      inset-block-end: 12px;
      @media (width < 768px) {
        inset-block-end: 8px;
      }
    }
    > a {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      inline-size: var(--spacing-3xl);
      block-size: var(--spacing-3xl);
      padding: var(--spacing-x-min);
      font-family: var(--font-family-en);
      font-size: var(--font-size-small-1);
      font-weight: var(--font-weight-en-medium);
      line-height: var(--line-height-button);
      color: var(--color-lightest);
      text-align: center;
      letter-spacing: 0.1em;
      background-color: var(--color-secondary);
      border-radius: var(--radius-normal);
      @media (width < 768px) {
        inline-size: var(--spacing-2xl);
        block-size: var(--spacing-2xl);
      }
      &:before {
        position: relative;
        display: inline-block;
        inline-size: var(--spacing-md);
        block-size: var(--spacing-md);
        vertical-align: middle;
        content: "";
        background: url(../images/common/icon-arrow-white-down.svg) no-repeat 50% / cover;
        rotate: 180deg;
        @media (width < 768px) {
          inline-size: var(--spacing-sm);
          block-size: var(--spacing-sm);
        }
      }
    }
  }
}
@layer component {
  .c-search-suggest {
    --_border-size: 1px;
    position: absolute;
    inset-block-start: calc(100% + var(--spacing-sm));
    inset-inline-start: 0;
    z-index: 3;
    inline-size: 100%;
    padding: 0;
    padding-block-end: var(--spacing-min);
    padding-inline: var(--spacing-sm);
    margin: 0;
    list-style: none;
    background: var(--color-lightest);
    border: 1px solid var(--color-bg-tertiary);
    @media (width <= 900px) {
      inset-inline-start: calc(var(--spacing-sm) * -1 - var(--_border-size));
      inline-size: calc(100% + var(--spacing-sm) + var(--_border-size) * 2);
    }
    @media (width < 768px) {
      inset-block-start: calc(100% + var(--spacing-s));
      inset-inline-start: calc(-0.5rem - 1px);
      inline-size: calc(100vw - 2rem);
      padding-inline: var(--spacing-s);
      border-block-start: 0;
    }
    [class="c-search-recruitment__search-inner"] + & {
      position: static;
      max-block-size: calc(100vh - 119px);
      padding-inline: 0;
      overflow-y: auto;
      border: none;
      -webkit-overflow-scrolling: touch;
      > li {
        > a {
          padding-inline: var(--spacing-x-min);
          &:after {
            background-image: url(../images/common/icon-arrow-blank.svg);
          }
        }
      }
    }
    &[data-suggest-type="history"] {
      inset-block-start: calc(100% - var(--_border-size));
      inset-inline-start: 0;
      inline-size: 100%;
      padding-inline: unset;
      > li {
        > a {
          padding-inline: var(--spacing-s);
        }
      }
    }
    > li {
      &:not(:last-child) {
        border-block-end: 1px solid var(--color-bg-tertiary);
      }
      &[data-type="suggest"] {
        a:before {
          background: url(../images/common/icon-search-gray.svg) no-repeat 50%/100% auto;
        }
      }
      &[data-type="history"] {
        a:before {
          background: url(../images/common/icon-history-gray.svg) no-repeat 50%/100% auto;
        }
      }
      > a {
        display: grid;
        flex-grow: 1;
        grid-template-columns: 16px 1fr 16px;
        gap: var(--spacing-xs);
        align-items: center;
        padding-block: var(--spacing-s);
        padding-inline: var(--spacing-xs);
        font-size: var(--font-size-small);
        line-height: var(--line-height-button);
        color: var(--color-text-gray);
        &:after,
        &:before {
          position: relative;
          display: inline-block;
          inline-size: var(--spacing-sm);
          block-size: var(--spacing-sm);
          vertical-align: middle;
          content: "";
        }
        &:after {
          background: url(../images/common/icon-arrow-gray-right.svg) no-repeat 50%/100% auto;
        }
      }
    }
  }
}
@layer component {
  .c-dialog {
    inline-size: 47.5rem;
    min-block-size: 100dvh;
    max-block-size: calc(100vh - var(--modal-padding-sum));
    overflow: hidden;
    font-family: var(--font-family-number);
    outline: none;
    background: #0000;
    border: none;
    box-shadow: none;
    @media (width < 768px) {
      inline-size: calc(100vw - var(--spacing-sm) * 2);
      max-block-size: calc(100dvh - var(--modal-padding-sum));
    }
    &::backdrop {
      background-color: var(--color-bg-modal);
    }
    &[open] {
      display: grid;
      place-content: center;
    }
  }
  .c-dialog__wrap {
    z-index: 10;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    inline-size: 47.5rem;
    max-inline-size: 100%;
    block-size: fit-content;
    max-block-size: calc(100dvh - var(--modal-padding-sum));
    overflow: hidden;
  }
  @media (width < 768px) {
    .c-dialog__wrap {
      inline-size: calc(100vw - var(--spacing-sm) * 2);
      max-block-size: calc(100dvh - var(--modal-padding-sum));
    }
  }
  .c-dialog__head {
    z-index: 3;
    display: grid;
    gap: var(--spacing-xs);
    padding-block-start: var(--spacing-md);
    padding-inline: var(--spacing-md);
    background-color: var(--color-lightest);
    @media (width < 768px) {
      padding-block-start: var(--spacing-sm);
      padding-inline: var(--spacing-s);
    }
  }
  .c-dialog__heading {
    display: flex;
    justify-content: space-between;
    h2 {
      font-size: var(--font-size-20);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
    }
  }
  .c-dialog__selected {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    padding: var(--spacing-s);
    background-color: var(--color-bg-secondary);
    > h3 {
      flex-shrink: 0;
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
    }
  }
  @media (width < 768px) {
    .c-dialog__selected {
      flex-direction: column;
      gap: var(--spacing-min);
      align-items: flex-start;
    }
  }
  .c-dialog__selected-contents {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: center;
  }
  .c-dialog__selected-item {
    display: flex;
    gap: var(--spacing-min);
    align-items: center;
    padding-block: var(--spacing-min);
    padding-inline: var(--spacing-xs);
    font-size: var(--font-size-small-1);
    font-weight: var(--font-weight-jp-bold);
    line-height: var(--line-height-button);
    color: var(--color-primary);
    background-color: var(--color-bg-select);
    border: 1px solid var(--color-bg-select);
    border-radius: var(--radius-normal);
    > span {
      position: relative;
      display: block;
      inline-size: var(--spacing-s);
      block-size: var(--spacing-s);
      padding: var(--spacing-x-min);
      font-size: 0;
      background: #0000;
      border: none;
      transition: background 0.3s;
      &:after,
      &:before {
        position: absolute;
        inset-inline-start: 0;
        display: inline-block;
        inline-size: 100%;
        block-size: 1.5px;
        vertical-align: middle;
        content: "";
        background: var(--color-primary);
        transition:
          rotate 0.3s,
          transform 0.3s;
      }
      &:before {
        inset-block-start: 50%;
        rotate: 45deg;
      }
      &:after {
        inset-block: 50% auto;
        rotate: -45deg;
      }
    }
  }
  .c-dialog__close {
    position: relative;
    display: block;
    inline-size: var(--spacing-md);
    block-size: var(--spacing-md);
    padding: 0;
    font-size: 0;
    background: #0000;
    border: none;
    transition: background 0.3s;
    &:after,
    &:before {
      position: absolute;
      inset-inline-start: 0;
      display: inline-block;
      inline-size: 100%;
      block-size: 1.5px;
      vertical-align: middle;
      content: "";
      background: var(--color-primary);
      transition:
        rotate 0.3s,
        transform 0.3s;
    }
    &:before {
      inset-block-start: 50%;
      rotate: 45deg;
    }
    &:after {
      inset-block: 50% auto;
      rotate: -45deg;
    }
  }
  .c-dialog__inner {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-block-size: 0;
    background-color: var(--color-lightest);
  }
  .c-dialog__contents {
    min-block-size: 0;
    padding-block: var(--spacing-s) 0;
    padding-inline: var(--spacing-md);
    overflow-y: auto;
    overscroll-behavior-block: contain;
    @media (width < 768px) {
      padding-block: var(--spacing-xs) 0;
      padding-inline: var(--spacing-s);
    }
    > details {
      padding-block: var(--spacing-s);
      padding-inline: var(--spacing-min);
      font-size: var(--font-size-small);
      &:not(:last-child) {
        border-block-end: 1px solid var(--color-border-light);
      }
      > summary {
        position: relative;
        display: flex;
        align-items: center;
        font-size: var(--font-size-small);
        line-height: var(--line-height-button);
        > span > span {
          display: inline-block;
        }
        details[open] & {
          &:before {
            rotate: 180deg;
          }
        }
        &:before {
          position: absolute;
          inset-block: 0;
          inset-inline: auto 0.25rem;
          z-index: 2;
          inline-size: 1rem;
          block-size: 1rem;
          margin-block: auto;
          margin-inline: 0;
          background: url(../images/common/icon-arrow-gray-down.svg) no-repeat 50%/100% auto;
          opacity: 1;
        }
        &:after,
        &:before {
          display: inline-block;
          vertical-align: middle;
          content: "";
          transition: rotate 0.3s;
        }
        &:after {
          position: relative;
          justify-self: end;
          inline-size: 1.5rem;
          block-size: 1.5rem;
          margin-inline-start: auto;
          background-color: var(--color-bg-category);
        }
      }
    }
  }
  .c-dialog:has(.c-dialog__image) {
    inline-size: max-content;
  }
  .c-dialog:has(.c-dialog__image) .c-dialog__wrap {
    inline-size: max-content;
    max-inline-size: 1600px;
  }
  .c-dialog:has(.c-dialog__image) .c-dialog__contents {
    padding: 0;
  }
  .c-dialog__image {
    display: block;
    inline-size: auto;
    max-inline-size: 100%;
    block-size: auto;
  }
  @media (992px <=width) {
    .c-dialog:has(.c-dialog__image) {
      max-inline-size: calc(100vw - var(--spacing-lg) * 2);
    }
    .c-dialog:has(.c-dialog__image) .c-dialog__wrap {
      inline-size: 100%;
    }
    .c-dialog:has(.c-dialog__image) .c-dialog__contents {
      display: grid;
      place-items: center;
      padding-block: var(--spacing-sm);
      padding-inline: var(--spacing-lg);
    }
    .c-dialog__image {
      max-block-size: 100%;
      margin-inline: auto;
    }
  }
  @media (width < 768px) {
    .c-dialog:has(.c-dialog__image),
    .c-dialog:has(.c-dialog__image) .c-dialog__wrap {
      inline-size: calc(100vw - var(--spacing-sm) * 2);
    }
    .c-dialog:has(.c-dialog__image) .c-dialog__contents {
      padding: 0;
    }
  }
  @media (768px <=width < 992px) {
    .c-dialog:has(.c-dialog__image),
    .c-dialog:has(.c-dialog__image) .c-dialog__wrap {
      inline-size: calc(100vw - var(--spacing-sm) * 2);
    }
    .c-dialog:has(.c-dialog__image) .c-dialog__contents {
      padding: 0;
    }
  }
  .c-dialog__contents-item {
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-min) var(--spacing-xs);
    border-block-end: 1px solid var(--color-border-light);
    &:last-of-type {
      padding-block-end: var(--spacing-md);
      border-block-end: none;
    }
  }
  .c-dialog__contents-item-heading {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--spacing-xs);
    align-items: center;
    justify-content: flex-start;
  }
  .c-dialog__contents-item-heading-text {
    font-size: var(--font-size-base);
  }
  .c-dialog__contents-item-heading-count,
  .c-dialog__contents-item-heading-text {
    font-weight: var(--font-weight-jp-medium);
    line-height: var(--line-height-button);
  }
  .c-dialog__contents-item-heading-count {
    font-size: var(--font-size-small);
  }
  .c-dialog__search-item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-min);
    margin-block-start: var(--spacing-xs);
    &:has(input[type="radio"]) {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--spacing-sm);
    }
    &[data-sp-col="1"] {
      padding-block-end: calc(var(--spacing-2xl) - var(--spacing-s));
      @media (width < 768px) {
        padding-block-end: var(--spacing-lg);
      }
      &:has(input[type="radio"]) {
        @media (width < 768px) {
          grid-template-columns: auto;
          gap: var(--spacing-s);
        }
      }
    }
    label:is(.c-radio) {
      padding-block: 0;
    }
  }
  .c-dialog__bar {
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-2xl);
    background-color: var(--color-lightest);
    border-block-start: 1px solid var(--color-border-light);
    @media (width < 768px) {
      flex-direction: column;
      gap: var(--spacing-sm);
      align-items: center;
      padding-inline: unset;
    }
  }
  .c-dialog__bar-count {
    display: flex;
    gap: var(--spacing-min);
    align-items: flex-end;
    padding-block-end: var(--spacing-min);
    font-weight: var(--font-weight-jp-medium);
    color: var(--color-text-primary);
  }
  .c-dialog__bar-count-text {
    display: inline-block;
    margin-block-end: var(--spacing-x-min);
    font-weight: 500;
    line-height: 1.3;
  }
  .c-dialog__bar-count-num {
    display: flex;
    gap: var(--spacing-min);
    align-items: baseline;
    justify-content: center;
  }
  .c-dialog__bar-count-num-value {
    font-family: var(--font-family-en);
    font-size: var(--font-size-24);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-secondary);
  }
  .c-dialog__bar-count-num-unit {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-jp-medium);
    line-height: 1.3;
    color: var(--color-text-primary);
  }
  .c-dialog__bar-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
  }
  .c-dialog__bar-clear {
    position: relative;
    display: flex;
    gap: var(--spacing-x-min);
    align-items: center;
    padding-block-end: var(--spacing-x-min);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-jp-medium);
    line-height: 1.3;
    border-block-end: 1px solid var(--color-text-primary);
    transition-timing-function: ease-in;
    transition-duration: 0.3s;
    transition-property: color, border-color;
    &[inert] {
      color: var(--color-text-link-disable);
      border-color: var(--color-text-link-disable);
    }
    &[inert]:after {
      filter: brightness(0) saturate(100%) invert(80%) sepia(0) saturate(0) hue-rotate(283deg) brightness(95%) contrast(105%);
    }
    &:hover {
      @media (any-hover: hover) {
        color: var(--color-text-gray);
        text-decoration: none;
        border-left-color: #0000;
        border-bottom-color: #0000;
        border-right-color: #0000;
        border-top-color: #0000;
      }
    }
    &:after {
      inset-block: 0;
      inset-inline-end: 0;
      inline-size: 12px;
      block-size: 12px;
      content: "";
      background: url(../images/common/icon-cancel.svg) no-repeat 50% / contain;
    }
  }
  .c-dialog__bar-submit {
    position: relative;
    display: flex;
    gap: var(--spacing-min);
    align-items: center;
    justify-content: center;
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-s);
    font-size: var(--font-size-base);
    color: var(--color-lightest);
    background: var(--color-secondary);
    border-radius: var(--radius-normal);
    transition-timing-function: ease-in;
    transition-duration: 0.3s;
    transition-property: color, background;
    &[inert] {
      background: var(--color-text-link-primary-disable);
    }
  }
}
@layer component {
  .c-dropdown-search {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 10;
    inline-size: 100vw;
    margin-inline: calc(var(--spacing-sm) * -1);
    background: var(--color-lightest);
    border-block-start: 1px solid var(--color-bg-tertiary);
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
    transition-property: opacity, display;
  }
  .c-dropdown-search[aria-hidden="true"] {
    display: none;
    opacity: 0;
  }
  .c-dropdown-search[aria-hidden="false"] {
    display: block;
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
  }
  .c-dropdown-search__body {
    padding-inline: 16px;
  }
  .c-dropdown-search__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding-block: var(--spacing-s);
    &[data-col="2"] {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .c-dropdown-search__bar {
    inline-size: 100vw;
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-sm);
    background: var(--color-bg-secondary);
  }
  .c-dropdown-search__bar-controls {
    display: grid;
    grid-template-columns: auto minmax(67.46667vw, 1fr);
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: center;
  }
  .c-dropdown-search__bar-clear {
    position: relative;
    display: flex;
    gap: var(--spacing-x-min);
    align-items: center;
    padding-block-end: var(--spacing-x-min);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-jp-medium);
    line-height: 1.3;
    border-block-end: 1px solid var(--color-text-primary);
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
    transition-property: color, border-color;
    &[inert] {
      color: var(--color-text-link-disable);
      border-color: var(--color-text-link-disable);
    }
    &[inert]:after {
      filter: brightness(0) saturate(100%) invert(80%) sepia(0) saturate(0) hue-rotate(283deg) brightness(95%) contrast(105%);
    }
  }
  @media (any-hover: hover) {
    .c-dropdown-search__bar-clear:hover {
      color: var(--color-text-gray);
      border-color: #0000;
    }
  }
  .c-dropdown-search__bar-clear:after {
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 12px;
    block-size: 12px;
    content: "";
    background: url(../images/common/icon-cancel.svg) no-repeat 50% / contain;
  }
  .c-dropdown-search__bar-clear:hover {
    text-decoration: none;
  }
  .c-dropdown-search__bar-submit {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-min);
    align-items: center;
    justify-content: center;
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-s);
    font-size: var(--font-size-large);
    color: var(--color-lightest);
    text-align: center;
    background: var(--color-secondary);
    border-radius: var(--radius-normal);
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
    transition-property: color, background;
    &[inert] {
      background: var(--color-text-link-primary-disable);
    }
    &:after {
      position: relative;
      display: block;
      inline-size: 16px;
      block-size: 16px;
      margin-block: auto;
      content: "";
      background: url(../images/common/icon-arrow-white-right.svg) no-repeat 50% / contain;
      transition-timing-function: ease-in;
      transition-duration: 0.2s;
      transition-property: filter;
    }
  }
  @media (width < 768px) {
    .c-dropdown-search__bar-submit {
      &:after {
        inline-size: 12px;
        block-size: 12px;
      }
      span {
        display: inline-block;
        inline-size: 148px;
        max-inline-size: 100%;
        margin-inline: auto;
      }
    }
  }
  @media (any-hover: hover) {
    .c-dropdown-search__bar-submit:hover {
      color: var(--color-secondary);
      background: var(--color-lightest);
    }
    .c-dropdown-search__bar-submit:hover:after {
      filter: brightness(0) saturate(100%) invert(15%) sepia(81%) saturate(1869%) hue-rotate(203deg) brightness(101%) contrast(108%);
    }
  }
  .c-dropdown-search__bar-submit:focus-visible {
    color: var(--color-secondary);
    background: var(--color-lightest);
  }
}
@layer component {
  .c-industry-cta {
    position: relative;
    padding-block: var(--spacing-md);
    padding-inline: var(--spacing-sm);
    overflow: hidden;
    text-align: center;
    background: var(--color-lightest);
    @media (width < 768px) {
      padding-block: var(--spacing-lg);
    }
    div.c-button {
      margin-block-end: var(--spacing-no);
    }
  }
  .c-industry-cta__bg {
    pointer-events: none;
    &:before {
      background: var(--gradient-industry-cta-bg);
      opacity: 0.7;
    }
    &:after,
    &:before {
      position: absolute;
      inset: 0;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      content: "";
    }
    &:after {
      z-index: 2;
      background-image: url(../images/common/bg-pattern-cta.png);
      background-repeat: repeat;
      background-position: 50%;
      background-size: 130px;
      opacity: 0.02;
    }
  }
  .c-industry-cta__bg-obj-01,
  .c-industry-cta__bg-obj-02,
  .c-industry-cta__bg-obj-03,
  .c-industry-cta__bg-obj-04 {
    position: absolute;
    display: inline-block;
    mix-blend-mode: multiply;
    transform-origin: top left;
    rotate: 44deg;
  }
  .c-industry-cta__bg-obj-01 {
    inset-block-start: -11.25rem;
    inset-inline-start: 25rem;
    inline-size: 18rem;
    block-size: 26rem;
    background: var(--gradient-industry-cta-bg-01);
    @media (width < 768px) {
      display: none;
    }
  }
  .c-industry-cta__bg-obj-02 {
    inset-block-start: -6.25rem;
    inset-inline-start: 29.6875rem;
    inline-size: 18rem;
    block-size: 26rem;
    background: var(--gradient-industry-cta-bg-02);
    @media (width < 768px) {
      display: none;
    }
  }
  .c-industry-cta__bg-obj-03 {
    inset-block-start: -6.25rem;
    inset-inline-end: 5.3125rem;
    inline-size: 2.8125rem;
    block-size: 14.6875rem;
    background: var(--gradient-industry-cta-bg-03);
    opacity: 0.13;
    @media (width < 768px) {
      inset-block-start: -3.125rem;
      inset-inline-end: -2.5rem;
      opacity: 0.17;
    }
  }
  .c-industry-cta__bg-obj-04 {
    inset-block-start: -4.375rem;
    inset-inline-end: 2.5rem;
    inline-size: 0.75rem;
    block-size: 15.625rem;
    background: var(--gradient-industry-cta-bg-04);
    opacity: 0.13;
    @media (width < 768px) {
      inset-block-start: -0.9375rem;
      inset-inline-end: -5rem;
      opacity: 0.17;
    }
  }
  .c-industry-cta__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--spacing-xl);
    align-items: center;
    justify-content: center;
    @media (width < 768px) {
      grid-template-columns: 1fr;
      gap: var(--spacing-sm);
    }
    div.c-button {
      @media (width < 576px) {
        max-inline-size: 17.5rem;
      }
    }
  }
  .c-industry-cta__title {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-jp-bold);
    font-feature-settings: "palt" on;
    line-height: var(--line-height-title);
    color: var(--color-cta);
    letter-spacing: 0.08em;
    @media (width < 768px) {
      font-size: var(--font-size-22);
    }
    > span {
      @media (width < 768px) {
        display: block;
      }
    }
  }
}
@layer component {
  .c-industry-slide {
    position: relative;
    padding-block: var(--spacing-md);
    @media (width < 768px) {
      padding-block: var(--spacing-sm);
    }
  }
  .c-industry-slide .splide {
    position: relative;
    overflow: hidden;
  }
  .c-industry-slide .splide__list {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    inline-size: fit-content;
    block-size: auto;
    @media (width < 768px) {
      gap: var(--spacing-xs);
    }
  }
  .c-industry-slide .splide__slide {
    flex-shrink: 0;
  }
  .c-industry-slide .splide__slide img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }
  @keyframes industry-slide-scroll {
    0% {
      translate: 0;
    }
    to {
      translate: calc(var(--slide-width) * -1);
    }
  }
}
@layer component {
  .c-search-company__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(233px, 1fr));
    gap: 8px;
    @media (width < 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .c-search-company__title {
    position: relative;
    padding-inline-start: 11px;
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-20);
    line-height: var(--line-height-title);
    text-align: start;
    letter-spacing: 0.05em;
    &:before {
      position: absolute;
      inset-block-start: 5px;
      inset-inline-start: 0;
      inline-size: 3px;
      block-size: 22px;
      content: "";
      background-color: var(--color-secondary);
    }
  }
  .c-search-company__list-item {
    display: grid;
    grid-template-columns: 1fr;
  }
  .c-search-company__list-inner {
    display: grid;
    grid-template-rows: 60px 1fr;
    grid-template-columns: 1fr;
    gap: var(--spacing-no);
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-s);
    background: var(--color-lightest);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-normal);
    @media (width < 768px) {
      grid-template-rows: 50px 1fr;
    }
    &:not(:has(.c-search-company__list-image)) {
      grid-template-rows: 1fr;
      align-items: center;
    }
  }
  .c-search-company__list-image {
    padding: var(--spacing-xs);
    padding-block: var(--spacing-min) var(--spacing-xs);
    margin-inline: auto;
  }
  .c-search-company__list-name {
    font-size: var(--font-size-small);
    line-height: var(--line-height-button);
    color: var(--color-text-gray);
    text-align: start;
  }
  a.c-search-company__list-inner {
    transition:
      color 0.2s ease-in-out,
      background-color 0.2s ease-in-out;
    @media (any-hover: hover) {
      &:hover {
        background: var(--color-bg-gray);
        p.c-search-company__list-name {
          color: var(--color-text-link-hover);
        }
      }
    }
    p.c-search-company__list-name {
      font-weight: var(--font-weight-jp-medium);
      color: var(--color-primary);
    }
  }
}
@layer component {
  .c-reasons {
    padding-block-end: var(--spacing-2xl);
    overflow: visible;
    @media (width < 768px) {
      padding-block-end: var(--spacing-xl);
    }
  }
  .c-reasons__heading {
    h2 {
      margin-block-end: var(--spacing-md);
      font-size: var(--font-size-28);
      font-weight: var(--font-weight-jp-medium);
      line-height: var(--line-height-title);
      color: var(--color-lightest);
      text-align: center;
      letter-spacing: 0.05em;
      @media (width < 768px) {
        margin-block-end: var(--spacing-sm);
        font-size: var(--font-size-22);
      }
    }
  }
  .c-reasons__intelligence,
  .c-reasons__record {
    max-inline-size: var(--view-size-content-main);
    padding-block: var(--spacing-xl);
    padding-inline: var(--spacing-max);
    margin-inline: auto;
    background: var(--color-lightest);
    @media (768px <=width) {
      padding-block-end: var(--spacing-2xl);
      border-inline-start: 3px solid var(--color-cta-02);
    }
    @media (width < 768px) {
      padding-inline: var(--spacing-sm);
    }
  }
  .c-reasons__intelligence-heading,
  .c-reasons__record-heading {
    h3 {
      padding-block-end: var(--spacing-md);
      font-size: var(--font-size-32);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      color: var(--color-primary);
      @media (width < 768px) {
        font-size: var(--font-size-22);
        text-align: center;
      }
      span {
        @media (width < 768px) {
          display: block;
        }
      }
    }
  }
  .c-reasons__record-heading-note {
    padding-block-end: var(--spacing-min);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-jp-medium);
    @media (768px <=width) {
      margin-inline-start: var(--spacing-xs);
    }
    @media (width < 768px) {
      display: block;
      margin-block-start: var(--spacing-min);
    }
  }
  .c-reasons__record {
    position: relative;
    margin-block-end: var(--spacing-2xl);
    @media (width < 768px) {
      padding-block: var(--spacing-md);
    }
  }
  .c-reasons__intelligence {
    @media (width < 768px) {
      padding-block: var(--spacing-md) var(--spacing-xl);
    }
  }
  .c-reasons__intelligence .c-consultant-introduction__list {
    @media (width < 768px) {
      margin-block-end: var(--spacing-no);
    }
  }
  .c-reasons__record-table-wrap {
    position: relative;
  }
  .c-reasons__record-table {
    position: relative;
    overflow: hidden;
    transition: max-block-size 0.4s ease;
    will-change: max-block-size;
  }
  .c-reasons__record-table .c-table {
    margin-block-end: 0;
  }
  .c-reasons__record-text-note {
    --_note-offset: 3em;
    position: absolute;
    inset-block-end: calc(-32px - var(--_note-offset) + 1em);
    z-index: 0;
    inline-size: 100%;
    padding-block-end: var(--_note-offset);
    padding-inline-start: 1em;
    margin-block: calc(var(--spacing-xs) * 1) var(--spacing-4xl);
    font-size: var(--font-size-small-2);
    line-height: var(--line-height-title);
    color: var(--color-text-gray);
    text-indent: -1em;
    background: var(--color-lightest);
    @media (width < 768px) {
      padding-block-start: var(--content-mb);
      background: var(--gradient-white-02);
      translate: 0 3px;
    }
  }
  .c-reasons__record-table:after {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    inline-size: 100%;
    block-size: calc(104px + 1em);
    content: "";
    background: var(--gradient-white);
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .c-reasons__record-table-wrap > .c-reasons__record-details:not([open]) + .c-reasons__record-table {
    max-block-size: 564px;
    overflow: hidden;
    transition: block-size 0.6s ease-in-out;
  }
  .c-reasons__record-table table {
    [data-sp-hidden="true"] {
      @media (width < 768px) {
        display: none;
      }
    }
    thead th {
      @media (width < 768px) {
        min-inline-size: 56px;
      }
    }
    th[data-value="income"] {
      &:after {
        @media (width < 768px) {
          display: block;
          content: "(万円)";
        }
      }
    }
    td[data-value="income"] {
      > span {
        @media (width < 768px) {
          display: none;
        }
      }
    }
  }
  .c-reasons__record-table-wrap > .c-reasons__record-details[open] + .c-reasons__record-table {
    max-block-size: 2000px;
  }
  .c-reasons__record-table-wrap > .c-reasons__record-details[open] + .c-reasons__record-table:after {
    pointer-events: none;
    opacity: 0;
  }
  .c-reasons__record-table-wrap > .c-reasons__record-details[open] + .c-reasons__record-table .c-reasons__record-text-note {
    position: static;
    padding-block: 0;
  }
  .c-reasons__record-details-button .c-reasons__record-details-close,
  .c-reasons__record-details-button .c-reasons__record-details-open {
    transition: opacity 0.2s ease;
    will-change: opacity;
  }
  .c-reasons__record-details-button .c-reasons__record-details-open {
    pointer-events: auto;
    opacity: 1;
  }
  .c-reasons__record-details-button .c-reasons__record-details-close {
    pointer-events: none;
    opacity: 0;
  }
  .c-reasons__record-details[open] .c-reasons__record-details-button .c-reasons__record-details-open {
    pointer-events: none;
    opacity: 0;
    transition-delay: 0.4s;
  }
  .c-reasons__record-details:not([open]) .c-reasons__record-details-button .c-reasons__record-details-open,
  .c-reasons__record-details[open] .c-reasons__record-details-button .c-reasons__record-details-close {
    pointer-events: auto;
    opacity: 1;
    transition-delay: 0.4s;
  }
  .c-reasons__record-details:not([open]) .c-reasons__record-details-button .c-reasons__record-details-close {
    pointer-events: none;
    opacity: 0;
    transition-delay: 0.4s;
  }
  .c-reasons__bg {
    position: absolute;
    inset: 0;
  }
  .c-reasons__bg:before {
    content: none;
  }
  .c-reasons__bg-obj-01,
  .c-reasons__bg-obj-02,
  .c-reasons__bg-obj-03,
  .c-reasons__bg-obj-04 {
    position: absolute;
    mix-blend-mode: multiply;
    opacity: 0.3;
  }
  .c-reasons__heading,
  .c-reasons__intelligence,
  .c-reasons__record {
    position: relative;
    z-index: 1;
  }
  .c-reasons__bg-obj-01 {
    inset-block-start: -7.5rem;
    inset-inline-start: -5rem;
    inline-size: 8.75rem;
    block-size: 40.5rem;
    background: var(--gradient-cta-obj-blue-01);
    rotate: 44deg;
    @media (width < 768px) {
      inline-size: 6.5625rem;
      block-size: 24.125rem;
    }
  }
  .c-reasons__bg-obj-02 {
    inset-block-start: 10.625rem;
    inset-inline-start: -5.625rem;
    inline-size: 18.125rem;
    block-size: 44.375rem;
    background: var(--gradient-cta-obj-blue-02);
    rotate: 44deg;
    @media (width < 768px) {
      display: none;
    }
  }
  .c-reasons__bg-obj-03 {
    inset-block-start: -13.125rem;
    inset-inline-end: -8.75rem;
    inline-size: 18.125rem;
    block-size: 44.375rem;
    background: var(--gradient-cta-obj-blue-02);
    rotate: -135deg;
    @media (width < 768px) {
      inline-size: 3.75rem;
      block-size: 21.25rem;
    }
  }
  .c-reasons__bg-obj-04 {
    inset-block-start: 18.75rem;
    inset-inline-end: -3.125rem;
    inline-size: 4.1875rem;
    block-size: 21.25rem;
    background: var(--gradient-cta-obj-blue-02);
    rotate: -135deg;
    @media (width < 768px) {
      inline-size: 18.125rem;
      block-size: 30rem;
    }
  }
  .c-reasons__record-details-button {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: grid;
    inline-size: fit-content;
    margin-block-start: calc(1em + var(--spacing-sm));
    margin-inline: auto;
    :where(span) {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      grid-area: 1/1/-1/-1;
      place-content: center;
      align-items: center;
      justify-content: center;
      inline-size: fit-content;
      min-inline-size: 200px;
      padding-block: var(--spacing-xs);
      padding-inline: var(--spacing-lg);
      margin-inline: auto;
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
      color: var(--color-lightest);
      background: var(--gradient-blue-03);
      border: 1px solid var(--color-secondary);
      border-radius: var(--radius-normal);
      transition:
        color 0.2s ease-in-out,
        border-color 0.2s ease-in-out;
    }
  }
  @media (any-hover: hover) {
    .c-reasons__record-details-button:hover :where(span) {
      color: var(--color-secondary);
      background: var(--color-lightest);
    }
  }
}
@layer component {
  .c-contents__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .c-contents__bg-obj-01,
  .c-contents__bg-obj-02,
  .c-contents__bg-obj-03,
  .c-contents__bg-obj-04 {
    position: absolute;
    mix-blend-mode: multiply;
    rotate: 44deg;
    @media (width < 768px) {
      display: none;
    }
  }
  .c-contents__bg-obj-01 {
    inset-block-end: -21.5rem;
    inset-inline-start: 2.25rem;
    inline-size: 18rem;
    block-size: 46.8125rem;
    background: var(--gradient-contents-obj-blue-01);
    opacity: 0.2;
  }
  .c-contents__bg-obj-02 {
    inset-block-end: -39.375rem;
    inset-inline-start: 3.75rem;
    inline-size: 18rem;
    block-size: 54.4375rem;
    background: var(--gradient-contents-obj-blue-02);
    opacity: 0.3;
  }
  .c-contents__bg-obj-03 {
    inset-block-start: -4.125rem;
    inset-inline-end: 0;
    inline-size: 5rem;
    block-size: 27.0625rem;
    background: var(--gradient-contents-obj-blue-03);
  }
  .c-contents__bg-obj-04 {
    inset-block-start: 6.25rem;
    inset-inline-end: 0;
    inline-size: 1.375rem;
    block-size: 28.625rem;
    background: var(--gradient-contents-obj-blue-04);
  }
  .c-contents__heading {
    h2 {
      margin-block-end: var(--spacing-md);
      font-size: var(--font-size-28);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      color: var(--color-primary);
      text-align: center;
      letter-spacing: 0.05em;
      @media (width < 768px) {
        margin-block-end: var(--spacing-sm);
        font-size: var(--font-size-22);
      }
    }
  }
  .c-contents__subheading {
    position: relative;
    padding-inline-start: 11px;
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-20);
    line-height: var(--line-height-title);
    letter-spacing: 0.05em;
    @media (width < 768px) {
      margin-block-end: var(--spacing-sm);
      font-size: var(--font-size-20);
    }
    &:before {
      position: absolute;
      inset-block-start: 5px;
      inset-inline-start: 0;
      display: inline-block;
      inline-size: 3px;
      block-size: 22px;
      content: "";
      background-color: var(--color-secondary);
      @media (width < 768px) {
        inset-block-start: 2px;
      }
    }
  }
  .c-contents__heading,
  .c-contents__subheading,
  .c-interview,
  .c-search-list,
  .c-segment {
    position: relative;
    z-index: 1;
  }
}
@layer component {
  .c-knowhow__heading {
    position: relative;
    z-index: 1;
    h2 {
      margin-block-end: var(--spacing-md);
      font-size: var(--font-size-28);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      color: var(--color-primary);
      text-align: center;
      letter-spacing: 0.05em;
      @media (width < 768px) {
        margin-block-end: var(--spacing-sm);
        font-size: var(--font-size-22);
      }
    }
  }
  .c-knowhow__subheading {
    position: relative;
    padding-inline-start: 11px;
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-20);
    line-height: var(--line-height-title);
    letter-spacing: 0.05em;
    @media (width < 768px) {
      margin-block-end: var(--spacing-sm);
      font-size: var(--font-size-20);
    }
    &:before {
      position: absolute;
      inset-block-start: 5px;
      inset-inline-start: 0;
      display: inline-block;
      inline-size: 3px;
      block-size: 22px;
      content: "";
      background-color: var(--color-secondary);
      @media (width < 768px) {
        inset-block-start: 2px;
      }
    }
  }
}
@layer component {
  .c-flow-industry {
    padding-block-end: var(--spacing-2xl);
  }
  .c-flow-support {
    position: relative;
    z-index: 1;
  }
  .c-flow-support .c-flow {
    padding-block: var(--spacing-no);
    background: initial;
  }
  .c-flow-support .c-flow__wrap {
    max-inline-size: var(--view-size-content-main);
    padding-inline: var(--spacing-no);
  }
}
@layer component {
  .c-flow-support__heading {
    h2 {
      margin-block-end: var(--spacing-md);
      font-size: var(--font-size-28);
      font-weight: var(--font-weight-jp-medium);
      line-height: var(--line-height-title);
      color: var(--color-lightest);
      text-align: center;
      letter-spacing: 0.05em;
      @media (width < 768px) {
        margin-block-end: var(--spacing-sm);
        font-size: var(--font-size-22);
      }
    }
  }
}
@layer component {
  .c-segment {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    padding-block-end: var(--pbe-pc, var(--spacing-2xl));
    margin-block-end: var(--mbe-pc, var(--spacing-no));
    @media (width < 768px) {
      padding-block-end: var(--pbe-sp, var(--pbe-pc, var(--spacing-2xl)));
      margin-block-end: var(--mbe-sp, var(--mbe-pc, var(--spacing-no)));
    }
    div.c-button {
      margin-block-end: var(--spacing-no);
    }
  }
  .c-contents .c-segment__list {
    grid-template-columns: repeat(var(--col-pc, auto-fit), minmax(180px, 1fr));
    @media (width < 768px) {
      grid-template-columns: repeat(var(--col-sp, auto-fit), minmax(240px, 1fr));
    }
    @media (width < 576px) {
      grid-template-columns: repeat(var(--col-sp, 1), 1fr);
    }
  }
  .c-contents .c-segment__list li {
    @media (width < 768px) {
      justify-content: center;
    }
  }
  .c-segment__list {
    display: grid;
    grid-template-columns: repeat(var(--col-pc, auto-fit), minmax(294px, 1fr));
    gap: var(--spacing-xs);
    @media (width < 768px) {
      grid-template-columns: repeat(var(--col-sp, 1), 1fr);
    }
    li {
      display: flex;
      block-size: 100%;
      transition:
        max-block-size 0.3s ease,
        opacity 0.3s ease,
        translate 0.3s ease;
      a {
        @media (any-hover: hover) {
          &:hover img {
            opacity: 0.6;
          }
        }
        img {
          transition: opacity 0.2s ease-in-out;
        }
      }
    }
  }
  .c-page-sub__main:has(.c-page-sub__side-nav) .c-segment__list {
    @media (768px <=width) {
      grid-template-columns: repeat(var(--col-pc, auto-fit), minmax(210px, 1fr));
    }
  }
  .c-segment:has(.c-segment__details) .c-segment__list-wrap {
    position: relative;
  }
  .c-segment:has(.c-segment__details) .c-segment__list-wrap > .c-segment__details:not([open]) + .c-segment__list li:nth-child(n + 5) {
    max-block-size: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    translate: 0 -8px;
  }
  .c-segment:has(.c-segment__details) .c-segment__list {
    padding-block-end: var(--spacing-lg);
    @media (width < 768px) {
      padding-block-end: calc(var(--spacing-lg) + var(--spacing-md));
    }
  }
  .c-segment:has(.c-segment__details) .c-segment__list-wrap > .c-segment__details:not([open]) + .c-segment__list {
    @media (768px <=width) {
      padding-block-end: calc(var(--spacing-lg) + var(--spacing-md));
    }
  }
  .c-segment:has(.c-segment__details) .c-segment__list-wrap > .c-segment__details[open] + .c-segment__list {
    @media (768px <=width) {
      padding-block-end: calc(var(--spacing-lg) + var(--spacing-md));
    }
  }
  .c-segment:has(.c-segment__details) .c-segment__details-button {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: grid;
    inline-size: fit-content;
    margin-block-start: calc(1em + var(--spacing-sm));
    margin-inline: auto;
    color: var(--color-primary);
    cursor: pointer;
    background: #0000;
  }
  .c-segment:has(.c-segment__details) .c-segment__details-button::-webkit-details-marker {
    display: none;
  }
  .c-segment:has(.c-segment__details) .c-segment__details-button span {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    grid-area: 1/1/-1/-1;
    place-content: center;
    align-items: center;
    justify-content: center;
    inline-size: fit-content;
    min-inline-size: 200px;
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-lg);
    margin-inline: auto;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-jp-bold);
    line-height: var(--line-height-button);
    color: var(--color-lightest);
    background: var(--gradient-blue-03);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-normal);
    transition:
      color 0.2s ease-in-out,
      border-color 0.2s ease-in-out;
  }
  .c-segment:has(.c-segment__details) .c-segment__details-button .c-segment__details-close,
  .c-segment:has(.c-segment__details) .c-segment__details-button .c-segment__details-open {
    transition: opacity 0.2s ease;
    will-change: opacity;
  }
  .c-segment:has(.c-segment__details) .c-segment__details-button .c-segment__details-open {
    pointer-events: auto;
    opacity: 1;
  }
  .c-segment:has(.c-segment__details) .c-segment__details[open] .c-segment__details-button .c-segment__details-open,
  .c-segment:has(.c-segment__details) .c-segment__details-button .c-segment__details-close {
    pointer-events: none;
    opacity: 0;
  }
  .c-segment:has(.c-segment__details) .c-segment__details[open] .c-segment__details-button .c-segment__details-close {
    pointer-events: auto;
    opacity: 1;
  }
  .c-segment:has(.c-segment__details) .c-segment__list-wrap > .c-segment__details[open] + .c-segment__list li:nth-child(n + 5) {
    max-block-size: 1000px;
    pointer-events: auto;
    opacity: 1;
    translate: none;
  }
  @media (any-hover: hover) {
    .c-segment:has(.c-segment__details) .c-segment__details-button:hover span {
      color: var(--color-secondary);
      background: var(--color-lightest);
    }
  }
}
@layer component {
  .c-interview {
    padding-block-end: var(--spacing-2xl);
    div.c-button {
      margin-block-end: var(--spacing-no);
    }
  }
  .c-interview__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md) var(--spacing-lg);
    padding-block-end: var(--spacing-md);
    @media (width < 576px) {
      grid-template-columns: 1fr;
      gap: var(--spacing-sm);
    }
    li {
      a {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        @media (width < 768px) {
          gap: var(--spacing-s);
        }
        @media (any-hover: hover) {
          &:hover {
            img {
              opacity: 0.6;
            }
            p.c-interview__list-text {
              color: var(--color-text-link-hover);
            }
          }
        }
        img {
          transition: opacity 0.2s ease-in-out;
        }
      }
      &:not(:last-child) {
        a {
          @media (width < 768px) {
            padding-block-end: var(--spacing-sm);
          }
        }
      }
    }
  }
  .c-interview__list-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-min);
    line-height: var(--line-height-title);
    @media (width < 768px) {
      gap: var(--spacing-x-min);
    }
  }
  .c-interview__list-company {
    font-size: var(--font-size-small);
  }
  .c-interview__list-text {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-jp-bold);
    color: var(--color-primary);
    transition: color 0.2s ease-in-out;
  }
  .c-consultant-support {
    position: relative;
    padding-block: var(--spacing-lg);
    margin-block-end: var(--spacing-xl) var(--spacing-2xl);
    overflow: hidden;
    background-color: var(--color-secondary);
    background-image: url(../images/home/hero-bg-01.png);
    background-repeat: repeat;
    background-position: 50%;
    background-size: 130px;
  }
}
@layer component {
  .c-consultant-support__bg {
    &:before {
      position: absolute;
      inset: 0;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      content: "";
      background: var(--gradient-footer-bg-blue);
      opacity: 0.7;
    }
  }
  .c-consultant-support__bg-obj-01,
  .c-consultant-support__bg-obj-02,
  .c-consultant-support__bg-obj-03,
  .c-consultant-support__bg-obj-04 {
    position: absolute;
    mix-blend-mode: multiply;
    opacity: 0.3;
  }
  .c-consultant-support__bg-obj-01 {
    inset-block-start: 1.25rem;
    inset-inline-start: 0;
    inline-size: 18.125rem;
    block-size: 25.1875rem;
    background: var(--gradient-cta-obj-blue-02);
    rotate: 44deg;
    @media (width < 768px) {
      display: none;
    }
  }
  .c-consultant-support__bg-obj-03 {
    inset-block-start: -9.375rem;
    inset-inline-end: -5rem;
    inline-size: 9.6875rem;
    block-size: 23.75rem;
    background: var(--gradient-cta-obj-blue-02);
    rotate: -135deg;
    @media (width < 768px) {
      inset-block-start: -5.9375rem;
      inset-inline-end: -3.75rem;
      inline-size: 8.625rem;
      block-size: 14.0625rem;
    }
  }
  .c-consultant-support__bg-obj-04 {
    inset-block: auto -5rem;
    inset-block-start: 18.75rem;
    inset-inline-end: -6.25rem;
    inline-size: 4.1875rem;
    block-size: 21.375rem;
    background: var(--gradient-cta-obj-blue-02);
    rotate: -135deg;
    @media (width < 768px) {
      inset-block: auto -3.75rem;
      inset-inline-end: -1.25rem;
      inline-size: 5.9375rem;
      block-size: 12.5rem;
    }
  }
  .c-consultant-support__wrap {
    position: relative;
    z-index: 1;
    max-inline-size: calc(var(--view-size-content-main) + var(--spacing-lg));
    padding-inline: var(--spacing-sm);
    margin-inline: auto;
    line-height: var(--line-height-title);
    color: var(--color-lightest);
    text-align: center;
    > h2 {
      position: relative;
      padding-block-end: var(--spacing-s);
      margin-block-end: var(--spacing-sm);
      font-size: var(--font-size-20);
      font-weight: var(--font-weight-jp-medium);
      letter-spacing: 0.01em;
      text-wrap: wrap;
      &:after {
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        inline-size: 180px;
        block-size: 1px;
        margin-inline: auto;
        content: "";
        background-color: var(--color-lightest);
        opacity: 0.5;
      }
      > span {
        display: block;
        > span {
          @media (width < 768px) {
            display: block;
          }
        }
      }
    }
    > p {
      &:last-of-type {
        margin-block-end: var(--spacing-sm);
      }
      > span {
        @media (width < 768px) {
          display: block;
        }
        > span {
          font-weight: var(--font-weight-jp-bold);
        }
      }
    }
  }
}
@layer component {
  .c-company-interview {
    max-inline-size: var(--view-size-bge-content);
    margin-inline: auto;
    > section {
      margin-block-end: var(--spacing-2xl);
      @media (width < 768px) {
        margin-block-end: var(--spacing-md);
      }
      &:has(.c-strength) {
        margin-block-end: var(--spacing-5xl);
        @media (width < 768px) {
          margin-block-end: var(--spacing-2xl);
        }
      }
      &:last-child,
      > :last-child {
        margin-block-end: 0;
      }
    }
  }
  .c-company-interview__prologue {
    position: relative;
    padding-block-start: var(--spacing-4xl);
    @media (width < 768px) {
      padding-block-start: var(--spacing-lg);
      margin-block-end: var(--spacing-lg);
    }
    &:before {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: calc(-50vw + 480px);
      inline-size: 100vw;
      block-size: 100%;
      content: "";
      background: var(--gradient-bg-company-interview);
      @media (width < 992px) {
        inset-inline-start: calc(var(--spacing-sm) * -1);
      }
    }
    &:after {
      position: absolute;
      inset-block-start: -8.75rem;
      inset-inline-end: -21.25rem;
      inline-size: 13.125rem;
      block-size: 24.625rem;
      background: var(--gradient-obj-company-interview);
      mix-blend-mode: multiply;
      opacity: 0.4;
      rotate: -135deg;
      @media (768px <=width) {
        content: "";
      }
    }
  }
  .c-company-interview__prologue-head {
    position: relative;
    z-index: 3;
    margin-block-end: var(--spacing-3xl);
    @media (width < 768px) {
      margin-block-end: var(--spacing-2xl);
    }
    &:before {
      position: absolute;
      inset-block-start: -12.5rem;
      inset-inline-start: -18.75rem;
      z-index: -1;
      inline-size: 9.6875rem;
      block-size: 33.125rem;
      content: "";
      background: var(--gradient-obj-company-interview);
      mix-blend-mode: screen;
      opacity: 0.9;
      rotate: -135deg;
      @media (width < 768px) {
        inset-inline-start: -1.875rem;
      }
    }
    &:after {
      position: absolute;
      inset-block-start: -25rem;
      inset-inline-end: 5rem;
      z-index: -1;
      inline-size: 21.875rem;
      block-size: 76.875rem;
      background: var(--gradient-white-03);
      mix-blend-mode: screen;
      opacity: 0.9;
      rotate: -135deg;
      @media (768px <=width) {
        content: "";
      }
    }
  }
  .c-company-interview__prologue-image {
    margin-block-end: var(--spacing-lg);
    @media (width < 768px) {
      margin-block-end: var(--spacing-md);
    }
  }
  .c-company-interview__prologue-main {
    margin-block-end: var(--spacing-sm);
    line-height: var(--line-height-title);
    @media (width < 768px) {
      margin-block-end: var(--spacing-md);
    }
    > h1 {
      margin-block: 0 var(--spacing-min);
      font-size: var(--font-size-24);
      font-weight: var(--font-weight-jp-bold);
      color: var(--color-secondary);
      text-wrap: wrap;
      @media (width < 768px) {
        font-size: var(--font-size-22);
      }
    }
    > p {
      font-size: var(--font-size-large);
    }
  }
  .c-company-interview__prologue-sub {
    > p {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-x-min) var(--spacing-xs);
      font-size: var(--font-size-small);
      line-height: var(--line-height-title);
      color: var(--color-text-gray);
      @media (width < 768px) {
        font-size: var(--font-size-base);
      }
      &:not(:last-child) {
        margin-block-end: var(--spacing-x-min);
        @media (width < 768px) {
          margin-block-end: var(--spacing-xs);
        }
      }
    }
  }
  .c-company-interview__prologue-note {
    position: relative;
    padding-inline-start: calc(1em + 2px);
    margin-block-start: var(--spacing-md);
    font-size: var(--font-size-small-3);
    line-height: var(--line-height-title);
    color: var(--color-text-gray);
    @media (width < 768px) {
      margin-block-start: var(--spacing-xs);
    }
    &:before {
      position: absolute;
      inset: 0 auto auto 0;
      content: "※";
    }
  }
  .c-company-interview__prologue-lead {
    > p {
      font-size: var(--font-size-small);
      @media (width < 768px) {
        font-size: var(--font-size-base);
      }
      &:not(:last-child) {
        margin-block-end: var(--spacing-md);
      }
    }
  }
}
@layer component {
  .c-section-group {
    display: flex;
    flex-direction: column;
    padding-block: var(--spacing-4xl);
    padding-inline: var(--spacing-sm);
    @media (width < 768px) {
      padding-block: var(--spacing-2xl) var(--spacing-xl);
    }
    > section {
      inline-size: 100%;
      max-inline-size: var(--view-size-content-main);
      margin-inline: auto;
    }
    &:has(.c-offer) {
      padding-block: var(--spacing-xl) var(--spacing-5xl);
      background: var(--color-bg-secondary);
      @media (width < 768px) {
        padding-block: var(--spacing-md) var(--spacing-xl);
      }
    }
    &:has(.c-reasons) {
      position: relative;
      overflow: hidden;
      background-color: var(--color-secondary);
      @media (width < 768px) {
        padding-block: var(--spacing-2xl) var(--spacing-xl);
      }
      &:before {
        position: absolute;
        inset: 0;
        z-index: 0;
        content: "";
        background-image: url(../images/home/hero-bg-01.png);
        background-repeat: repeat;
        background-position: 50%;
        background-size: 130px;
        mix-blend-mode: multiply;
        opacity: 0.4;
      }
    }
    &:has(.c-contents) {
      position: relative;
      padding-block-end: var(--spacing-4xl);
      @media (width < 768px) {
        padding-block: var(--spacing-xl) var(--spacing-2xl);
      }
      &:before {
        position: absolute;
        inset: 0;
        z-index: 0;
        content: "";
        background: var(--gradient-lightblue);
        opacity: 0.2;
      }
    }
  }
}
@layer component {
  .c-strength {
    position: relative;
    padding-block: var(--spacing-4xl);
    overflow: hidden;
    background-color: var(--color-secondary);
    @media (width < 768px) {
      padding-block: var(--spacing-xl);
    }
    [class="c-page-sub"] & {
      padding-block: var(--spacing-lg);
      margin-block: var(--spacing-xl) var(--spacing-2xl);
      background-image: url(../images/home/hero-bg-01.png);
      background-repeat: repeat;
      background-position: 50%;
      background-size: 130px;
    }
  }
  .c-strength__bg {
    &:before {
      position: absolute;
      inset: 0;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      content: "";
      background-image: url(../images/home/hero-bg-01.png);
      background-repeat: repeat;
      background-position: 50%;
      background-size: 130px;
      mix-blend-mode: multiply;
      opacity: 0.4;
    }
    [class="c-page-sub"] & {
      &:before {
        background: var(--gradient-footer-bg-blue);
        mix-blend-mode: normal;
        opacity: 0.7;
      }
    }
  }
  .c-strength__bg-obj-01,
  .c-strength__bg-obj-02,
  .c-strength__bg-obj-03,
  .c-strength__bg-obj-04 {
    position: absolute;
    mix-blend-mode: multiply;
    opacity: 0.3;
  }
  .c-strength__bg-obj-01 {
    inset-block-start: -7.5rem;
    inset-inline-start: -5rem;
    inline-size: 8.75rem;
    block-size: 40.5rem;
    background: var(--gradient-cta-obj-blue-01);
    rotate: 44deg;
    @media (width < 768px) {
      inline-size: 6.5625rem;
      block-size: 24.125rem;
    }
    [class="c-page-sub"] & {
      inset-block-start: 1.25rem;
      inset-inline-start: 0;
      inline-size: 18.125rem;
      block-size: 25.1875rem;
      background: var(--gradient-cta-obj-blue-02);
      @media (width < 768px) {
        display: none;
      }
    }
  }
  .c-strength__bg-obj-02 {
    inset-block-start: 10.625rem;
    inset-inline-start: -5.625rem;
    inline-size: 18.125rem;
    block-size: 44.375rem;
    background: var(--gradient-cta-obj-blue-02);
    rotate: 44deg;
    @media (width < 768px) {
      display: none;
    }
    [class="c-page-sub"] & {
      display: none;
    }
  }
  .c-strength__bg-obj-03 {
    inset-block-start: -13.125rem;
    inset-inline-end: -8.75rem;
    inline-size: 18.125rem;
    block-size: 44.375rem;
    background: var(--gradient-cta-obj-blue-02);
    rotate: -135deg;
    @media (width < 768px) {
      inline-size: 3.75rem;
      block-size: 21.25rem;
    }
    [class="c-page-sub"] & {
      inset-block-start: -9.375rem;
      inset-inline-end: -5rem;
      inline-size: 9.6875rem;
      block-size: 23.75rem;
      @media (width < 768px) {
        inset-block-start: -5.9375rem;
        inset-inline-end: -3.75rem;
        inline-size: 8.625rem;
        block-size: 14.0625rem;
      }
    }
  }
  .c-strength__bg-obj-04 {
    inset-block-start: 18.75rem;
    inset-inline-end: -3.125rem;
    inline-size: 4.1875rem;
    block-size: 21.25rem;
    background: var(--gradient-cta-obj-blue-02);
    rotate: -135deg;
    @media (width < 768px) {
      inline-size: 18.125rem;
      block-size: 30rem;
    }
    [class="c-page-sub"] & {
      inset-block: auto -5rem;
      inset-inline-end: -6.25rem;
      inline-size: 4.1875rem;
      block-size: 21.375rem;
      @media (width < 768px) {
        inset-block: auto -3.75rem;
        inset-inline-end: -1.25rem;
        inline-size: 5.9375rem;
        block-size: 12.5rem;
      }
    }
  }
  .c-strength__wrap {
    position: relative;
    z-index: 1;
    max-inline-size: calc(var(--view-size-content-main) + var(--spacing-lg));
    padding-inline: var(--spacing-sm);
    margin-inline: auto;
  }
  .c-strength__heading {
    h2 {
      margin-block-end: var(--spacing-md);
      font-size: var(--font-size-32);
      font-weight: var(--font-weight-jp-medium);
      line-height: var(--line-height-title);
      color: var(--color-lightest);
      text-align: center;
      letter-spacing: 0.05em;
      @media (width < 768px) {
        font-size: var(--font-size-22);
      }
      [class="c-page-sub"] & {
        margin-block-end: var(--spacing-sm);
        font-size: var(--font-size-22);
        > span {
          @media (width < 768px) {
            display: block;
          }
        }
      }
    }
  }
  .c-strength__anchor {
    margin-block-end: var(--spacing-3xl);
    @media (width < 768px) {
      margin-block-end: var(--spacing-lg);
    }
    > ol {
      display: grid;
      gap: var(--spacing-xs) var(--spacing-md);
      counter-reset: list;
      @media (768px <=width) {
        grid-template-columns: repeat(3, 1fr);
      }
      > li {
        > a {
          position: relative;
          display: grid;
          gap: var(--spacing-sm);
          align-items: center;
          block-size: 100%;
          padding-block: var(--spacing-lg);
          line-height: var(--line-height-button);
          background-color: var(--color-primary-40per);
          border: 1px solid var(--color-lightest);
          border-radius: var(--radius-normal);
          @media (768px <=width) {
            text-align: center;
          }
          @media (width < 768px) {
            grid-template-columns: 1fr auto;
            padding-block: var(--spacing-sm);
            padding-inline: var(--spacing-s);
          }
          &:before {
            position: absolute;
            inset: 0;
            inline-size: 100%;
            block-size: 100%;
            content: "";
            background: var(--gradient-button-bg-blue);
            opacity: 0;
            transition: opacity 0.2s;
          }
          &:after {
            display: block;
            inline-size: var(--spacing-lg);
            block-size: var(--spacing-lg);
            margin-inline: auto;
            vertical-align: middle;
            content: "";
            background: url(../images/common/icon-arrow-white-down.svg) no-repeat 50% / contain;
            transition: transform 0.3s;
            @media (width < 768px) {
              inline-size: var(--spacing-sm);
              block-size: var(--spacing-sm);
            }
          }
          > span {
            position: relative;
            z-index: 3;
            display: grid;
            align-items: center;
            font-size: var(--font-size-20);
            font-weight: var(--font-weight-jp-medium);
            line-height: var(--line-height-title);
            color: var(--color-lightest);
            letter-spacing: 0.1em;
            @media (width < 768px) {
              display: flex;
              font-size: var(--font-size-small);
            }
            &:before {
              font-family: var(--font-family-en);
              font-size: var(--font-size-28);
              font-weight: var(--font-weight-en-medium);
              line-height: 1;
              color: var(--color-cta-02);
              text-align: center;
              content: counter(list, decimal-leading-zero);
              counter-increment: list;
              @media (768px <=width) {
                margin-block-end: var(--spacing-sm);
              }
              @media (width < 768px) {
                margin-inline-end: var(--spacing-xs);
                font-size: 0.9375rem;
              }
            }
            > span {
              @media (768px <=width) {
                display: block;
              }
            }
          }
        }
      }
    }
  }
  @media (any-hover: hover) {
    .c-strength__anchor > ol > li > a:hover {
      &:before {
        opacity: 0.4;
      }
    }
  }
  .c-strength__list {
    margin-block-end: var(--spacing-md);
    > ol {
      display: grid;
      gap: var(--spacing-xs) var(--spacing-lg);
      counter-reset: list;
      @media (768px <=width) {
        grid-template-columns: repeat(3, 1fr);
      }
      > li {
        position: relative;
        display: grid;
        gap: var(--spacing-xs) var(--spacing-s);
        align-items: center;
        block-size: 100%;
        line-height: var(--line-height-title);
        @media (768px <=width) {
          text-align: center;
        }
        @media (width < 768px) {
          grid-template-columns: auto 1fr;
          padding-inline-start: var(--spacing-min);
        }
        &:before {
          font-family: var(--font-family-en);
          font-size: 1.875rem;
          font-weight: 400;
          line-height: 1;
          color: var(--color-cta-02);
          text-align: center;
          content: counter(list, decimal-leading-zero);
          counter-increment: list;
          @media (width < 768px) {
            line-height: var(--line-height-title);
          }
        }
        &:not(:last-child) {
          &:after {
            position: absolute;
            inset-block: 0;
            inset-inline-end: calc(var(--spacing-sm) * -1);
            inline-size: 1px;
            block-size: 50px;
            margin-block: auto;
            background-color: var(--color-lightest-50per);
            @media (768px <=width) {
              content: "";
            }
          }
        }
        > span {
          position: relative;
          align-items: center;
          font-size: 0.9375rem;
          line-height: var(--line-height-title);
          color: var(--color-lightest);
          @media (width < 768px) {
            font-size: var(--font-size-base);
          }
          > span {
            @media (768px <=width) {
              display: block;
            }
          }
        }
      }
    }
  }
  .c-strength__contents {
    display: grid;
    margin-block-end: var(--spacing-2xl);
    @media (768px <=width) {
      gap: var(--spacing-2xl);
    }
    @media (width < 768px) {
      margin-block-end: var(--spacing-md);
      margin-inline: calc(var(--spacing-sm) * -1);
      background-color: var(--color-lightest);
    }
  }
  .c-strength__item {
    position: relative;
    padding: var(--spacing-xl);
    padding-block-end: var(--spacing-2xl);
    background-color: var(--color-lightest);
    @media (768px <=width) {
      border-inline-start: 3px solid var(--color-cta-02);
    }
    @media (width < 768px) {
      padding: var(--spacing-sm);
      padding-block: var(--spacing-lg);
    }
    &:first-child {
      @media (width < 768px) {
        padding-block-start: var(--spacing-xl);
      }
    }
    &:last-child {
      @media (width < 768px) {
        padding-block-end: var(--spacing-xl);
      }
    }
    &:not(:last-child) {
      &:after {
        @media (width < 768px) {
          position: absolute;
          inset-block-end: 0;
          inset-inline-start: 0;
          inline-size: calc(100% - 32px);
          block-size: 1px;
          margin-inline: var(--spacing-sm);
          content: "";
          background-color: var(--color-border-light);
        }
      }
    }
  }
  .c-strength__item-heading {
    display: grid;
    gap: var(--spacing-xs) var(--spacing-s);
    align-items: center;
    margin-block-end: var(--spacing-s);
    @media (768px <=width) {
      grid-template-columns: auto 1fr;
    }
    > span {
      font-family: var(--font-family-en);
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-en-bold);
      line-height: 1;
      color: var(--color-cta);
      text-align: center;
      letter-spacing: 0.15em;
      @media (width < 768px) {
        font-size: var(--font-size-small-2);
      }
      > span {
        display: block;
        margin-block-start: -4px;
        font-size: 3.625rem;
        font-weight: 300;
        letter-spacing: -0.02em;
        @media (width < 768px) {
          font-size: 2.75rem;
        }
      }
    }
    > h3 {
      font-size: var(--font-size-32);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      color: var(--color-primary);
      @media (width < 768px) {
        font-size: var(--font-size-20);
        text-align: center;
      }
      > span {
        @media (width < 768px) {
          display: block;
        }
      }
    }
  }
  .c-strength__item-inner {
    position: relative;
    max-inline-size: 61.5rem;
    margin-inline: auto;
    > h4 {
      margin-block-end: var(--spacing-sm);
      font-size: var(--font-size-22);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      color: var(--color-primary);
      @media (width < 768px) {
        margin-block-end: var(--spacing-s);
        font-size: var(--font-size-base);
      }
      &[data-sp-hidden="true"] {
        @media (width < 768px) {
          display: none;
        }
      }
      &[data-pc-hidden="true"] {
        @media (768px <=width) {
          display: none;
        }
      }
      > span {
        margin-inline-start: var(--spacing-xs);
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-jp-regular);
        color: var(--color-darkest);
        letter-spacing: 0.02em;
        @media (width < 768px) {
          display: block;
          margin-inline-start: 0;
        }
      }
    }
  }
  .c-strength__item-text {
    margin-block-end: var(--spacing-md);
    font-size: var(--font-size-small);
    @media (width < 768px) {
      margin-block-end: var(--spacing-xs);
      font-size: var(--font-size-base);
    }
  }
  .c-strength__item-text-note {
    padding-inline-start: 1em;
    margin-block-start: calc(var(--spacing-xs) * 1);
    font-size: var(--font-size-small-2);
    line-height: var(--line-height-title);
    color: var(--color-text-gray);
    text-indent: -1em;
  }
  .c-strength__item-achievements-radio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(177px, 1fr));
    gap: var(--spacing-xs) var(--spacing-s);
    padding: var(--spacing-sm);
    margin-block-end: var(--spacing-md);
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
      padding: var(--spacing-s);
      margin-block-end: var(--spacing-s);
    }
    [class="c-radio__text"] {
      font-weight: var(--font-weight-jp-regular);
      color: var(--color-darkest);
    }
  }
  .c-strength__item-achievements-table {
    position: relative;
    overflow: hidden;
    transition: max-block-size 0.4s ease;
    will-change: max-block-size;
    [class="c-table"] {
      margin-block-end: 0;
    }
    table {
      [data-sp-hidden="true"] {
        @media (width < 768px) {
          display: none;
        }
      }
      thead th {
        @media (width < 768px) {
          min-inline-size: 56px;
        }
      }
      th[data-value="income"] {
        &:after {
          @media (width < 768px) {
            display: block;
            content: "(万円)";
          }
        }
      }
      td[data-value="income"] {
        > span {
          @media (width < 768px) {
            display: none;
          }
        }
      }
    }
  }
  .c-strength__item-achievements-text-note {
    --_note-offset: 3em;
    position: absolute;
    inset-block-end: calc(-26px - var(--_note-offset) + 1em);
    z-index: 0;
    inline-size: 100%;
    padding-block-end: var(--_note-offset);
    margin-block-end: var(--spacing-4xl);
    background: var(--color-lightest);
    @media (width < 768px) {
      padding-block-start: var(--content-mb);
      background: var(--gradient-white-02);
      translate: 0 3px;
    }
  }
  .c-strength__item-achievements-table:after {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    inline-size: 100%;
    block-size: calc(104px + 1em);
    content: "";
    background: var(--gradient-white);
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .c-strength__item-achievements-details:not([open]) + .c-strength__item-achievements-table {
    max-block-size: 564px;
    overflow: hidden;
  }
  .c-strength__item-achievements-details[open] + .c-strength__item-achievements-table {
    max-block-size: 2000px;
  }
  .c-strength__item-achievements-details[open] + .c-strength__item-achievements-table:after {
    pointer-events: none;
    opacity: 0;
  }
  .c-strength__item-achievements-details[open] + .c-strength__item-achievements-table .c-strength__item-achievements-text-note {
    position: static;
    padding-block: 0;
  }
  .c-strength__item-achievements-details-button .c-strength__item-achievements-details-close,
  .c-strength__item-achievements-details-button .c-strength__item-achievements-details-open {
    transition: opacity 0.2s ease;
    will-change: opacity;
  }
  .c-strength__item-achievements-details-button .c-strength__item-achievements-details-open {
    pointer-events: auto;
    opacity: 1;
  }
  .c-strength__item-achievements-details-button .c-strength__item-achievements-details-close {
    pointer-events: none;
    opacity: 0;
  }
  .c-strength__item-achievements-details[open] .c-strength__item-achievements-details-button .c-strength__item-achievements-details-open {
    pointer-events: none;
    opacity: 0;
    transition-delay: 0.4s;
  }
  .c-strength__item-achievements-details:not([open]) .c-strength__item-achievements-details-button .c-strength__item-achievements-details-open,
  .c-strength__item-achievements-details[open] .c-strength__item-achievements-details-button .c-strength__item-achievements-details-close {
    pointer-events: auto;
    opacity: 1;
    transition-delay: 0.4s;
  }
  .c-strength__item-achievements-details:not([open]) .c-strength__item-achievements-details-button .c-strength__item-achievements-details-close {
    pointer-events: none;
    opacity: 0;
    transition-delay: 0.4s;
  }
  .c-strength__item-achievements-details-button {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: grid;
    inline-size: fit-content;
    margin-block-start: calc(1em + var(--spacing-sm));
    margin-inline: auto;
    content: "";
    :where(span) {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      grid-area: 1/1/-1/-1;
      place-content: center;
      align-items: center;
      justify-content: center;
      inline-size: fit-content;
      min-inline-size: 200px;
      padding-block: var(--spacing-xs);
      padding-inline: var(--spacing-lg);
      margin-inline: auto;
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
      color: var(--color-lightest);
      background: var(--gradient-blue-03);
      border: 1px solid var(--color-secondary);
      border-radius: var(--radius-normal);
      transition:
        color 0.2s ease-in-out,
        border-color 0.2s ease-in-out;
    }
  }
  @media (any-hover: hover) {
    .c-strength__item-achievements-details-button:hover :where(span) {
      color: var(--color-secondary);
      background: var(--color-lightest);
    }
  }
  .c-strength__item-team-wrap {
    display: grid;
    gap: var(--spacing-xs);
  }
  .c-strength__item-team-contents-wrap {
    display: grid;
    gap: var(--spacing-s);
    @media (width >=900px) {
      grid-template-columns: 1fr calc(25% - 5px);
    }
  }
  .c-strength__item-team-contents {
    display: grid;
    gap: var(--spacing-s) var(--spacing-md);
    @media (width < 768px) {
      gap: var(--spacing-xs);
    }
    @media (width >=900px) {
      grid-template-rows: subgrid;
      grid-row: span 5;
    }
    &:first-of-type {
      [class="c-strength__item-team-head"] {
        background-color: var(--color-primary);
      }
      [class="c-strength__item-team-link-list"] {
        grid-template-columns: repeat(3, 1fr);
        @media (width <=900px) {
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        }
        > li {
          background-color: var(--color-bg-tertiary02);
        }
      }
    }
    &:last-of-type {
      [class="c-strength__item-team-head"] {
        background-color: var(--color-tertiary);
      }
      [class="c-strength__item-team-link-list"] {
        @media (width >=900px) {
          max-inline-size: 18.375rem;
        }
        @media (width <=900px) {
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        }
        > li {
          background-color: var(--color-bg-tertiary03);
        }
      }
    }
  }
  .c-strength__item-team-head {
    > h5 {
      padding: var(--spacing-xs);
      margin-block-end: 0;
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      color: var(--color-lightest);
      text-align: center;
      letter-spacing: 0.05em;
    }
  }
  .c-strength__item-team-link-list {
    display: grid;
    gap: var(--spacing-min);
    @media (width >=900px) {
      grid-template-rows: subgrid;
      grid-row: span 4;
    }
    > li {
      padding-block: var(--spacing-s) var(--spacing-sm);
      padding-inline: var(--spacing-s);
      @media (width < 768px) {
        padding: var(--spacing-s);
      }
      > [class="c-strength__item-team-link-title"],
      > a {
        display: block;
        margin-block-end: var(--spacing-xs);
        font-weight: var(--font-weight-jp-bold);
        line-height: var(--line-height-button);
      }
      > [class="c-strength__item-team-link-title"] > a,
      > a {
        position: relative;
        color: var(--color-primary);
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color 0.2s;
      }
      > div {
        font-size: var(--font-size-small-2);
        @media (width < 768px) {
          font-size: var(--font-size-small-1);
        }
        > a {
          line-height: 1;
          color: var(--color-secondary);
          text-decoration: underline;
          transition: color 0.2s;
          &:not(:first-child) {
            margin-inline-start: var(--spacing-x-min);
          }
          &:not(:last-child) {
            margin-inline-end: var(--spacing-x-min);
          }
        }
        > span {
          &:not(:first-child) {
            margin-inline-start: var(--spacing-x-min);
          }
          &:not(:last-child) {
            margin-inline-end: var(--spacing-x-min);
          }
        }
      }
    }
  }
  .c-strength__item-team-text-note {
    @media (width < 768px) {
      text-align: end;
    }
  }
  @media (any-hover: hover) {
    .c-strength__item-team-link-list > li > .c-strength__item-team-link-title > a:hover,
    .c-strength__item-team-link-list > li > a:hover,
    .c-strength__item-team-link-list > li > div > a:hover {
      color: var(--color-text-link-hover);
      text-decoration: none;
    }
  }
  .c-strength__item:has(.c-strength__item-grobal-inner) {
    background: var(--color-lightest) url(../images/home/bg-strength-grobal.svg) no-repeat center bottom 14px / auto;
    @media (width < 768px) {
      background: var(--color-lightest) url(../images/home/bg-strength-grobal-sm.svg) no-repeat center top 120px/100% auto;
    }
  }
  .c-strength__item-grobal-contents {
    display: grid;
    gap: var(--spacing-sm) var(--spacing-lg);
    @media (768px <=width) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .c-strength__item-grobal-head {
    margin-block-end: var(--spacing-s);
    h4 {
      font-size: var(--font-size-22);
      font-weight: var(--font-weight-jp-bold);
      line-height: 1;
      color: var(--color-primary);
      @media (width < 768px) {
        font-size: var(--font-size-large);
      }
      > span {
        font-family: var(--font-family-en);
        font-size: 2.375rem;
        @media (width < 768px) {
          font-size: var(--font-size-24);
        }
      }
    }
  }
  .c-strength__item-grobal-link-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border-block-start: 1px solid var(--color-border-light);
    border-inline-start: 1px solid var(--color-border-light);
    > li {
      &:not(:has(a)),
      > a {
        position: relative;
        display: block;
        padding-block: var(--spacing-xs);
        background-color: var(--color-lightest);
        border: 1px solid var(--color-border-light);
        border-block-start: 0;
        border-inline-start: 0;
        transition: background-color 0.2s;
        @media (width < 768px) {
          font-size: var(--font-size-small);
        }
      }
      &:not(:has(a)) {
        padding-inline: var(--spacing-s);
      }
      > a {
        padding-inline: var(--spacing-s) var(--spacing-md);
        &:after {
          position: absolute;
          inset-block: 0;
          inset-inline-end: var(--spacing-xs);
          display: inline-block;
          inline-size: var(--spacing-s);
          block-size: var(--spacing-s);
          margin-block: auto;
          vertical-align: middle;
          content: "";
          background: url(../images/common/icon-arrow-black-right-sm.svg) no-repeat 50% / auto;
          transition: inset-inline-end 0.2s;
        }
      }
    }
  }
  @media (any-hover: hover) {
    .c-strength__item-grobal-link-list > li > a:hover {
      background-color: var(--color-bg-secondary);
      &:after {
        inset-inline-end: var(--spacing-min);
      }
    }
  }
  .c-strength__button {
    @media (width < 576px) {
      margin-block-start: var(--spacing-lg);
    }
    [class="c-button"] {
      margin-block-end: 0;
      &:before {
        @media (width < 576px) {
          max-inline-size: 280px;
          margin-inline: auto;
        }
      }
    }
    [class="c-button__link-request"] {
      display: inline-flex;
      flex-wrap: wrap;
      gap: var(--spacing-xs);
      align-items: center;
      justify-content: center;
      inline-size: 100%;
      max-inline-size: 27.5rem;
      padding-block: var(--spacing-sm);
      padding-inline: var(--spacing-lg) var(--spacing-xl);
      font-weight: 400;
      border: none;
      @media (width < 576px) {
        gap: var(--spacing-min);
        max-inline-size: 17.5rem;
        padding-block: var(--spacing-s);
        padding-inline: var(--spacing-sm) var(--spacing-lg);
      }
      &:after {
        @media (width < 576px) {
          inset-inline-end: var(--spacing-sm);
        }
      }
      > span {
        margin-block-start: 0;
      }
    }
    [class="c-button__link-request-tag"] {
      font-size: var(--font-size-small);
      @media (width < 576px) {
        font-size: var(--font-size-small-3);
      }
    }
    [class="c-button__link-request-text"] {
      font-size: var(--font-size-large);
      @media (width < 576px) {
        font-size: var(--font-size-base);
      }
    }
  }
  .c-strength__button-desc {
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-jp-medium);
    line-height: var(--line-height-button);
    color: var(--color-lightest);
    text-align: center;
    @media (width < 992px) {
      font-size: var(--font-size-large);
    }
    @media (width < 576px) {
      font-size: var(--font-size-large);
    }
    > span {
      @media (width < 576px) {
        display: block;
      }
    }
  }
  .c-strength__btn {
    [class="c-button"] {
      margin-block-end: 0;
    }
    [class="c-button__link-register"] {
      border-color: var(--color-cta);
      &:before {
        border-radius: 0;
      }
    }
  }
}
@layer component {
  .c-oricon {
    position: relative;
    overflow: hidden;
    @media (width > 960px) {
      background-color: var(--color-bg-tertiary04);
    }
    &:before {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      inline-size: 100%;
      block-size: 100%;
      background-color: initial;
      background-image: url(../images/common/bg-oricon-sp.jpg);
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 100% auto;
      opacity: 0.7;
      @media (width < 960px) {
        content: "";
      }
      @media (width < 768px) {
        background-size: cover;
      }
    }
    &:after {
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0;
      z-index: 3;
      inline-size: 100%;
      block-size: 2px;
      content: "";
      background-image: var(--gradient-button-bg-gold-02);
    }
  }
  .c-oricon__inner {
    display: grid;
    > div {
      grid-area: 1/-1;
    }
  }
  .c-oricon__contents {
    position: relative;
    z-index: 2;
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    max-inline-size: calc(var(--view-size-content-main) + var(--spacing-md) * 2);
    block-size: 100%;
    padding-block: var(--spacing-lg) var(--spacing-3xl);
    padding-inline: var(--spacing-md);
    margin-inline: auto;
    @media (width < 960px) {
      flex-direction: column;
      justify-content: center;
      padding-block: var(--spacing-xl);
    }
    &:before {
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: -27%;
      z-index: -1;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      background-image: url(../images/common/bg-oricon-02.png);
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: auto 100%;
      @media (width > 960px) {
        content: "";
      }
    }
  }
  .c-oricon__lead {
    flex-shrink: 0;
    font-weight: var(--font-weight-jp-bold);
    @media (width < 960px) {
      justify-items: center;
      text-align: center;
    }
    > span {
      display: block;
      margin-block-end: var(--spacing-s);
      font-size: var(--font-size-large);
      line-height: var(--line-height-button);
      color: var(--color-text-gray-02);
    }
    > p {
      font-size: var(--font-size-24);
      line-height: var(--line-height-title);
      color: var(--color-primary);
      > span {
        display: block;
      }
    }
  }
  .c-oricon__main {
    position: relative;
    display: grid;
    gap: var(--spacing-md);
    align-items: center;
  }
  .c-oricon__main-item {
    display: grid;
    gap: var(--spacing-xs) var(--spacing-md);
    align-items: center;
    @media (width > 960px) {
      grid-template-columns: auto 1fr;
    }
    &:first-child {
      [class="c-oricon__main-item-image"] {
        max-inline-size: 90px;
        @media (width < 768px) {
          max-inline-size: 80px;
        }
      }
    }
    &:nth-child(2) {
      [class="c-oricon__main-item-image"] {
        max-inline-size: 230px;
      }
      [class="c-oricon__main-item-contents"] {
        @media (width < 960px) {
          grid-template-columns: auto;
        }
      }
    }
  }
  .c-oricon__main-item-contents {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-md);
    align-items: center;
    @media (width < 960px) {
      grid-template-columns: auto auto;
      gap: var(--spacing-s);
      justify-content: center;
    }
  }
  .c-oricon__main-item-text-rank {
    font-size: 17px;
    font-weight: var(--font-weight-jp-bold);
    color: var(--color-primary);
    text-align: center;
  }
  .c-oricon__main-item-image {
    @media (width < 960px) {
      justify-self: center;
    }
    > img {
      inline-size: 100%;
      block-size: auto;
    }
  }
  .c-oricon__main-item-text {
    letter-spacing: -0.03em;
    @media (width < 960px) {
      align-items: center;
      justify-self: center;
    }
    > a {
      color: var(--color-text-gray-02);
    }
    > a > p,
    > p {
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      color: var(--color-primary);
      @media (width < 768px) {
        font-size: var(--font-size-large);
      }
      &.c-oricon__main-item-text-center {
        text-align: center !important;
      }
      > span {
        display: block;
        font-size: 17px;
        font-weight: var(--font-weight-jp-bold);
        color: var(--color-primary);
        > span {
          @media (width < 960px) {
            display: block;
          }
        }
        &.c-oricon__main-item-text-small {
          font-size: 15px !important;
          font-weight: var(--font-weight-jp-regular) !important;
          color: var(--color-text-gray-02) !important;
        }
      }
    }
    > span {
      display: inline-block;
      font-size: var(--font-size-small-1);
      line-height: var(--line-height-button);
      color: var(--color-text-gray-02);
    }
  }
  .c-oricon__bg {
    position: relative;
    pointer-events: none;
    &:before {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      background-image: url(../images/common/bg-oricon-01.png);
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: auto 100%;
      @media (width > 960px) {
        content: "";
      }
    }
  }
  .c-oricon__bg-obj-01 {
    position: absolute;
    inset-block-end: -6.25rem;
    inset-inline-end: -6.25rem;
    display: inline-block;
    inline-size: 11.0625rem;
    block-size: 11.875rem;
    background: var(--color-bg-tertiary05);
    rotate: 45deg;
    @media (width < 960px) {
      display: none;
    }
  }
}
@layer component {
  .c-step {
    margin-block-end: var(--spacing-4xl);
    @media (width < 768px) {
      margin-block-end: var(--spacing-3xl);
    }
  }
  .c-step__item {
    padding-block: var(--spacing-lg);
    @media (width < 768px) {
      padding-block: var(--spacing-md);
    }
    &:not(:last-child) {
      border-block-end: 1px solid var(--color-border-light);
    }
    [class="c-heading-03"] {
      color: var(--color-text-primary);
      &:before {
        inset-block-start: 6px;
        block-size: 24px;
        @media (width < 768px) {
          inset-block-start: 0;
          block-size: 100%;
        }
      }
      > span {
        font-family: var(--font-family-en);
        font-size: var(--font-size-large);
        font-weight: var(--font-weight-en-medium);
        line-height: 1;
        color: var(--color-secondary);
        letter-spacing: 0.04em;
        @media (768px <=width) {
          margin-inline-end: var(--spacing-s);
        }
        @media (width < 768px) {
          display: block;
          margin-block-end: var(--spacing-min);
        }
        > span {
          font-size: var(--font-size-32);
          @media (width < 768px) {
            font-size: var(--font-size-26);
          }
        }
      }
    }
    [class="c-text"] {
      margin-block-end: var(--spacing-s);
      @media (width < 768px) {
        margin-block-end: var(--spacing-min);
      }
      &:last-child {
        margin-block-end: 0;
      }
    }
    [class="c-text__note"] {
      margin-block-end: var(--spacing-sm);
    }
  }
  .c-step__btn {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-s);
    margin-block-start: var(--spacing-sm);
    @media (width < 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-min);
    }
    [class="c-button"] {
      block-size: 100%;
      margin-block-end: 0;
      font-size: var(--font-size-small-1);
    }
    [class="c-button__link"] {
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 100%;
      min-inline-size: auto;
      block-size: 100%;
      padding-inline: var(--spacing-md) var(--spacing-lg);
      &:after {
        inset-inline-end: var(--spacing-s);
      }
    }
  }
}
@layer component {
  .c-grid {
    display: grid;
    grid-template-columns: repeat(var(--col-pc), 1fr);
    gap: var(--spacing-s);
    @media (width < 768px) {
      grid-template-columns: repeat(var(--col-sp), 1fr);
      gap: var(--spacing-min);
    }
    [class="c-button"] {
      margin-block-end: 0;
    }
    [class="c-button__link"] {
      inline-size: 100%;
      min-inline-size: auto;
    }
  }
}
@layer component {
  .c-resume {
    search.c-search-panel {
      margin-block-end: var(--spacing-5xl);
    }
  }
  .c-resume__templates {
    padding-block: var(--spacing-lg) var(--spacing-xl);
    padding-inline: var(--spacing-lg);
    font-size: var(--font-size-small);
    line-height: var(--line-height-text);
    border: 1px solid var(--color-text-gray);
    border-block-start: 4px solid var(--color-secondary);
    @media (width < 768px) {
      padding-block: var(--spacing-sm) var(--spacing-md);
      padding-inline: var(--spacing-sm);
      font-size: var(--font-size-base);
    }
    :where(p > span) {
      display: block;
    }
    div.c-table {
      margin-block-end: var(--spacing-sm);
      @media (768px <=width) {
        margin-inline: var(--spacing-md);
      }
      :where(ul) {
        line-height: var(--line-height-text);
        :where(li) {
          position: relative;
          padding-inline-start: 1em;
          &:before {
            position: absolute;
            inset: 0 auto auto 0;
            content: "・";
          }
        }
      }
    }
    div.c-table__sm-block th {
      inline-size: auto;
    }
  }
  .c-resume__heading {
    text-align: end;
  }
  .c-resume__title {
    padding-block-end: var(--spacing-xs);
  }
  .c-resume__description {
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-sm);
    margin-block-end: var(--spacing-sm);
    border: 1px solid var(--color-border-default);
    @media (768px <=width) {
      margin-inline: var(--spacing-md);
    }
  }
  .c-resume__employment-details-01 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-end: var(--spacing-min);
    padding-inline-end: var(--spacing-md);
    margin-block-end: var(--spacing-xs);
    border-block-end: 1px solid var(--color-border-default);
    @media (992px <=width) {
      margin-inline: var(--spacing-md);
    }
    @media (width < 768px) {
      flex-direction: column;
      align-items: flex-start;
    }
    :where(span) {
      &:last-child {
        @media (768px <=width) {
          padding-inline-end: var(--spacing-lg);
        }
      }
    }
  }
  .c-resume__employment-details-02 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-min) 2rem;
    padding-block-end: var(--spacing-xs);
    @media (768px <=width) {
      margin-inline: var(--spacing-md);
    }
    & > :first-child {
      flex-basis: 100%;
    }
  }
  .c-resume__qualification {
    position: relative;
    padding-block-end: var(--spacing-sm);
    padding-inline-start: 24px;
    margin-inline: var(--spacing-md);
    &:before {
      position: absolute;
      inset: 0.72em auto auto 9px;
      display: block;
      inline-size: 6px;
      block-size: 6px;
      content: "";
      background-color: var(--color-secondary);
      border-radius: 3px;
    }
  }
  .c-resume__document-end {
    text-align: end;
  }
  .c-resume__sample-title {
    padding-block: var(--spacing-2xl) var(--spacing-xs);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-jp-bold);
    line-height: var(--line-height-text);
    text-align: center;
    @media (width < 768px) {
      font-size: var(--font-size-base);
    }
    :where(span) {
      @media (width < 768px) {
        display: block;
      }
    }
  }
  .c-resume__sample-image {
    padding-block-end: var(--spacing-xs);
    :where(a) {
      display: block;
      max-inline-size: 496px;
      margin-inline: auto;
      :where(img) {
        inline-size: 100%;
        block-size: auto;
      }
    }
    & + div.c-button {
      margin-block-end: var(--spacing-md);
    }
  }
  .c-resume__point {
    padding-block-end: var(--spacing-lg);
  }
  .c-resume__point-text {
    padding-block-end: var(--spacing-md);
  }
  .c-resume__example {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-min);
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-s);
    margin-block-end: var(--spacing-md);
    background: var(--color-bg-secondary);
    :where(ul) {
      font-size: var(--font-size-small);
      @media (width < 768px) {
        font-size: var(--font-size-base);
      }
      li:not(:last-of-type) {
        padding-block-end: var(--spacing-min);
      }
      & > li {
        position: relative;
        padding-inline-start: 24px;
        &:before {
          position: absolute;
          inset: 0.72em auto auto 9px;
          display: block;
          inline-size: 6px;
          block-size: 6px;
          content: "";
          background-color: var(--color-secondary);
          border-radius: 3px;
        }
      }
    }
    &:has(+ h3) {
      margin-block-end: var(--spacing-2xl);
    }
  }
  .c-resume__example-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-jp-bold);
    line-height: var(--line-height-title);
    color: var(--color-primary);
  }
  .c-resume__related-link {
    padding-block-end: var(--spacing-2xl);
    @media (768px <=width) {
      text-align: center;
    }
    div.c-resume__point & {
      @media (width < 768px) {
        text-align: center;
      }
    }
    :where(a) {
      position: relative;
      display: inline-flex;
      gap: 4px;
      align-items: center;
      font-size: var(--font-size-small);
      color: var(--color-secondary);
      transition: color 0.2s ease;
      @media (width < 768px) {
        display: inline;
        font-size: var(--font-size-base);
      }
      &:before {
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        display: block;
        block-size: 1px;
        content: "";
        background-color: currentcolor;
        transition: opacity 0.2s ease;
      }
      &[target="_blank"] {
        :before {
          inset-inline-end: 20px;
        }
        &:after {
          display: inline-block;
          inline-size: 16px;
          block-size: 16px;
          margin-inline-start: var(--spacing-min);
          content: "";
          background-image: url(../images/common/icon-blank.svg);
          background-repeat: no-repeat;
          background-position: 50%;
          background-size: contain;
          transition: background-image 0.2s ease;
          @media (width < 768px) {
            margin-block-end: calc(var(--spacing-x-min) * -1);
          }
        }
      }
      &:hover {
        color: var(--color-text-link-hover);
        &:before {
          opacity: 0;
        }
        &:after {
          background-image: url(../images/common/icon-blank-lighter.svg);
        }
      }
    }
  }
}
@layer component {
  a.c-anchor-link {
    display: inline-flex;
    align-items: center;
    padding-block: var(--spacing-min);
    padding-inline: var(--spacing-xs) var(--spacing-min);
    margin-inline: var(--spacing-xs);
    font-size: var(--font-size-small-3);
    font-weight: var(--font-weight-jp-bold);
    line-height: 1.2;
    color: var(--color-lightest);
    letter-spacing: 0.04em;
    background-color: var(--color-anchor-link);
    border: 1px solid #0000;
    transition:
      color 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease;
    &:after {
      display: inline-block;
      inline-size: 12px;
      block-size: 12px;
      margin-inline-start: 4px;
      content: "";
      background: url(../images/common/icon-arrow-white-down-sm.svg) no-repeat 50% / contain;
    }
  }
  @media (any-hover: hover) {
    a.c-anchor-link:hover {
      color: var(--color-cta);
      background-color: var(--color-lightest);
      border-color: var(--color-cta);
      &:after {
        background: url(../images/common/icon-arrow-gold-down-sm.svg) no-repeat 50% / contain;
      }
    }
  }
}
@layer component {
  .c-anchor-point {
    display: inline-flex;
    padding-block: var(--spacing-min);
    padding-inline: var(--spacing-min);
    margin-inline: var(--spacing-min) var(--spacing-xs);
    font-size: var(--font-size-small-3);
    font-weight: var(--font-weight-jp-bold);
    line-height: 1.2;
    color: var(--color-lightest);
    letter-spacing: 0.04em;
    background: var(--color-anchor-link);
    translate: 0 -2px;
  }
}
@layer component {
  .c-support {
    position: relative;
    padding-block: var(--spacing-lg) var(--spacing-xl);
    margin-block-end: var(--spacing-2xl);
    overflow: hidden;
    background: url(../images/common/bg-support.png) no-repeat 50% / cover;
    border: 1px solid var(--color-border-default);
    @media (width < 768px) {
      padding-block: var(--spacing-xl);
      background: url(../images/common/bg-support-sp.png) no-repeat 50% / cover;
    }
    div.c-button {
      margin-block-end: var(--spacing-no);
    }
  }
  .c-support__wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    max-inline-size: var(--view-size-content-main);
    padding-inline: var(--content-padding);
    margin-inline: auto;
    text-align: center;
  }
  .c-support__heading h2 {
    position: relative;
    padding-block-end: var(--spacing-s);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-jp-medium);
    font-feature-settings: "palt" on;
    line-height: var(--line-height-title);
    letter-spacing: 0.1em;
    &:after {
      position: absolute;
      inset-block: auto 0;
      inset-inline: 0;
      inline-size: 180px;
      block-size: 1px;
      margin-inline: auto;
      content: "";
      background: var(--color-cta);
    }
  }
  .c-support__heading h2 > :where(span) {
    display: block;
    > :where(span) {
      @media (width < 768px) {
        display: block;
      }
    }
  }
  .c-support__text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-text);
    color: var(--color-text-primary);
  }
  .c-support__text > :where(p) > :where(span) {
    display: block;
    > :where(span) {
      @media (width < 768px) {
        display: block;
      }
    }
  }
}
@layer component {
  .c-side-nav {
    inline-size: 100%;
    block-size: 100%;
    border-block-start: 1px solid var(--color-secondary);
    @media (768px <=width) {
      padding-block-end: var(--spacing-5xl);
    }
  }
  .c-side-nav__body {
    block-size: 100%;
  }
  .c-side-nav__links {
    margin-block-end: var(--spacing-lg);
    @media (width < 768px) {
      margin-block-end: var(--spacing-md);
    }
    details {
      &::details-content {
        @media (prefers-reduced-motion: no-preference) {
          overflow: clip;
          transition-duration: 0.3s;
          transition-property: content-visibility, block-size;
          transition-behavior: allow-discrete;
        }
      }
      &:not([open])::details-content {
        block-size: 0;
      }
    }
    > details {
      > summary {
        position: relative;
        display: block;
        padding-block: var(--spacing-sm);
        padding-inline: var(--spacing-s);
        font-weight: var(--font-weight-jp-bold);
        line-height: var(--line-height-title);
        color: inherit;
        text-decoration: none;
        cursor: pointer;
        border-block-end: 1px solid var(--color-border-light);
        @media (width < 768px) {
          padding-block: var(--spacing-s);
          font-size: var(--font-size-large);
        }
        &:after,
        &:before {
          position: absolute;
          inset-block: 0;
          display: inline-block;
          margin-block: auto;
          vertical-align: middle;
          content: "";
        }
        &:before {
          inset-inline-end: var(--spacing-s);
          inline-size: var(--spacing-md);
          block-size: var(--spacing-md);
          background-color: var(--color-bg-category);
        }
        &:after {
          inset-inline-end: var(--spacing-sm);
          z-index: 2;
          inline-size: var(--spacing-sm);
          block-size: var(--spacing-sm);
          background: url(../images/common/icon-arrow-gray-down.svg) no-repeat 50%/100% auto;
          transition: rotate 0.3s;
        }
        [open] & {
          &:after {
            rotate: 180deg;
          }
        }
      }
      > div {
        border-block-end: 1px solid #0000;
        [open] & {
          border-color: var(--color-border-light);
        }
      }
    }
  }
  .c-side-nav__links-contens {
    padding-inline: var(--spacing-s);
    background-color: var(--color-bg-gray);
    > ul {
      > li {
        &:has(> a)&:not(:last-child) {
          border-block-end: 1px solid var(--color-border-light);
        }
        &:not(:last-child) {
          > details {
            > summary {
              border-block-end: 1px solid var(--color-border-gray-03);
            }
          }
        }
        > a,
        summary {
          position: relative;
          display: block;
          inline-size: 100%;
          padding-block: var(--spacing-s);
          padding-inline-end: var(--spacing-md);
          font-size: var(--font-size-small);
          font-weight: var(--font-weight-jp-medium);
          line-height: var(--line-height-title);
          color: var(--color-secondary);
          transition: color 0.2s;
          @media (width < 768px) {
            padding-block: var(--spacing-s);
            font-size: var(--font-size-base);
          }
          &:after {
            position: absolute;
            inset-block: 0;
            inset-inline-end: 0;
            display: inline-block;
            inline-size: var(--spacing-md);
            block-size: var(--spacing-md);
            margin-block: auto;
            vertical-align: middle;
            content: "";
            background: url(../images/common/icon-arrow-gray-right.svg) no-repeat 50% / auto;
            transition: rotate 0.2s;
          }
        }
        summary {
          &:after {
            rotate: 90deg;
          }
        }
        > details {
          > div {
            border-block-end: 1px solid #0000;
            [open] & {
              border-color: var(--color-border-light);
            }
          }
          &[open] {
            summary {
              &:after {
                rotate: 270deg;
              }
            }
          }
        }
        &:last-child {
          > details {
            &[open] {
              > summary {
                border-block-end: 1px solid var(--color-border-gray-03);
              }
            }
            > div {
              [open] & {
                border-color: #0000;
              }
            }
          }
        }
      }
    }
  }
  @media (any-hover: hover) {
    .c-side-nav__links-contens > ul li a:hover,
    .c-side-nav__links-contens > ul li summary:hover {
      color: var(--color-text-link-hover);
    }
    .c-side-nav__links-contens > ul li a:hover {
      &:after {
        inset-inline-end: -4px;
      }
    }
  }
  .c-side-nav__links-list {
    padding-block: var(--spacing-xs);
    > ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-min) var(--spacing-xs);
      > li {
        > a {
          position: relative;
          display: inline-block;
          padding-block: var(--spacing-min);
          padding-inline: var(--spacing-sm) 0;
          font-size: var(--font-size-small);
          font-weight: var(--font-weight-jp-medium);
          font-feature-settings: "palt";
          line-height: var(--line-height-button);
          color: var(--color-text-gray);
          text-decoration: none;
          text-underline-offset: 2px;
          @media (width < 768px) {
            padding-block: 6px;
            font-size: var(--font-size-small);
          }
          &:after {
            position: absolute;
            inset-block-start: 8px;
            inset-inline-start: 0;
            display: inline-block;
            inline-size: var(--spacing-s);
            block-size: var(--spacing-s);
            vertical-align: middle;
            content: "";
            background: url(../images/common/icon-arrow-gray-right-sm.svg) no-repeat 50%/100% auto;
            transition: inset-inline-start 0.2s;
            @media (width < 768px) {
              inset-block-start: 9px;
            }
          }
          > span {
            display: inline-block;
          }
        }
      }
    }
  }
  .c-side-nav__articles {
    margin-block-end: var(--spacing-lg);
    @media (width < 768px) {
      margin-block-end: var(--spacing-md);
    }
    h2 {
      position: relative;
      padding-inline-start: 11px;
      margin-block-end: var(--spacing-sm);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-jp-medium);
      color: var(--color-primary);
      &:before {
        position: absolute;
        inset-block-start: 4px;
        inset-inline-start: 0;
        display: inline-block;
        inline-size: 3px;
        block-size: 18px;
        content: "";
        background-color: var(--color-secondary);
      }
    }
  }
  .c-side-nav__articles-contents {
    display: grid;
    gap: var(--spacing-s);
  }
  .c-side-nav__articles-item {
    padding-block-end: var(--spacing-s);
    border-block-end: 1px solid var(--color-border-light);
    > a {
      display: flex;
      gap: var(--spacing-s);
      align-items: center;
      text-decoration: none;
    }
  }
  @media (any-hover: hover) {
    .c-side-nav__articles-item > a:hover {
      [class="c-side-nav__articles-item-text"] {
        color: var(--color-text-link-hover);
        text-decoration: underline;
      }
    }
  }
  .c-side-nav__articles-item-image {
    flex-shrink: 0;
    max-inline-size: var(--spacing-3xl);
    img {
      inline-size: 100%;
      block-size: auto;
      vertical-align: middle;
    }
  }
  .c-side-nav__articles-item-text {
    flex: 1 1 0;
    line-height: var(--line-height-title);
    color: var(--color-secondary);
    transition: color 0.2s;
    @media (768px <=width) {
      font-size: var(--font-size-small);
    }
  }
  .c-side-nav__cta-inner {
    display: grid;
    > div {
      grid-area: 1/-1;
    }
  }
  .c-side-nav__cta-textarea {
    position: relative;
    z-index: 4;
    display: grid;
    align-items: center;
    align-self: center;
    block-size: 100%;
    padding: var(--spacing-md);
    text-align: center;
    &:after {
      position: absolute;
      inset-block: 0;
      inset-inline-end: 0;
      z-index: -1;
      inline-size: 90%;
      content: "";
      background-image: url(../images/home/bg-cta-sp.png);
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: cover;
      mix-blend-mode: multiply;
      opacity: 0.4;
      mask-image: linear-gradient(270deg, #fff 80%, #fff0);
      mask-repeat: no-repeat;
      mask-size: 100% auto;
    }
    p {
      margin-block-end: var(--spacing-sm);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
      color: var(--color-lightest);
      @media (width < 768px) {
        font-size: var(--font-size-large);
      }
      > span {
        display: block;
      }
    }
  }
  .c-side-nav__cta-bg {
    position: relative;
    pointer-events: none;
    &:after,
    &:before {
      position: absolute;
      inset: 0;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      content: "";
      background-position: 50%;
    }
    &:before {
      background-image: url(../images/home/hero-bg-01.png);
      background-repeat: repeat;
      background-size: 60px;
    }
    &:after {
      pointer-events: none;
      background-image: var(--gradient-hero-bg-blue);
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.7;
    }
  }
  .c-side-nav__cta-button {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-normal);
    &:before {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      pointer-events: none;
      content: "";
      background: var(--gradient-button-bg-gold);
      border-radius: inherit;
    }
    a {
      position: relative;
      display: flex;
      gap: var(--spacing-min);
      align-items: center;
      justify-content: center;
      inline-size: 100%;
      padding-block: var(--spacing-s);
      padding-inline: var(--spacing-md) 28px;
      margin-inline: auto;
      overflow: hidden;
      font-size: 0.9375rem;
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
      color: var(--color-lightest);
      background-color: initial;
      border-radius: var(--radius-normal);
      isolation: isolate;
      transition-timing-function: ease-in;
      transition-duration: 0.2s;
      transition-property: color, background;
      > span {
        position: relative;
        z-index: 2;
      }
      &:before {
        position: absolute;
        inset: 0;
        z-index: -1;
        padding: 1px;
        pointer-events: none;
        content: "";
        background: var(--gradient-border-gold);
        border-radius: inherit;
        mask:
          linear-gradient(var(--color-lightest) 0 0) content-box,
          linear-gradient(var(--color-lightest) 0 0);
        mask-composite: exclude;
        transition-timing-function: ease-in;
        transition-duration: 0.2s;
        transition-property: opacity;
      }
      &:after {
        position: absolute;
        inset-block: 0;
        inset-inline-end: var(--spacing-xs);
        display: inline-block;
        inline-size: var(--spacing-sm);
        block-size: var(--spacing-sm);
        margin-block: auto;
        vertical-align: middle;
        content: "";
        background: url(../images/common/icon-arrow-white-right.svg) no-repeat 50%/100% auto;
        transition-timing-function: ease-in;
        transition-duration: 0.2s;
        transition-property: background-image;
        @media (width < 576px) {
          inset-inline-end: var(--spacing-xs);
        }
      }
    }
  }
  @media (any-hover: hover) {
    .c-side-nav__cta-button a:hover {
      color: var(--color-cta);
      background-color: var(--color-lightest);
      &:after {
        background-image: url(../images/common/icon-arrow-gold-right.svg);
      }
    }
  }
}
@layer component {
  .c-successful-case {
    > section {
      margin-block-end: var(--spacing-2xl);
      &:has(.c-consultant-support) {
        margin-block-end: var(--spacing-5xl);
        @media (width < 768px) {
          margin-block-end: var(--spacing-2xl);
        }
      }
      &:last-child,
      > :last-child {
        margin-block-end: 0;
      }
    }
  }
  .c-successful-case__example {
    position: relative;
    padding: var(--spacing-md);
    overflow: hidden;
    border: 1px solid var(--color-border-default);
    @media (width < 768px) {
      padding-inline: var(--spacing-sm);
    }
    &:before {
      position: absolute;
      inset: 0;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      content: "";
      background: var(--gradient-bg-successful-case);
      opacity: 0.08;
    }
    &:after {
      position: absolute;
      inset-block-start: -6.875rem;
      inset-inline-start: -3.125rem;
      inline-size: 8.75rem;
      block-size: 13.4375rem;
      content: "";
      background: var(--gradient-obj-successful-case);
      mix-blend-mode: multiply;
      opacity: 0.4;
      rotate: -135deg;
      @media (width < 768px) {
        inset-block-start: -8.125rem;
      }
    }
  }
  .c-successful-case__example-head {
    display: grid;
    grid-template-columns: 24px auto;
    gap: var(--spacing-s);
    align-items: center;
    justify-content: center;
    margin-block-end: var(--spacing-sm);
    > h2 {
      font-size: var(--font-size-22);
      @media (width < 768px) {
        font-size: var(--font-size-20);
      }
    }
    &:before {
      position: absolute;
      inset-block-start: -10rem;
      inset-inline-end: -1.25rem;
      inline-size: 14.6875rem;
      block-size: 17.6875rem;
      background: var(--gradient-obj-successful-case);
      mix-blend-mode: multiply;
      opacity: 0.4;
      rotate: -135deg;
      @media (768px <=width) {
        content: "";
      }
    }
    &:after {
      position: absolute;
      inset-block-end: -7.5rem;
      inset-inline-end: -6.25rem;
      inline-size: 8.25rem;
      block-size: 22.5rem;
      content: "";
      background: var(--gradient-obj-successful-case);
      mix-blend-mode: multiply;
      opacity: 0.4;
      rotate: -135deg;
    }
  }
  .c-successful-case__example-content {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--spacing-s) var(--spacing-sm);
    @media (768px <=width) {
      grid-template-columns: 1fr 1fr;
    }
  }
  .c-successful-case__example-after,
  .c-successful-case__example-before {
    display: grid;
    grid-template-rows: auto 1fr;
  }
  .c-successful-case__example-after-head,
  .c-successful-case__example-before-head {
    padding-block: var(--spacing-xs);
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-jp-bold);
    line-height: var(--line-height-title);
    text-align: center;
    @media (width < 768px) {
      font-size: var(--font-size-20);
    }
  }
  .c-successful-case__example-before-head {
    background-color: var(--color-bg-tertiary);
  }
  .c-successful-case__example-after-head {
    color: var(--color-lightest);
    background: var(--gradient-button-bg-gold-02);
  }
  .c-successful-case__example-after-inner,
  .c-successful-case__example-before-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-s);
    text-align: center;
    > span {
      display: inline-block;
      font-size: 0.9375rem;
      line-height: var(--line-height-button);
      @media (width < 768px) {
        font-size: var(--font-size-base);
      }
      > span {
        display: block;
      }
    }
    > p {
      display: flex;
      gap: var(--spacing-x-min);
      justify-content: center;
      font-size: var(--font-size-22);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
    }
  }
  .c-successful-case__example-before-inner {
    background-color: var(--color-bg-secondary);
  }
  .c-successful-case__example-after-inner {
    background-color: var(--color-cta-lighter);
    > p {
      font-size: var(--font-size-26);
      color: var(--color-cta);
    }
  }
  .c-successful-case__comment {
    padding: var(--spacing-lg);
    margin-block-end: var(--spacing-md);
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      padding-block: var(--spacing-md);
      padding-inline: var(--spacing-sm);
    }
    > h2 {
      padding-block-end: var(--spacing-xs);
      margin-block-end: var(--spacing-s);
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-title);
      border-block-end: 1px solid var(--color-border-default);
      @media (width < 768px) {
        font-size: var(--font-size-20);
      }
    }
    > h3 {
      margin-block-end: var(--spacing-xs);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-jp-bold);
      color: var(--color-secondary);
      @media (width < 768px) {
        font-size: var(--font-size-large);
      }
    }
    > p {
      font-size: var(--font-size-small);
      @media (width < 768px) {
        font-size: var(--font-size-base);
      }
    }
  }
  .c-successful-case__radio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: var(--spacing-xs) var(--spacing-s);
    padding: var(--spacing-sm);
    margin-block-end: var(--spacing-md);
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
      padding: var(--spacing-s);
    }
    [class="c-radio"]:has(input[type="radio"]) {
      > span.c-radio__text {
        font-weight: var(--font-weight-jp-regular);
        color: var(--color-darkest);
      }
    }
  }
  .c-successful-case__links {
    display: grid;
    gap: var(--spacing-sm);
    padding-block-end: var(--pbe-pc, var(--spacing-no));
    margin-block-end: var(--mbe-pc, var(--spacing-2xl));
    @media (768px <=width) {
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
    @media (width < 768px) {
      gap: var(--spacing-s);
      padding-block-end: var(--pbe-sp, var(--pbe-pc, var(--spacing-no)));
      margin-block-end: var(--mbe-sp, var(--mbe-pc, var(--spacing-2xl)));
    }
  }
  .c-successful-case__link-item {
    > a {
      display: block;
      block-size: 100%;
      padding: var(--spacing-sm);
      border: 1px solid var(--color-border-light);
      border-radius: var(--radius-normal);
      transition: background-color 0.2s;
    }
    &:has(.c-successful-case__link-item-text) {
      > a {
        padding-block-end: var(--spacing-no);
      }
      div.c-successful-case__link-item-case {
        margin-block-end: var(--spacing-sm);
      }
    }
  }
  @media (any-hover: hover) {
    .c-successful-case__link-item > a:hover {
      background-color: var(--color-bg-gray);
      [class="c-successful-case__link-item-head-text"] > p {
        color: var(--color-text-link-hover);
      }
    }
  }
  .c-successful-case__link-item-head {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--spacing-s);
    margin-block-end: var(--spacing-s);
    @media (width < 768px) {
      grid-template-columns: 32px 1fr;
    }
  }
  .c-successful-case__link-item-head-icon {
    padding-block-start: 6px;
    @media (width < 768px) {
      max-inline-size: var(--spacing-lg);
    }
    img {
      inline-size: 100%;
      block-size: auto;
    }
  }
  .c-successful-case__link-item-head-text {
    > span {
      display: flex;
      gap: var(--spacing-x-min);
      font-size: var(--font-size-small);
    }
    > p,
    > span {
      line-height: var(--line-height-title);
    }
    > p {
      font-weight: var(--font-weight-jp-bold);
      color: var(--color-secondary);
      transition: color 0.2s;
    }
  }
  .c-successful-case__link-item-case {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-s);
  }
  .c-successful-case__link-item-after,
  .c-successful-case__link-item-before {
    display: grid;
    grid-template-rows: auto 1fr;
  }
  .c-successful-case__link-item-after-head,
  .c-successful-case__link-item-before-head {
    padding-block: var(--spacing-min);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-jp-bold);
    line-height: var(--line-height-title);
    text-align: center;
  }
  .c-successful-case__link-item-before-head {
    background-color: var(--color-bg-tertiary);
  }
  .c-successful-case__link-item-after-head {
    color: var(--color-lightest);
    background: var(--gradient-button-bg-gold-02);
  }
  .c-successful-case__link-item-after-inner,
  .c-successful-case__link-item-before-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--spacing-s);
    padding-inline: var(--spacing-xs);
    text-align: center;
    > span {
      display: inline-block;
      font-size: var(--font-size-small-2);
      line-height: var(--line-height-title);
    }
    > p {
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
      + span {
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-jp-bold);
        line-height: var(--line-height-button);
      }
    }
  }
  .c-successful-case__link-item-before-inner {
    background-color: var(--color-bg-gray-02);
    > p {
      font-size: var(--font-size-small);
      > span {
        font-size: var(--font-size-base);
      }
    }
  }
  .c-successful-case__link-item-after-inner {
    background-color: var(--color-cta-lighter);
    > p {
      font-size: var(--font-size-large);
      color: var(--color-cta);
      > span {
        font-size: var(--font-size-20);
      }
      + span {
        color: var(--color-cta);
      }
    }
  }
  .c-successful-case__link-item-text {
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-sm);
    margin-block-start: var(--spacing-sm);
    margin-inline: calc(var(--spacing-sm) * -1);
    background: var(--color-bg-secondary);
    > p {
      position: relative;
      padding-inline-end: calc(var(--spacing-sm) + var(--spacing-min));
      font-size: var(--font-size-small-1);
      font-weight: var(--font-weight-jp-bold);
      line-height: var(--line-height-button);
      color: var(--color-primary);
      text-align: end;
      &:after {
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        inline-size: 16px;
        block-size: 16px;
        margin-block: auto;
        content: "";
        background: url(../images/common/icon-arrow-primary-right.svg) no-repeat 50%;
      }
    }
  }
  @media (768px <=width) {
    .c-successful-case__link-item > a {
      display: flex;
      flex-direction: column;
    }
    .c-successful-case__link-item-text {
      margin-block-start: auto;
    }
  }
}
@layer component {
  .c-detail__head {
    position: relative;
    padding: var(--spacing-md);
    padding-block-end: var(--spacing-xl);
    margin-block-end: var(--spacing-2xl);
    border: 1px solid var(--color-border-default);
    @media (width < 768px) {
      padding-block: var(--spacing-md);
      padding-inline: var(--spacing-sm);
    }
    &:after {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      pointer-events: none;
      content: "";
      background: var(--gradient-gold-05);
      opacity: 0.1;
    }
  }
  .c-detail__head-heading {
    > h2 {
      position: relative;
      padding-block-end: var(--spacing-s);
      margin-block-end: var(--spacing-sm);
      font-size: var(--font-size-20);
      font-weight: var(--font-weight-jp-medium);
      line-height: var(--line-height-title);
      text-align: center;
      &:after {
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        inline-size: 180px;
        block-size: 1px;
        margin-inline: auto;
        content: "";
        background-color: var(--color-cta);
      }
      > span {
        @media (width < 768px) {
          display: block;
        }
      }
    }
  }
  .c-detail__head-desc {
    margin-block-end: var(--spacing-md);
    font-size: var(--font-size-small);
    @media (768px <=width) {
      text-align: center;
    }
    > span {
      display: block;
      > span {
        font-weight: var(--font-weight-jp-bold);
        color: var(--color-cta);
      }
    }
  }
  .c-detail__head-btn {
    [class="c-button"] {
      margin-block-end: 0;
    }
  }
}
@layer component {
  .c-author {
    margin-block-end: var(--spacing-2xl);
    border: 1px solid var(--color-border-light);
  }
  .c-author__head {
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-md);
    font-weight: var(--font-weight-jp-bold);
    color: var(--color-primary);
    background-color: var(--color-bg-tertiary);
  }
  .c-author__wrap {
    &:has(.c-author__contents:nth-child(2)) {
      [class="c-author__contents"]:not(:last-child) {
        &:before {
          position: absolute;
          inset-block-end: 0;
          inset-inline: 0;
          inline-size: calc(100% - var(--spacing-sm) * 2);
          block-size: 1px;
          margin-inline: auto;
          content: "";
          background-color: var(--color-border-light);
        }
      }
    }
  }
  .c-author__contents {
    position: relative;
    &:not(:has(> a)),
    > a {
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: 150px 1fr;
      gap: var(--spacing-xs) var(--spacing-md);
      padding-block: var(--spacing-sm) var(--spacing-md);
      padding-inline: var(--spacing-md);
      transition: background-color 0.2s;
      @media (width < 768px) {
        grid-template-columns: 120px 1fr;
        gap: var(--spacing-sm) var(--spacing-xs);
        padding: var(--spacing-sm);
      }
    }
    &:not(:has(> a)) {
      [class="c-author__contents-head-main"] {
        text-decoration: none;
      }
    }
  }
  @media (any-hover: hover) {
    .c-author__contents > a:hover {
      background-color: var(--color-bg-secondary);
      [class="c-author__contents-text-head-main"] {
        color: var(--color-text-link-hover);
        text-decoration: none;
      }
      [class="c-author__contents-text-head-sub"] {
        color: var(--color-text-link-hover);
      }
    }
  }
  .c-author__contents-image {
    display: flex;
    grid-row: 1/3;
    grid-column: 1/2;
    justify-content: center;
    aspect-ratio: 1/1;
    @media (width < 768px) {
      grid-row: 1/2;
    }
    &:has(.c-author__contents-image-person) {
      align-items: end;
      background-image: url(../images/common/bg-person-author.jpg);
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: cover;
    }
    &:has(.c-author__contents-image-logo) {
      align-items: center;
      background-color: var(--color-bg-gray);
    }
    img {
      inline-size: auto;
      max-inline-size: 100%;
      block-size: auto;
      max-block-size: 140px;
    }
  }
  .c-author__contents-text {
    grid-column: 2/3;
    @media (width < 768px) {
      grid-row: 2/3;
      grid-column: 1/3;
    }
    > p {
      font-size: var(--font-size-small);
    }
  }
  .c-author__contents-head {
    grid-column: 2/3;
    line-height: var(--line-height-button);
    color: var(--color-secondary);
    letter-spacing: 0.05em;
    @media (width < 768px) {
      align-self: center;
    }
  }
  .c-author__contents-head-main {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-jp-bold);
    text-decoration: underline;
    transition: all 0.2s;
  }
  .c-author__contents-head-label {
    display: inline-block;
    padding-block: var(--spacing-min);
    padding-inline: var(--spacing-sm);
    margin-block-start: var(--spacing-xs);
    font-size: var(--font-size-small);
    border: 1px solid var(--color-secondary);
  }
  .c-author__contents-head-sub {
    margin-block-start: var(--spacing-x-min);
    font-size: var(--font-size-small);
    transition: color 0.2s;
  }
  .c-tab {
    margin-block-end: var(--spacing-2xl);
  }
}
@layer component {
  .c-tab__button {
    overflow-x: scroll;
    &::-webkit-scrollbar {
      display: block;
      block-size: 8px;
    }
    &::-webkit-scrollbar-thumb {
      background: var(--color-border-light);
      background-clip: padding-box;
      border-block-start: 4px solid #0000;
    }
    &::-webkit-scrollbar-track {
      background: var(--color-lightest);
    }
  }
  .c-tab__button-list {
    display: flex;
    inline-size: max-content;
  }
  .c-tab__button-item {
    position: relative;
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-md);
    font-weight: var(--font-weight-jp-medium);
    line-height: var(--line-height-title);
    color: var(--color-text-placeholder);
    white-space: nowrap;
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-light);
    @media (width < 768px) {
      padding-inline: var(--spacing-sm);
      font-size: var(--font-size-small-1);
    }
    &:after {
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      inline-size: calc(100% - var(--spacing-sm) * 2);
      block-size: 2px;
      margin-inline: auto;
      content: "";
      background-color: var(--color-text-placeholder);
      opacity: 0;
      transition: opacity 0.2s;
    }
    &:not(:first-child) {
      border-inline-start: none;
    }
    &:first-child {
      border-start-start-radius: var(--radius-normal);
    }
    &:last-child {
      border-start-end-radius: var(--radius-normal);
    }
    &[aria-selected="true"] {
      font-weight: var(--font-weight-jp-bold);
      color: var(--color-primary);
      background-color: var(--color-lightest);
      border-block-end: none;
      &:after {
        background-color: var(--color-secondary);
        opacity: 1;
      }
    }
  }
  @media (any-hover: hover) {
    .c-tab__button-item:hover {
      &:after {
        opacity: 1;
      }
    }
  }
}
@layer component {
  .c-line__bold,
  .c-line__dot,
  .c-line__light,
  .c-line__normal,
  .c-line__short {
    --border-color: var(--color-border-default);
    --border-kind: solid;
    --border-width: 2px;
    inline-size: 100%;
    background-color: initial;
    border: none;
    border-block-start: var(--border-width) var(--border-kind) var(--border-color);
    box-shadow: none;
    &:not(:last-child) {
      margin-block: 0 var(--spacing-2xl);
    }
  }
  .c-line__dot {
    --border-kind: dashed;
  }
  .c-line__bold {
    --border-width: 4px;
  }
  .c-line__light,
  .c-line__short {
    --border-width: 1px;
  }
  .c-line__short {
    inline-size: 90%;
    text-align: center;
  }
}