/*
Theme Name:BlankSlate child
Description:「BlankSlate」の子テーマです。JAC用に最適化しています。
Author:JAC Recruitment
Template:blankslate
*/

@layer reset, base, general, component, main-base, main;
@layer reset {
  .wp-block-image {
    text-align: center;
  }
  hr.wp-block-separator {
    display: none;
  }
  .has-large-font-size {
    font-size: inherit !important;
  }
  .has-black-color {
    color: inherit !important;
  }
  .wp-block-button {
    margin-block-end: var(--spacing-sm) !important;
  }
  .wp-block-button__link {
    padding: 0 !important;
    padding-inline: var(--spacing-lg) var(--spacing-xl) !important;
    padding-block: var(--spacing-s) !important;
  }
  .wp-block-image {
    & .alignleft {
      margin: inherit !important;
      margin-inline-end: var(--spacing-sm) !important;
      margin-block-end: var(--spacing-xs) !important;
      max-width: 50% !important;
    }
    & .alignright {
      margin: inherit !important;
      margin-inline-start: var(--spacing-sm) !important;
      margin-block-end: var(--spacing-xs) !important;
      max-width: 50% !important;
    }
  }
  .wp-block-group.is-style-twentytwentyone-border {
    border: 1px solid var(--border-color);
    padding: var(--spacing-s);
    margin-block-end: var(--spacing-sm);
  }
  .wp-block-media-text {
    padding: 0 !important;
    padding-inline: var(--spacing-sm) !important;
    padding-block: var(--spacing-lg) !important;
  }
  .clearfix:after {
    content: "";
    clear: both;
    display: block;
  }
}
@layer component {
  .c-header__backdrop {
    max-width: 100%;
  }
  .c-sticky-cta-register {
    inline-size: 100%;
    @media (width < 768px) {
      inline-size: 100%;
    }
  }
}
@layer component {
  .digitalbanner {
    text-align: center;
    margin-block-start: var(--spacing-sm);
    margin-block-end: var(--spacing-sm);
    & img {
      width: 100%;
      height: auto;
    }
  }
}
@layer component {
  /* 投稿/更新日時META用 */
  .entry-meta time {
  }
}

/* TOC plugin */
#toc_container {
  padding: 24px 32px;
  margin-bottom: 40px;
  color: var(--base-font-color);
  &.toc_light_blue {
    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);
    background: #fff;
    @media (width < 768px) {
      padding: var(--spacing-sm);
    }
  }
  & .toc_title {
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-large);
    line-height: var(--line-height-title);
    text-align: center;
  }
  & .toc_toggle {
    display: inline-block;
    font-size: var(--font-size-small) !important;
    & .toc_brackets {
      display: inline;
    }
  }
  & .toc_list {
    & li:not(:last-of-type),
    li:not(:last-of-type),
    li:not(:last-of-type) {
      padding-block-end: var(--spacing-min);
    }
    & li {
      padding-inline-start: 24px;
      font-size: var(--font-size-small);
      position: relative;
      &:before {
        inset-inline-start: 9px;
        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;
      }
      & a {
        text-decoration: none;
        transition: all 0.2s ease;
        color: inherit;
        &:hover {
          color: var(--color-text-link-hover);
          text-decoration: underline;
        }
      }
      > ul {
        margin-block-start: var(--spacing-xs);
        margin-block-end: var(--spacing-xs);
      }
    }
  }
  & .no_bullets li {
    font-size: var(--font-size-base);
  }
  & a {
    color: var(--color-secondary);
  }
}

/* article styles*/
@media only screen and (min-width: 769px) {
  .sp_only {
    display: none !important;
  }
}

@media only screen and (max-width: 768px) {
  .pc_only {
    display: none !important;
  }
}
@layer main {
  .c-page-sub__pbe {
    margin-block-end: 0 !important;
    @media (width < 768px) {
      margin-block-end: 0 !important;
    }
  }
  .c-content-main {
    :where(.c-heading-02, .c-heading__02, h2) {
      &: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, h3, h4) {
      &: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 {
  hr {
    --border-color: currentcolor;
    --border-width: 3px;
    [data-bgi-hr-kind="dashed"] {
      --border-kind: dashed;
    }
    [data-bgi-hr-kind="bold"] {
      --border-width: 5px;
    }
    [data-bgi-hr-kind="narrow"] {
      --border-width: 1px;
    }
    [data-bgi-hr-kind="short"] {
      --inline-size: 50%;
    }
  }
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    color: inherit !important;
    & strong {
      font-weight: inherit;
    }
    &.margin-start-no {
      margin-block-start: 0 !important;
    }
  }
  h1.entry-title {
    & br {
      display: none;
    }
  }
}

@layer component {
  .c-heading__02,
  h2 {
    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) !important;
    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,
  h3 {
    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) !important;
    @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,
  h4 {
    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) !important;
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      font-size: var(--font-size-large);
    }
  }
  .c-heading__05,
  h5 {
    margin-block-end: var(--spacing-s);
    font-size: var(--font-size-base);
    line-height: var(--line-height-title);
    color: var(--color-primary) !important;
    @media (width < 768px) {
      margin-block-end: var(--spacing-xs);
      font-size: var(--font-size-large);
    }
  }
  .c-heading__06,
  h6 {
    margin-block-end: var(--spacing-s);
    font-size: var(--font-size-small);
    line-height: var(--line-height-title);
    color: var(--color-primary) !important;
    @media (width < 768px) {
      margin-block-end: var(--spacing-xs);
      font-size: var(--font-size-base);
    }
  }
}

@layer component {
  .c-text,
  .entry-content p {
    color: var(--base-font-color);
    :where(span) {
      display: block;
    }
  }
  .c-text,
  .c-text__aline-center,
  .c-text__aline-center-pc,
  .c-text__aline-center-sp,
  .c-text__aline-right,
  .c-text__aline-right-pc,
  .c-text__aline-right-sp,
  .c-text__color-gray,
  .c-text__mb-small,
  .c-text__note,
  .entry-content p {
    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__aline-center {
    text-align: center;
  }
  .c-text__aline-center-pc {
    @media (768px <=width) {
      text-align: center;
    }
  }
  .c-text__aline-center-sp {
    @media (width < 768px) {
      text-align: center;
    }
  }
  .c-text__aline-right {
    text-align: end;
  }
  .c-text__aline-right-pc {
    @media (768px <=width) {
      text-align: end;
    }
  }
  .c-text__aline-right-sp {
    @media (width < 768px) {
      text-align: end;
    }
  }
  .c-text__color-gray {
    color: var(--color-text-gray);
  }
  .c-text a,
  .entry-content p 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;
    }
  }
  .c-text a[target="_blank"],
  .entry-content p a[target="_blank"] {
    position: relative;
    margin-inline-end: 1em;
    &:after {
      position: absolute;
      inset-block-end: 2px;
      inline-size: 1em;
      block-size: 1em;
      content: "";
      background:
        url(assets/images/common/icon-blank.svg),
        url(assets/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(assets/images/common/icon-blank-lighter.svg);
    }
  }
  .c-text:has(.c-text__mb-small) {
    margin-block-end: 0;
  }
  .c-text__mb-small {
    margin-block-end: var(--spacing-xs);
  }
  .c-box,
  .wp-block-quote {
    color: var(--base-font-color);
  }
  .entry-content {
    & dl {
      margin-block-end: var(--spacing-md);
      & dd {
        font-size: var(--font-size-small);
      }
    }
  }
}
@layer component {
  ol.wp-block-list,
  ul.wp-block-list {
    color: var(--base-font-color);
    margin-block-end: var(--spacing-md);
    font-size: var(--font-size-small);
    @media (width < 768px) {
      font-size: var(--font-size-base);
    }
  }
  ol.wp-block-list li:not(:last-of-type),
  ul.wp-block-list li:not(:last-of-type) {
    padding-block-end: var(--spacing-min);
  }
  ul.wp-block-list > li,
  :where(ul.wp-block-list, ol.wp-block-list) li > ul > li {
    position: relative;
    padding-inline-start: 20px;
  }
  ul.wp-block-list > li {
    padding-inline-start: 24px;
    & a {
      position: relative;
      display: inline-flex;
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-jp-medium);
      font-feature-settings: "palt";
      color: var(--color-secondary) !important;
      text-decoration: underline;
      text-decoration-color: #0000;
      text-underline-offset: 2px;
      transition: all 0.2s ease;
      padding-inline: var(--spacing-min);
      & strong {
        font-weight: var(--font-weight-jp-medium);
      }
    }
    @media (any-hover: hover) {
      & a:hover {
        color: var(--color-text-link-hover);
        text-decoration-color: var(--color-text-link-hover);
      }
    }
  }
  ol.wp-block-list > li,
  :where(ul.wp-block-list ol.wp-block-list) li > ol > li {
    position: relative;
    padding-inline-start: 24px;
  }
  ol.wp-block-list,
  :where(ul.wp-block-list, ol.wp-block-list) li > ol {
    counter-reset: list;
  }
  ul.wp-block-list > li:before,
  :where(ul.wp-block-list .ol.wp-block-list) 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;
  }
  ul.wp-block-list > li:before {
    inset-inline-start: 9px;
  }
  ol.wp-block-list li > ul > li:before,
  ul.wp-block-list li > ul > li:before {
    background-color: var(--color-text-placeholder);
  }
  ol.wp-block-list li > ul,
  ul.wp-block-list li > ul {
    margin-block-end: 0;
  }
  ol.wp-block-list > li:before,
  :where(ul.wp-block-list, ol.wp-block-list, .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,
  ol.wp-block-list li > ol > li:before,
  ul.wp-block-list li > ol > li:before {
    color: var(--color-text-placeholder);
  }
}
@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 {
    font-size: var(--font-size-small);
    @media (width < 768px) {
      font-size: var(--font-size-base);
    }
  }
  .c-box__bg-quote,
  .wp-block-quote {
    border-left: none !important; /*reset*/
    position: relative;
    padding: var(--spacing-xl) !important;
    margin-block-end: var(--spacing-2xl) !important;
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      padding: var(--spacing-md);
    }
  }
  .c-box__bg-quote:before,
  .wp-block-quote:before {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 12px;
    block-size: auto;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-text-placeholder);
    content: "“";
    @media (width < 768px) {
      font-size: 2rem;
    }
  }
  .c-box__bg-quote:after,
  .wp-block-quote:after {
    position: absolute;
    inset-block-end: -8px;
    inset-inline-end: 12px;
    block-size: auto;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-text-placeholder);
    content: "”";
    @media (width < 768px) {
      inset-block-end: -6px;
      font-size: 2rem;
    }
  }
  .c-box__bg-gray {
    padding: var(--spacing-xl);
    margin-block-end: var(--spacing-2xl);
    background-color: var(--color-bg-secondary);
    @media (width < 768px) {
      padding: var(--spacing-md);
    }
    & ul,
    & ol {
      margin-block-end: 0;
    }
  }
  .c-box__bg-yellow {
    padding: var(--spacing-xl);
    margin-block-end: var(--spacing-2xl);
    background-color: var(--color-bg-bgb-yellow);
    @media (width < 768px) {
      padding: var(--spacing-md);
    }
  }
  .c-box__bg-red {
    padding: var(--spacing-xl);
    margin-block-end: var(--spacing-2xl);
    background-color: var(--color-bg-bgb-pink);
    @media (width < 768px) {
      padding: var(--spacing-md);
    }
  }
  .c-box__border-thin {
    padding: var(--spacing-xl);
    margin-block-end: var(--spacing-2xl);
    border: 1px solid var(--color-border-default);
    @media (width < 768px) {
      padding: var(--spacing-md);
    }
  }
  .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 {
    padding: var(--spacing-xl);
    margin-block-end: var(--spacing-2xl);
    border: 2px dashed var(--color-border-default);
    @media (width < 768px) {
      padding: var(--spacing-md);
    }
  }
  .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 {
  .wp-block-table thead {
    border: none !important; /*reset*/
  }
  .wp-block-table td,
  .wp-block-table th {
    border: 1px solid var(--color-border-light) !important;
    padding: 1rem !important;
  }
  & table {
    color: var(--base-font-color);
    &:not(:last-child) {
      margin-block-end: var(--spacing-2xl);
    }
  }
  & table,
  & .wp-block-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);
        }
      }
    }
    & caption {
      margin-block: var(--spacing-x-min) var(--spacing-xs);
      font-size: var(--font-size-small-1);
      font-weight: 700;
      line-height: 1.5;
    }
    & tbody th,
    & 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;
      }
    }
    & th,
    & thead td {
      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);
      }
      & strong {
        font-weight: 500;
      }
    }
    & td {
      font-size: var(--font-size-small);
      line-height: var(--line-height-text);
      background-color: var(--color-lightest);
    }
  }
}
@layer component {
  /* header */
  .c-header__site-name {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    align-items: center;
    & img {
      &:first-of-type,
      &:nth-child(2) {
        max-inline-size: 7.5rem;
      }
      &:last-of-type {
        height: 40px;
        width: 100%;
        @media (width < 576px) {
          height: 30px;
          width: 100%;
        }
      }
    }
  }
  /* side */
  .c-side-nav {
    & h2 {
      border-block-end: none !important;
      padding-block-end: 0 !important;
      line-height: var(--base-line-height) !important;
    }
    & .c-side-nav__articles-item-image {
      & img {
        object-fit: cover;
        width: 56px;
        height: 56px;
      }
    }
  }
  /* TOP */
  .c-pagetop {
    z-index: 11 !important;
  }
  /* footer */
  .c-footer__sitename {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    color: inherit;
    text-decoration: none;
    & a {
      &:first-of-type img {
        max-inline-size: 10.625rem;
        @media (width < 576px) {
          max-inline-size: 8.125rem;
        }
      }
      &:last-of-type img {
        max-inline-size: 4.25rem;
        @media (width < 576px) {
          max-inline-size: 3.125rem;
        }
      }
    }
  }
  /* pagination */
  .pagination {
    display: flex;
    justify-content: center;
    padding-block: var(--spacing-md) var(--spacing-5xl);
    & .nav-links {
      display: flex;
    }

    & .page-numbers {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      inline-size: 40px;
      block-size: 40px;
      color: var(--color-darkest);
      background: #ffffff;
      border: 1px solid var(--color-darkest);
      font-size: var(--font-size-small);
    }
    & .page-numbers.current {
      inline-size: 40px;
      block-size: 40px;
      background-color: var(--color-secondary);
      color: #ffffff;
    }
    & .page-numbers.prev,
    & .page-numbers.next {
      background: transparent;
      box-shadow: none;
      border: none;
      color: var(--color-darkest);
      inline-size: 80px;
      block-size: 40px;
    }
    & .page-numbers.dots {
      background: transparent;
      box-shadow: none;
      border: none;
      color: var(--color-darkest);
    }

    @media (width < 768px) {
      .page-numbers,
      .page-numbers.current {
        inline-size: 30px;
        block-size: 30px;
        padding: 0; /* パディングを小さく */
      }

      & .page-numbers.dots {
        background: transparent;
        box-shadow: none;
        border: none;
        color: var(--color-darkest);
      }
      & .page-numbers.prev,
      & .page-numbers.next {
        inline-size: 60px;
        block-size: 30px;
      }
    }
  }
}

@layer component {
  .c-link__box-item .nolink {
    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);
    }
  }
  .c-link__box-textarea {
    & .time {
      font-size: var(--font-size-small-2) !important;
      color: var(--base-font-color) !important;
      font-weight: var(--font-weight-jp-regular) !important;
      text-align: right;
      margin-block-end: 0 !important;
    }
    & p {
      margin-block-end: var(--spacing-xs) !important;
      font-size: var(--font-size-base) !important;
      color: var(--color-primary) !important;
      & br {
        display: none;
      }
    }
  }
  .c-link__box-text-desc {
    & a {
      display: inline-block;
    }
  }
  .wp-block-embed iframe {
    height: 60px;
  }

  section {
    :where(&, & > div:not(:has(.wp-block-button))) {
      margin-block-end: var(--spacing-2xl);
      :where(& > :first-child) {
        margin-block-start: 0;
      }
      :where(& > :last-child) {
        margin-block-end: 0;
      }
    }
    :where(& > .wp-block-button) {
      margin-block-end: var(--spacing-sm);
    }
  }
  .wp-block-button {
    margin-block-end: var(--mbe-pc, var(--content-padding));
    margin-inline: auto;
    color: var(--color-secondary);
    text-align: center;
    @media (width < 768px) {
      margin-block-end: var(--mbe-sp, var(--mbe-pc, var(--content-padding)));
    }
    & .wp-element-button {
      position: relative;
      display: inline-block !important;
      min-inline-size: 280px;
      max-inline-size: 400px;
      padding-block: var(--spacing-s);
      padding-inline: var(--spacing-lg);
      font-weight: 700;
      line-height: var(--line-height-button);
      background-color: var(--color-lightest) !important;
      border: 1px solid var(--color-secondary);
      border-radius: var(--radius-normal) !important;
      transition: all 0.2s ease;
      color: var(--color-secondary) !important;
      font-weight: 700;
      &: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(assets/images/common/icon-arrow-primary-right-lg.svg);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 16px 16px;
        transition: all 0.2s ease;
      }
      &:hover {
        color: var(--color-text-link-hover);
        border-color: var(--color-text-link-hover);
      }
    }
    .wp-element-button:not(.wp-element-button[target="_blank"], .wp-element-button[href$=".pdf"], .wp-element-button[href$=".zip"], .wp-element-button[href$=".xls"]):hover:after {
      inset-inline-end: var(--spacing-s);
      @media (width < 768px) {
        inset-inline-end: var(--spacing-xs);
      }
    }

    & .wp-block-button__link.c-button__link-em {
      color: var(--color-lightest) !important;
      background-color: var(--color-secondary) !important;
    }
    & .wp-block-button__link.c-button__link-em:hover {
      background-color: var(--color-text-link-hover) !important;
      border-color: var(--color-text-link-hover) !important;
      &:after {
        inset-inline-end: var(--spacing-s) !important;
        @media (width < 768px) {
          inset-inline-end: var(--spacing-xs) !important;
        }
      }
    }
    & .c-button__link-em:after {
      background-image: url(assets/images/common/icon-arrow-white-right.svg);
    }
  }
}
@layer component {
  .c-nav-breadcrumb br {
    display: none;
  }
}
@layer component {
  .accordion {
    margin: 0 !important;
    &[open] {
      summary {
        border-block-end: none !important;
      }
    }
    &:last-of-type {
      margin-block-end: var(--spacing-xl) !important;
    }
    & summary h3:after {
      display: none !important;
    }
  }
  .accordion summary {
    inline-size: 100%;
    display: inline;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    inline-size: 100% !important;
    padding-block: var(--spacing-s) !important;
    padding-inline: 10px var(--spacing-s) !important;
    line-height: var(--line-height-title) !important;
    background-color: #fff !important;
    transition: background-color 0.2s ease;
    border-block-end: 1px solid var(--color-border-light);
    @media (width < 768px) {
      padding-inline: var(--spacing-xs) !important;
    }
    &:hover {
      background-color: var(--color-bg-secondary) !important;
    }
    &:after {
      position: absolute !important;
      inset-block: 0 !important;
      inset-inline-end: var(--spacing-s) !important;
      inline-size: 16px !important;
      block-size: 16px !important;
      margin-block: auto !important;
      content: "" !important;
      background: url(assets/images/common/icon-arrow-primary-down.svg) no-repeat 50%/100% auto !important;
      transition: rotate 0.2s ease-in-out;
      transform: inherit !important;
      border: none !important;
      @media (width < 768px) {
        inset-inline-end: var(--spacing-xs);
      }
      [class="c-page-home"] & {
        inline-size: 12px;
        block-size: 12px;
        background: url(assets/images/common/icon-arrow-gray-down.svg) no-repeat 50%/100% auto;
        @media (width < 768px) {
          inset-inline-end: var(--spacing-s);
        }
      }
    }
  }
  .accordion summary h3 {
    position: relative;
    display: inline-flex;
    padding-inline: 33px 20px;
    padding-inline-start: 0 !important;
    margin: 0 !important;
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
    @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);
      }
    }
    &:before {
      display: none;
    }
  }
  .accordion p {
    border: none !important;
  }
  .accordion[open] p {
    display: flex;
    gap: var(--spacing-s);
    padding-block: var(--spacing-s) !important;
    padding-inline: var(--spacing-s) var(--spacing-xl) !important;
    background-color: var(--color-bg-secondary);
    border-block-end: 1px solid var(--color-border-light) !important;
    > 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) !important;
      & b {
        font-weight: var(--font-weight-en-medium);
      }
    }
  }
}

@layer component {
  .resume,
  .c-card1 {
    font-size: inherit !important;
    margin-block-end: var(--spacing-2xl) !important;
    search.c-search-panel {
      margin-block-end: var(--spacing-5xl);
    }
    & h3 {
      display: none;
    }
    & .c-card1-border {
      padding: 0px 0px 0px 110px !important;

      @media (width < 768px) {
        padding: 0px 0px 0px 35px !important;
      }
    }
  }
  .resume_inner,
  .cvform {
    padding: 0 !important;
    padding-block: var(--spacing-lg) var(--spacing-xl) !important;
    padding-inline: var(--spacing-lg) !important;
    font-size: var(--font-size-small);
    line-height: var(--line-height-text) !important;
    border: 1px solid var(--color-text-gray) !important;
    border-block-start: 4px solid var(--color-secondary) !important;
    width: 100% !important;
    color: inherit !important;
    background: inherit !important;
    box-shadow: none !important;

    @media (width < 768px) {
      padding-block: var(--spacing-sm) var(--spacing-md) !important;
      padding-inline: var(--spacing-sm) !important;
      font-size: var(--font-size-base) !important;
    }
    :where(p > span) {
      display: block;
    }

    .right {
      text-align: end !important;
    }
    h4 {
      margin: 0 !important;
      padding-block: 0 !important;
      padding-block-end: var(--spacing-xs) !important;
      padding-inline: 0 !important;
      font-size: var(--font-size-base) !important;
      line-height: var(--line-height-title);
      color: var(--base-font-color) !important;
      background-color: #fff !important;
      font-size: var(--font-size-small) !important;
      font-weight: 400 !important;
      margin-block-end: 0 !important;
    }
    .exp {
      padding: 0 !important;
      margin: 0 !important;
      padding-block: var(--spacing-sm) !important;
      padding-inline: var(--spacing-sm) !important;
      margin-block-end: var(--spacing-sm) !important;
      border: 1px solid var(--color-border-default) !important;
      margin-top: 0px !important;
      @media (768px <=width) {
        margin-inline: var(--spacing-md) !important;
      }
    }
    .point ::after {
      content: "Point" !important;
      padding: 0 !important;
      display: inline-flex !important;
      align-items: center;
      padding-block: var(--spacing-min) !important;
      padding-inline: var(--spacing-xs) var(--spacing-md) !important;
      margin-inline: var(--spacing-xs) !important;
      font-size: var(--font-size-small-3) !important;
      font-weight: var(--font-weight-jp-bold) !important;
      line-height: 1.2 !important;
      color: var(--color-lightest) !important;
      letter-spacing: 0.04em !important;
      border: 1px solid #0000 !important;
      transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
      border-radius: 0px !important;
      background: var(--color-anchor-link) url(assets/images/common/icon-arrow-white-down-sm.svg) no-repeat 90% / 12px !important;
    }
    .point:hover ::after {
      color: var(--color-cta) !important;
      background-color: var(--color-lightest) !important;
      border-color: var(--color-cta) !important;
      background: var(--color-lightest) url(assets/images/common/icon-arrow-gold-down-sm.svg) no-repeat 90% / 12px !important;
    }
    table {
      width: 100% !important;
      margin: 0 !important;
      margin-block-end: var(--spacing-sm) !important;
      @media (width < 768px) {
        width: 100% !important;
      }
      & a {
        color: var(--base-font-color) !important;
        &:hover {
          border: none !important;
          border-color: #0000 !important;
        }
      }
      :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: "・";
          }
        }
      }
      & th {
        font-size: var(--font-size-small) !important;
        font-weight: 500 !important;
        line-height: var(--line-height-title) !important;
        background-color: var(--color-bg-secondary) !important;
      }
      & td {
        font-size: var(--font-size-small) !important;
      }
    }
    p {
      margin-block-end: var(--spacing-xs) !important;
    }
    .resume-list {
      padding: 0 !important;
      margin: 0 !important;
      position: relative;
      margin-inline: var(--spacing-md) !important;
      padding-block-end: var(--spacing-sm) !important;
      & li {
        margin: 0 !important;
        position: relative;
        padding-block-end: var(--spacing-xs) !important;
        padding-inline-start: 24px !important;
        &:before {
          left: inherit !important;
          top: inherit !important;
          position: absolute !important;
          inset: 0.72em auto auto 9px !important;
          display: block !important;
          inline-size: 6px !important;
          block-size: 6px !important;
          content: "";
          background-color: var(--color-secondary) !important;
          border-radius: 3px !important;
        }
      }
    }
    .xlabel {
      background-color: #0000 !important;
      padding: 0 !important;
      z-index: 1;
      & a {
        display: block;
        font-size: var(--font-size-small);
        background: var(--color-anchor-link) url(assets/images/common/icon-arrow-white-down-sm.svg) no-repeat 90% / 12px;
        border: 1px solid var(--color-anchor-link);
        padding-inline: var(--spacing-sm) var(--spacing-md);
        position: relative;
        z-index: 1;
      }
      &:after {
        right: -15px !important;
        border: 5px solid transparent !important;
        border-left-color: var(--color-anchor-link) !important;
        top: 25% !important;
        z-index: 3;
      }
      & b {
        font-weight: var(--font-weight-jp-medium) !important;
      }
      @media (any-hover: hover) {
        &:hover {
          & a {
            color: var(--color-cta) !important;
            background-color: var(--color-lightest) !important;
            border-color: var(--color-cta) !important;
            background: var(--color-lightest) url(assets/images/common/icon-arrow-gold-down-sm.svg) no-repeat 90% / 12px !important;
          }
          &:after {
            right: -20px !important;
            border: 7px solid transparent !important;
            border-left-color: var(--color-anchor-link) !important;
            top: 20% !important;
            z-index: 3;
          }
          &:before {
            content: "";
            right: -14px;
            border: 5px solid transparent;
            border-left-color: #fff !important;
            top: 25%;
            z-index: 4;
            transform: translateX(-50%);
            position: absolute;
          }
        }
      }
    }
  }

  .p-knowhow_template_btnArea .c-btn-download {
    position: relative !important;
    display: inline-block !important;
    min-inline-size: 280px !important;
    max-inline-size: 400px;
    padding-block: var(--spacing-s) !important;
    padding-inline: var(--spacing-lg) !important;
    font-weight: 700;
    line-height: var(--line-height-button);
    background-color: var(--color-lightest) !important;
    border: 1px solid var(--color-secondary) !important;
    border-radius: var(--radius-normal);
    transition: all 0.2s ease;
    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) !important;
    text-align: center;
    height: inherit !important;
    width: inherit !important;

    &::after {
      position: absolute;
      inset-block: 0;
      inset-inline-end: var(--spacing-sm);
      inline-size: 16px !important;
      block-size: 16px !important;
      content: "";
      background-repeat: no-repeat;
      background-position: 50%;
      transition: all 0.2s ease;
      background-image: url(assets/images/common/icon-download.svg), url(assets/images/common/icon-download-hover.svg) !important;
      background-size: contain, 0;
    }
    &::before {
      background-color: #fff !important;
      display: none !important;
    }
    & span {
      color: var(--color-secondary) !important;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: inline !important;
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      max-width: 100% !important;
      line-height: 1em;
      &:hover {
        color: var(--color-lightest);
        background-color: #fff !important;
      }
    }
    ::before {
      display: none !important;
      background-color: #fff !important;
    }
    &:hover {
      color: var(--color-lightest);
      background-color: #fff !important;
    }
  }
  .category-resume {
    .wp-block-spacer {
      display: none !important;
    }
    & h3 {
      padding-inline-start: var(--spacing-4xl);
      &:after {
        content: "Point";
        display: inline-flex;
        padding-block: var(--spacing-min);
        padding-inline: var(--spacing-min);
        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;
        position: absolute;
        left: var(--spacing-sm);
        top: 20%;
      }
    }
    .p-knowhow_template_btnArea {
      margin-top: 0 !important;
    }
  }
}

@layer component {
  .c-detail__head {
    & .c-detail__head-heading {
      > .ttl {
        border-block-end: 0;
        color: var(--base-font-color);
        position: relative;
        padding-block-end: var(--spacing-s);
        margin-block-end: var(--spacing-s);
        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;
          }
        }
      }
    }
  }
  .orange_cta_box,
  .inner-button,
  .preparation-button,
  .resume-button,
  .annual-income-button,
  .interview-button {
    position: relative;
    padding-block: var(--spacing-lg) var(--spacing-xl);
    margin-block-end: var(--spacing-2xl);
    overflow: hidden;
    background: url(assets/images/common/bg-support.png) no-repeat 50% / cover;
    border: 1px solid var(--color-border-default);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    max-inline-size: var(--view-size-content-main);
    margin-inline: auto;
    text-align: center;
    padding-inline: var(--content-padding);
    @media (width < 768px) {
      padding-block: var(--spacing-xl);
      background: url(assets/images/common/bg-support-sp.png) no-repeat 50% / cover;
    }
    p {
      border-block-end: none !important;
      position: relative !important;
      padding-block-end: var(--spacing-s) !important;
      font-size: var(--font-size-20) !important;
      font-weight: var(--font-weight-jp-medium) !important;
      font-feature-settings: "palt" on !important;
      line-height: var(--line-height-title) !important;
      letter-spacing: 0.1em !important;
      color: var(--base-font-color) !important;
      margin-block-end: 0 !important;
      & b {
        font-weight: var(--font-weight-jp-medium) !important;
      }
      &:after {
        position: absolute;
        inset-block: auto 0;
        inset-inline: 0;
        inline-size: 180px;
        block-size: 1px;
        margin-inline: auto;
        content: "";
        background: var(--color-cta);
      }
    }
    .appeal_btnArea_2 {
      margin-block-end: var(--spacing-no);
      position: relative;
      inline-size: max-content;
      margin-inline: auto;
      overflow: hidden;
      border-radius: var(--radius-normal);
      & ~ br {
        display: none;
      }
      &: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.c-btn {
        padding-block: var(--spacing-sm);
        background-color: initial;
        border: none;
        position: relative;
        z-index: 1;
        max-inline-size: none;
        padding-inline: var(--spacing-lg) var(--spacing-2xl);
        font-size: var(--font-size-large);
        color: var(--color-lightest);
        line-height: var(--line-height-button);
        font-weight: var(--font-weight-jp-bold);
        border-radius: var(--radius-normal);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.2s ease;
        &::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(assets/images/common/icon-arrow-white-right.svg);
          background-repeat: no-repeat;
          background-position: 50%;
          background-size: 16px 16px;
          transition: all 0.2s ease;
        }
        &::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;
          position: absolute;
          inset: 0;
          inline-size: 100%;
          block-size: 100%;
          pointer-events: none;
          content: "";
          transition: opacity 0.2s ease-in;
        }
      }
      & a.c-btn: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(assets/images/common/icon-arrow-gold-right.svg);
        }
      }
    }
  }
  .navy_cta_wrap {
    position: relative;
    padding-block: var(--spacing-lg) var(--spacing-xl);
    margin-block-end: var(--spacing-2xl);
    overflow: hidden;
    background: url(assets/images/common/bg-support.png) no-repeat 50% / cover;
    border: 1px solid var(--color-border-default);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
    max-inline-size: var(--view-size-content-main);
    margin-inline: auto;
    text-align: center;
    padding-inline: var(--content-padding);
    @media (width < 768px) {
      padding-block: var(--spacing-xl);
      background: url(assets/images/common/bg-support-sp.png) no-repeat 50% / cover;
    }
    & p {
      margin-block-end: 0 !important;
    }
    .navy_cta_ttl {
      border-block-end: none !important;
      position: relative !important;
      padding-block-end: var(--spacing-s) !important;
      font-size: var(--font-size-20) !important;
      font-weight: var(--font-weight-jp-medium) !important;
      font-feature-settings: "palt" on !important;
      line-height: var(--line-height-title) !important;
      letter-spacing: 0.1em !important;
      color: var(--base-font-color) !important;
      margin-block-end: 0 !important;
      & b {
        font-weight: var(--font-weight-jp-medium) !important;
      }
      &:after {
        position: absolute;
        inset-block: auto 0;
        inset-inline: 0;
        inline-size: 180px;
        block-size: 1px;
        margin-inline: auto;
        content: "";
        background: var(--color-cta);
      }
    }
    & a.text-button {
      padding-block: var(--spacing-sm);
      border: none;
      position: relative;
      z-index: 1;
      max-inline-size: none;
      padding-inline: var(--spacing-lg);
      font-size: var(--font-size-large);
      color: var(--color-lightest);
      min-inline-size: 280px;
      font-weight: 700;
      line-height: var(--line-height-button);
      border-radius: var(--radius-normal);
      transition: all 0.2s ease;
      background: var(--gradient-button-bg-gold);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60%;
      margin: auto;
      & span {
        display: flex;
        align-items: center;
      }
      & svg {
        display: none;
      }
      &::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(assets/images/common/icon-arrow-white-right.svg);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 16px 16px;
        transition: all 0.2s ease;
      }
      &::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;
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        pointer-events: none;
        content: "";
        transition: opacity 0.2s ease-in;
      }
    }
    & a.text-button: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(assets/images/common/icon-arrow-gold-right.svg);
      }
    }
  }
  .c-support {
    & .c-support__heading h2 {
      border-block-end: none !important;
      position: relative !important;
      padding-block-end: var(--spacing-s) !important;
      font-size: var(--font-size-20) !important;
      font-weight: var(--font-weight-jp-medium) !important;
      font-feature-settings: "palt" on !important;
      line-height: var(--line-height-title) !important;
      letter-spacing: 0.1em !important;
      color: var(--base-font-color) !important;
      margin-block-end: 0 !important;
    }
    & .c-support__heading h2 > :where(span) {
      display: block;
      > :where(span) {
        display: block;
        @media (width < 768px) {
          display: block;
        }
      }
    }
    .c-support__text p {
      font-size: var(--font-size-base) !important;
      line-height: var(--line-height-text) !important;
      color: var(--color-text-primary) !important;
      margin-block-end: 0 !important;
    }
    .c-support__text > :where(p) > :where(span) > :where(span) {
      display: inline !important;
    }
  }
}
@layer component {
  .int_author {
    margin-block-end: var(--spacing-2xl);
    border: 1px solid var(--color-border-light);
    & .sub_cont {
      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);
      margin-block-end: 0 !important;
      font-size: var(--base-font-size);
      line-height: var(--base-line-height) !important;
    }
    & .author_prof {
      &: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);
          }
        }
      }
    }
    & .author_prof {
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: 150px 1fr;
      gap: 0 var(--spacing-md);
      padding-block: var(--spacing-sm) var(--spacing-md);
      padding-inline: var(--spacing-md);
      transition: background-color 0.2s;
      @media (width < 768px) {
        display: flex;
        grid-template-columns: 120px 1fr;
        gap: var(--spacing-sm) var(--spacing-xs);
        padding: var(--spacing-sm);
      }
    }
    @media (any-hover: hover) {
      & .int_author > a:hover {
        background-color: var(--color-bg-secondary);
        [class="name"] {
          color: var(--color-text-link-hover);
          text-decoration: none;
        }
        [class="sub"] {
          color: var(--color-text-link-hover);
        }
      }
    }
    & .prof_img {
      /* grid-row: 1/3; */
      grid-column: 1/2;
      @media (width < 768px) {
        width: 30%;
      }
      img {
        inline-size: 100%;
        block-size: auto;
      }
    }
    & .prof_cont {
      grid-column: 2/3;
      @media (width < 768px) {
        width: 70%;
      }
      > p {
        font-size: var(--font-size-small);
      }
    }
    & .prof_cont {
      grid-column: 2/3;
      line-height: var(--line-height-button);
      color: var(--color-secondary);
      letter-spacing: 0.05em;
      @media (width < 768px) {
        align-self: center;
      }
    }
    & .name {
      font-size: var(--font-size-large) !important;
      margin-block-end: 0 !important;
      color: var(--color-secondary) !important;
      font-weight: var(--font-weight-jp-bold);
    }
    & .name a {
      font-weight: var(--font-weight-jp-bold);
      text-decoration: underline;
      transition: all 0.2s;
      border-block-end: none;
      &:after {
        display: none;
      }
    }
    & .text {
      margin-block-end: 0;
      margin-block-start: var(--spacing-xs);
      line-height: var(--base-line-height) !important;
    }

    & .sub {
      margin-block-start: var(--spacing-x-min);
      font-size: var(--font-size-small) !important;
      transition: color 0.2s;
      margin-block-end: 0 !important;
      color: var(--color-secondary) !important;
      line-height: var(--line-height-button) !important;
    }
    & .clear {
      display: none;
    }
  }
}
@layer component {
  .c-author {
    & .c-author__contents-head-main {
      & p {
        margin-block-end: 0 !important;
        font-size: var(--font-size-large);
        font-weight: var(--font-weight-jp-bold);
        color: var(--color-secondary);
      }
    }
    .c-author__contents-text {
      > p {
        font-size: var(--font-size-small) !important;
        margin-block-end: 0 !important;
      }
    }
  }
}
@layer component {
  .c-flow__heading {
    & .ttl {
      margin-block-end: var(--spacing-md);
      font-size: var(--font-size-22);
      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-list-hor.c-flow__list li {
    border: 1px solid var(--color-border-light);

    h5 {
      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;
    }
  }
  .c-flow__list {
    gap: var(--spacing-xs);
    > li {
      padding: var(--spacing-s);
      & p {
        font-size: var(--font-size-small-3) !important;
      }
      & h3 {
        padding-inline-start: 0px !important;
        &:before {
          display: none !important;
        }
      }
      & h3,
      & h4 {
        & > span {
          &:last-child {
            font-size: var(--font-size-base) !important;
            line-height: var(--line-height-title) !important;
            color: var(--color-darkest) !important;
          }
          > span {
            &:first-child {
              color: var(--color-secondary) !important;
            }
            &:nth-child(2) {
            }
            &:last-child {
              font-size: var(--font-size-base);
              line-height: var(--line-height-title);
              color: var(--color-secondary);
              font-weight: var(--font-weight-jp-bold) !important;
            }
            > span {
              &:nth-child(2) {
                margin-inline-start: var(--spacing-x-min);
                font-size: var(--font-size-large) !important;
              }
            }
          }
        }
      }
    }
  }
}
@layer component {
  .digitalbanner {
    margin-block-start: var(--spacing-sm) !important;
    margin-block-end: var(--spacing-sm) !important;
  }
  .post-template-single-event-report {
    & .event-person {
      max-width: 100%;
    }
    & a.digi_bnr {
      max-width: 100%;
    }
  }
  .event-report-nohead {
    .entry-content p {
      color: inherit !important;
    }
    & h1.entry-title {
      margin-block: 0 var(--spacing-md);
      font-size: var(--font-size-28) !important;
      font-feature-settings: "palt" on;
      line-height: 1.5;
      color: var(--color-primary) !important;
      letter-spacing: 0.05em;
      text-align: left !important;
      font-weight: var(--font-weight-jp-bold) !important;
      & br {
        display: none;
      }
    }
    & main {
      max-width: 730px;
      margin: 0 auto !important;
    }
  }
}
@layer component {
  /*knowhow*/
  .c-successful-case.knowhowTop {
    margin-block-end: var(--spacing-md);
  }
  /* knowhow case */
  .category-case {
    & .c-link__box-item {
      margin-block-end: var(--spacing-5xl);
    }
  }
  /*転職事例カード*/
  .case-box {
    margin-block-end: var(--spacing-2xl);
    position: relative;
    z-index: 1;
    padding: var(--spacing-md);
    overflow: hidden;
    border: 1px solid var(--color-border-default);
    @media (width < 768px) {
      margin-block-end: var(--spacing-2xl);
      padding-inline: var(--spacing-sm);
    }
    &:last-child,
    > :last-child {
      margin-block-end: 0;
    }
    &:has(.c-consultant-support) {
      margin-block-end: var(--spacing-5xl);
    }
    & .case_card_arrow {
      display: none;
    }

    &: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;
      }
    }
  }

  .case-box_title {
    /* display: grid; ※人物アイコンを表示する場合grid*/
    display: block;
    text-align: center;
    grid-template-columns: 24px auto;
    /* gap: var(--spacing-s); ※人物アイコンを表示する場合*/
    align-items: center;
    justify-content: center;
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-22) !important;
    background: none;
    color: var(--base-font-color) !important;
    padding: 0;
    line-height: var(--base-line-height);
    font-weight: var(--font-weight-jp-bold) !important;
    @media (width < 768px) {
      font-size: var(--font-size-20);
    }
    & br {
      display: none;
    }
    &: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;
    }
  }
  .case-box_des {
    font-size: var(--font-size-base) !important;
    color: var(--base-font-color);
    line-height: var(--base-line-height);
    font-weight: var(--font-weight-jp-bold);
    margin-block: var(--spacing-sm) !important;
    position: relative;
    z-index: 3;
  }
  .case-box_link a {
    font-size: var(--font-size-small) !important;
    font-weight: var(--font-weight-jp-medium);
    color: var(--color-secondary);
    position: relative;
    z-index: 3;
    text-decoration-color: #0000;
    text-underline-offset: 2px;
    transition: all 0.2s ease;
  }
  @media (any-hover: hover) {
    .case-box_link a:hover {
      text-decoration: underline;
      color: var(--color-text-link-hover);
      text-decoration-color: var(--color-text-link-hover);
      &:before {
        inset-inline-start: 4px;
      }
    }
  }
  .case_card_category {
    display: none;
  }
  .case_cardList {
    position: relative;
    z-index: 2;
    /* display: grid; */
    gap: var(--spacing-s) var(--spacing-sm);
    padding-block-start: var(--spacing-xl);
    @media (768px <=width) {
      grid-template-columns: 1fr 1fr;
    }
    &:before {
      content: "転職後";
      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;
      color: var(--color-lightest);
      background: var(--gradient-button-bg-gold-02);
      position: absolute;
      right: 0;
      top: 0;
      width: 49%;
    }
    &:after {
      content: "転職前";
      background-color: var(--color-bg-tertiary);
      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;
      position: absolute;
      left: 0;
      top: 0;
      width: 49%;
    }
  }
  .case_cardList:has(p) {
    padding: 0 !important;
    span {
      display: inline-block;
      font-size: 100% !important;
    }
    img,
    &:before,
    &:after {
      display: none;
    }
  }
  .case_card {
    display: grid;
    grid-auto-flow: column;
    gap: var(--spacing-s) var(--spacing-sm);
    text-align: center;
    @media (768px <= width) {
      grid-template-columns: 1fr 1fr;
    }
    @media (width < 768px) {
      display: flex;
      gap: 0;
      justify-content: space-between;
    }
    &:first-child .case_card_before {
      padding-block-start: var(--spacing-sm);
    }
    &:last-child .case_card_before {
      padding-block-end: var(--spacing-sm);
      &:before {
        content: "年収";
      }
    }
    &:first-child .case_card_after {
      padding-block-start: var(--spacing-sm);
    }
    &:last-child .case_card_after {
      padding-block-end: var(--spacing-sm);
      &:before {
        content: "年収";
      }
    }
    & .case_card_before {
      background-color: var(--color-bg-secondary);
      padding-inline: var(--spacing-s);
      @media (width < 768px) {
        width: 49% !important;
        display: block !important;
      }
    }
    & .case_card_after {
      background-color: var(--color-cta-lighter);
      padding-inline: var(--spacing-s);
      @media (width < 768px) {
        width: 49% !important;
        display: block !important;
      }
    }
    &:first-child .case_card_before,
    &:nth-child(2) .case_card_before,
    &:first-child .case_card_after,
    &:nth-child(2) .case_card_after {
      display: inline-block;
      font-size: 0.9375rem;
      line-height: var(--line-height-button);
    }
    &:last-child .case_card_before,
    &:last-child .case_card_after {
      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);
    }
    &:last-child .case_card_after {
      font-size: var(--font-size-26);
      color: var(--color-cta);
    }
  }
  .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);
    }
    > p {
      font-size: var(--font-size-small);
      @media (width < 768px) {
        font-size: var(--font-size-base);
      }
    }
  }
  .c-successful-case__title {
    & 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);
      color: var(--base-font-color) !important;
      @media (width < 768px) {
        font-size: var(--font-size-20);
      }
    }
  }
  .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;
      font-size: inherit;
      margin-block-end: 0 !important;
    }
  }
  .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);
      margin-block-end: 0 !important;
      + span {
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-jp-bold);
        line-height: var(--line-height-button);
      }
      & span {
        display: inline !important;
      }
    }
  }
  .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;
      margin-block-end: 0 !important;
      &:after {
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        inline-size: 16px;
        block-size: 16px;
        margin-block: auto;
        content: "";
        background: url(assets/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 {
  .company-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(233px, 1fr));
    gap: 8px;
    padding-block: var(--spacing-no) var(--spacing-2xl);
    @media (width < 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .company-item {
    display: grid;
    grid-template-columns: 1fr;
    &:not(:has(a)) {
      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;
      }
    }
    & a {
      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);
      transition:
        color 0.2s ease-in-out,
        background-color 0.2s ease-in-out;
      @media (width < 768px) {
        grid-template-rows: 50px 1fr;
      }
      @media (any-hover: hover) {
        &:hover {
          .company-name {
            color: var(--color-text-link-hover);
          }
          background: var(--color-bg-gray);
        }
      }
      &:not(:has(.company-logo)) {
        grid-template-rows: 1fr;
        align-items: center;
      }
    }
  }
  .company-logo {
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    padding: var(--spacing-xs) !important;
    padding-block: var(--spacing-min) var(--spacing-xs) !important;
  }
  .company-logo img {
    margin-inline: auto;
    height: 50px;
    width: auto;
  }
  .company-name {
    font-size: var(--font-size-small);
    line-height: var(--line-height-button);
    color: var(--color-text-gray);
    text-align: start;
    margin-block-end: 0 !important;
  }
  .company-item a {
    p.company-name {
      font-weight: var(--font-weight-jp-medium);
      color: var(--color-primary);
    }
  }
}
@layer component {
  .c-consultant__profile div {
    margin-block-end: 0 !important;
  }
  .category-consultant_list {
    & .entry-content {
      padding-block-start: 0 !important;
    }
    & h2:first-child {
      margin-block-start: 0 !important;
    }
    .wp-block-table th {
      border: 1px solid var(--color-secondary) !important;
      border-inline: none !important;
    }
    .wp-block-table td {
      border-block-start: none !important;
      border-block-end: 1px solid var(--color-border-light) !important;
      border-inline: none !important;
    }
  }

  .c-title-page-consultant__image {
    width: auto;
    height: 300px;
    @media (width < 768px) {
      width: auto;
      height: 150px;
    }
  }
  .c-consultant__articles-item {
    & h3 {
      padding-inline-start: 0 !important;
      &:before {
        display: none;
      }
    }
  }
  .c-consultant__voice-list {
    & p {
      margin-block-end: 0 !important;
    }
    :where(.c-consultant__voice-profile) {
      :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) !important;
      font-weight: var(--font-weight-jp-bold) !important;
      line-height: var(--line-height-button) !important;
      color: var(--color-secondary) !important;
      letter-spacing: 0.05em;
    }
    :where(.c-consultant__voice-description) {
      font-size: var(--font-size-small) !important;
      @media (width < 768px) {
        font-size: var(--font-size-base) !important;
      }
    }
  }

  .c-consultant-support {
    margin-block-end: var(--spacing-5xl);
    @media (width < 768px) {
      margin-block-end: var(--spacing-2xl);
    }
    .c-consultant-support__wrap {
      & .ttl {
        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 {
        font-size: var(--base-font-size);
        color: var(--color-lightest) !important;
        &:first-of-type {
          margin-block-end: 0;
        }
        & span {
          display: inline;
        }
      }

      & > p {
        & > span {
          display: inline;
          @media (width < 768px) {
            display: block !important;
          }
        }
      }
    }
  }

  .c-consultant-support {
    & .c-consultant-support__wrap {
      & h2 {
        color: inherit !important;
        border: 0 !important;
        &:after {
        }
      }
    }
  }
}
@layer component {
  .kyujin-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr); /* Gridの場合 */
    & .chemical-item {
      width: auto !important;
      box-shadow: 0px 0px 0px rgba(204, 204, 204, 0) !important;
      border: 1px solid var(--color-border-default) !important;
      & img {
        max-width: 100%;
        height: auto;
      }
    }
    & h3 {
      padding: 0 !important;
      padding-inline: var(--spacing-xs) !important;
      margin-block-start: var(--spacing-xs) !important;
      margin-block-end: var(--spacing-xs) !important;
      font-size: var(--font-size-small) !important;
      &:before {
        display: none;
      }
    }
  }
  .c-consultant-introduction__list-textarea {
    & p {
      color: inherit !important;
    }
  }
  .c-consultant-introduction__list-position {
    margin-block-end: var(--spacing-xs) !important;
    font-size: var(--font-size-small-1) !important;
  }
  .c-consultant-introduction__list-name {
    margin-block-end: var(--spacing-sm) !important;
    font-size: var(--font-size-large) !important;
  }
  .c-consultant-introduction__list-label {
    margin-block-end: 0 !important;
  }

  .o-container_inner {
    & .o-container-figure_image {
      display: none;
    }
    & .o-container-figure_text {
      margin-block-end: var(--spacing-md);
      & .c-link-blue {
        margin-inline-start: var(--spacing-sm);
      }
      & a {
        color: var(--color-secondary);
        line-height: var(--line-height-button);
        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;
        &:hover {
          color: var(--color-text-link-hover);
          text-decoration-color: var(--color-text-link-hover);
          &:before {
            inset-inline-start: 4px;
          }
        }
        &: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(assets/images/common/icon-arrow-primary-right-sm.svg);
          background-repeat: no-repeat;
          background-position: 50%;
          background-size: contain;
          transition: all 0.2s ease;
        }
      }
    }
  }
}
@layer component {
  & .c-segment:has(.c-segment__details) .c-segment__list-wrap > .c-segment__details:not([open]) + .c-segment__list li:nth-child(n + 5) {
    display: none;
  }
}
/* 領域TOP */
@layer component {
  * .c-section-group {
    padding-block: 0 !important;
    &:has(section) {
      padding-block: var(--spacing-4xl) !important;
      @media (width < 768px) {
        padding-block: var(--spacing-2xl) var(--spacing-xl) !important;
      }
    }
    c-search-company &:has(.c-offer),
    &:has(.c-search-list),
    &:has(.c-search-company) {
      background: var(--color-bg-secondary) !important;
    }
  }
  .page-template-page-industry-top {
    & section {
      margin-block-end: 0 !important;
    }
    .c-hero__bg {
      @media (width < 768px) {
        opacity: 0.3;
      }
    }
    & .c-hero.global {
      & .c-hero__textarea {
        @media (width < 768px) {
          display: grid;
          align-items: center;
          align-self: center;
        }
      }
    }
    & .c-offer,
    .c-search-list,
    .c-search-company {
      & h2 {
        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;
        border: 0 !important;
        color: inherit !important;
        padding-block-end: 0 !important;

        @media (width < 768px) {
          margin-block-end: var(--spacing-sm);
        }
        &: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);
        }
      }
    }
    & .c-hero,
    .c-reasons,
    .c-flow-support,
    .c-contents__heading,
    .c-knowhow__heading {
      & h2 {
        border: 0px;
        padding-block-end: 0 !important;
      }
    }
    & .c-hero,
    .c-reasons,
    .c-flow-support {
      & h2 {
        color: var(--color-lightest) !important;
      }
    }
    & .c-offer,
    .c-reasons__intelligence-heading,
    .c-reasons__record-heading {
      & h3 {
        padding-inline-start: 0 !important;
        padding-block-end: var(--spacing-md) !important;
        margin-block-end: 0 !important;
        &:before {
          display: none !important;
        }
      }
    }
    & .c-offer {
      & h3 {
        padding-block-end: 0 !important;
        color: inherit !important;
      }
    }
    & .c-search-list {
      & .c-offer__contents-wrap {
        @media (width < 768px) {
          padding-block-end: 0;
        }
      }
      & h4 {
        margin-block-start: var(--spacing-lg);
        padding-inline: 0 !important;
      }
      & h4:first-child {
        margin-block-start: 0;
      }
      & .c-link__box {
        margin-block-end: 0 !important;
        padding-block-end: 0 !important;
      }
    }
    & .c-contents {
      & .c-contents__subheading {
        color: inherit !important;
      }
      & .c-segment__list {
        gap: var(--spacing-xs);
      }
    }

    .c-interview__list:has(> li:nth-last-child(n + 2)) {
      & li {
        width: 100%;
      }
    }
    .c-interview__list {
      & li {
        width: 33%;
        @media (width < 768px) {
          width: 100%;
        }
        & a {
          img {
            object-fit: cover;
            height: 194px;
            width: 100%;
            @media (width < 768px) {
              height: 210px;
            }
          }
        }
      }
    }
    .c-search-company__list-image {
      & img {
        width: auto;
        height: 50px;
        @media (width < 768px) {
          width: 90%;
          height: auto;
          margin: 0 auto;
        }
      }
    }
  }
  /* taglist01 */
  .c-segment.tag_list01 {
    & .c-segment__list {
      & .entry_tag_list_text {
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-jp-bold);
        line-height: var(--line-height-title);
        margin-block: var(--spacing-xs);
        color: var(--color-primary);
      }
    }
    & .hidden_list {
      display: none;
    }
  }
  & .more_btn.taglist {
    inline-size: fit-content;
    min-inline-size: 200px;
    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);
    text-align: center;
    top: -16px;
    position: relative;
    & a {
      display: block;
      padding-block: var(--spacing-xs);
      padding-inline: var(--spacing-lg);
      border-radius: var(--radius-normal);
      border: 1px solid var(--color-secondary);
      background: var(--gradient-blue-03);
    }
  }
  @media (any-hover: hover) {
    & .more_btn.taglist a:hover {
      color: var(--color-secondary);
      background: var(--color-lightest);
    }
  }
  /* taglist3 */
  & .c-segment__list {
    & figure {
      margin-block-end: 0 !important;
    }
    & img {
      object-fit: cover;
      aspect-ratio: 98 / 55;
    }
  }
}

@layer component {
  .case-interview {
    margin-block-end: var(--spacing-xl);
    .interview_lists {
      grid-template-columns: 1fr 1fr;
      gap: var(--column-gap-2col) !important;
      grid-template-rows: auto;
      @media (width < 768px) {
        grid-template-columns: 1fr !important;
      }
      & .c-column__item {
        grid-template-rows: subgrid;
        grid-row: span 4;
        padding: var(--spacing-sm);
        border: 1px solid var(--color-border-default);
      }
    }
  }
}
@layer component {
  & .c-flow-knowhow {
    & .c-flow-knowhow__list {
      & h3 {
        padding-inline-start: 0 !important;
        &:before {
          display: none;
        }
      }
    }
  }
  & .c-flow__list {
    gap: var(--spacing-md);
    @media (width < 768px) {
      gap: var(--spacing-xs);
    }
    > li {
      padding: var(--spacing-md);
      @media (width < 768px) {
        padding-block: var(--spacing-s);
      }
      & h3 {
        & span:last-child {
          @media (width < 992px) {
            font-size: var(--font-size-large) !important;
          }
        }
      }
      & p {
        font-size: var(--font-size-small) !important;
      }
    }
  }
  .c-flow-knowhow__sub-list {
    & > :where(li) {
      span.nolink {
        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;
      }
    }
  }
}
@layer component {
  .post-tags {
    font-size: var(--font-size-small-2);
    margin-block: var(--spacing-xs);
  }
}
@layer component {
  .c-search-panel {
    [class="c-page-sub-search-panel"] & {
      padding-block: var(--spacing-sm);
      margin-block-end: 0;
      background-color: var(--color-bg-secondary);
    }
  }
  .c-search-panel__inner {
    [class="c-page-sub-search-panel"] & {
      @media (width < 768px) {
        padding-inline: var(--spacing-s);
      }
    }
  }
  .c-search-panel__search {
    [class="c-page-sub-search-panel"] & {
      gap: var(--spacing-xs) var(--spacing-sm);
      @media (width < 1050px) {
        flex-direction: column;
        align-items: start;
      }
    }
  }
  .c-search-panel__search-wrap {
    [class="c-page-sub-search-panel"] & {
      @media (width > 940px) {
        min-block-size: 55px;
      }
      @media (width < 768px) {
        padding-inline: var(--spacing-xs) var(--spacing-s);
      }
    }
  }
  .c-search-panel__select-buttons {
    [class="c-page-sub-search-panel"] & {
      display: flex;
      @media (width < 576px) {
        display: none;
      }
    }
  }
  .c-search-panel__select-button {
    [class="c-page-sub-search-panel"] & {
      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;
      }
    }
  }
  .c-search-panel__search-box {
    [class="c-page-sub-search-panel"] & {
      @media (width >= 900px) {
        gap: var(--spacing-min);
        padding-inline: var(--spacing-min) var(--spacing-sm);
      }
    }
  }
  .c-search-panel__search-field {
    [class="c-page-sub-search-panel"] & {
      font-size: var(--font-size-small);
      @media (width < 768px) {
        font-size: var(--font-size-small-1);
      }
    }
  }
  .c-search-panel__controls-submit {
    [class="c-page-sub-search-panel"] & {
      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);
      }
    }
    .c-search-panel__controls-clear {
      [class="c-page-sub-search-panel"] & {
        flex-shrink: 0;
        > a > span {
          @media (width > 1050px) {
            display: block;
          }
        }
      }
    }
  }
}

@layer component {
  .c-search-panel__controls-clear {
    & span:last-child {
      white-space: nowrap;
    }
  }
}