/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/
:root {
  --primary-color: #1D61FF;
  --accent-color: #E50012;
  --color-black: #303030;
  --color-gs: #fff;
  --color-gs-secondary: #1D1D1F8C;
  --color-gs-tertiary: #1D1D1F59;
  --border-color: #C9D3D1;
  --transition-1: cubic-bezier(0.47,0.16,0.24,1);
  --transition-2: cubic-bezier(.16,1,.3,1);
  --circle: calc(72*3.14);
  --circle2: calc(80*3.14);
  --font-en: "Figtree", sans-serif;
}


/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}

figure {
  margin: 0;
  line-height: 0;
}

figcaption {
  line-height: 1.8;
}

button {
  padding: 0;
  border: none;
  background: none;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

img {
  width: 100%;
  height: auto;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (width > 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}

@media (width <= 768px) {
  .row-fluid {
    flex-direction: column;
    gap: 2rem;
  }
  
    .row-fluid .span1 {
      width: 100%;
    }
  
    .row-fluid .span2 {
      width: 100%;
    }
  
    .row-fluid .span3 {
      width: 100%;
    }
  
    .row-fluid .span4 {
      width: 100%;
    }
  
    .row-fluid .span5 {
      width: 100%;
    }
  
    .row-fluid .span6 {
      width: 100%;
    }
  
    .row-fluid .span7 {
      width: 100%;
    }
  
    .row-fluid .span8 {
      width: 100%;
    }
  
    .row-fluid .span9 {
      width: 100%;
    }
  
    .row-fluid .span10 {
      width: 100%;
    }
  
    .row-fluid .span11 {
      width: 100%;
    }
  
}

[aria-hidden="true"] {
  display: none;
}

.body-container-wrapper {
  background: #fff;
  position: relative;
  z-index: 2;
}

@media (width > 768px) {
  .body-container-wrapper {
    min-height: calc(100vh -  64.2rem);
  }

  .inner {
    max-width: 960px;
    margin: 0 auto;
  }
}

@media (width <= 768px) {
  .inner {
    margin: 0 1.5rem;
  }
}


.section {
  padding: 10rem 2rem;
}

@media (width <= 768px) {
  .section {
    padding: 4.5rem 0;
  }
}

.column {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  &.-narrow {
    gap: 5rem;
  }
}

@media (width <= 768px) {
  .column {
    gap: 3rem;
    &.-narrow {
      gap: 3rem;
    }
  }
}

.row {
  display: flex;
}

@media (width <= 768px) {
  .row {
    flex-direction: column;
  }
}
.hs_cos_wrapper_type_module:has(.embed_container) {
  line-height: 0;
}

/* Elements
Base HMTL elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */


html {
  font-size: 62.5%;
}

body {
  font-family: "Figtree", YakuHanJP, heisei-kaku-gothic-std, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.8;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  text-size-adjust: 100%;
  color: #303030;
}

@media (width <= 768px) {
  body {
    font-size: 1.3rem;
  }
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

p {
  margin: 0;
}

/* Anchors */

a {
  cursor: pointer;
  text-decoration: none;
  color: var(--color-black);
}

/* Lists */

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #CCC;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}

/* 英語 */
.en {
  font-family: var(--font-en);
}

/* 見出し */
.headline {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  font-size: 4.0rem;
  line-height: 1.5;
  margin: 0;
}

.headline span.-jp {
  font-size: 2rem;
  line-height: 1;
  color: var(--primary-color);
}

.headline span.-en {
  overflow: hidden;
  padding: 0 0 1rem;
  margin: 0 0 -1rem;
}

.headline em {
  display: block;
  font-family: var(--font-en);
  font-size: 10rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  word-break: keep-all;
  transform: translateY(101%);
}

.headline.-secondary {
  font-size: 4.8rem;
}

.headline.-secondary span {
  margin-bottom: 2rem;
}

.headline.-secondary span.-en {
  font-family: var(--font-en);
  font-size: 1.6rem;
  color: var(--primary-color);
}

.headline.-tertiary {
  font-size: 3.6rem;
}

.pages-hero {
  padding: 12rem 0;
}

.pages-hero .headline span.-jp {
  font-size: 2rem;
  letter-spacing: 0;
}

@media (width > 768px) {
  a {
    transition: .3s;
  }
}
@media (width <= 768px) {
  .headline {
    font-size: 2.4rem;
    gap: 2.4rem;
  }

  .headline em {
    font-size: 6.4rem;
  }

  .headline.-secondary {
    font-size: 3.2rem;
  }
  
  .headline.-secondary span {
    margin-bottom: 1.6rem;
  }

  .headline.-tertiary {
    font-size: 2.4rem;
  }

  .pages-hero {
    padding: 12rem 0 6.4rem;
  }

  .pages-hero .headline span.-jp {
    font-size: 1.4rem;
  }
}

.lead {
  font-size: 2.0rem;
  letter-spacing: -0.01em;
  line-height: 1.6;
}

@media (width <= 768px) {
  .lead {
    font-size: 1.6rem;
  }
}

.page-copy {
  font-size: 7.0rem;
  font-weight: 700;
  line-height: 1.22;
}

.page-copy.-en {
  line-height: 1;
  font-variation-settings: "wght" 500;
}

.page-lead {
  font-size: 2.6rem;
  font-variation-settings: "wght" 500;
  font-weight: 700;
  line-height: 1.4;
}

.page-head {
  margin: 0 0 12rem;
}
@media (width <= 768px) {
  .page-copy {
    font-size: 3.6rem;
  }
  .page-lead {
    font-size: 1.8rem;
  }
  .page-head {
    margin: 0 0 5rem;
  }
}

.text-head-label {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 2;
  color: #666;
  padding: 0 0 0 4.6rem;
  margin: 0;
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 4rem;
    height: 1px;
    background: #344EC4;
    transform: rotate(126.12deg);
    position: absolute;
    top: 1.6rem;
    left: 0;
  }
}

.post-tag {
  color: var(--primary-color);
  font-size: 1.2rem;
  font-weight: 700;
}

.post-date {
  font-size: 1.2rem;
  font-weight: 500;
  color: #808080;
}
.icon-arrow-circle {
  position: relative;
  line-height: 0;
  width: 7.2rem;
  height: 7.2rem;
}

.icon-arrow-circle svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.icon-arrow-circle svg.-blank {
  transform: rotate(-45deg);
}

.icon-circle-hover {
  position: absolute;
  top: 0;
  left: 0;
}

@media (min-width: 769px) {
  .icon-circle-hover circle {
    stroke:  var(--primary-color);
    stroke-dasharray: 0 var(--circle);
    transition: stroke-dasharray .7s var(--transition-1);
  }

  a:hover .icon-circle-hover circle,
  .link:hover .icon-circle-hover circle {
    transition: stroke-dasharray .3s var(--transition-1);
    stroke-dasharray: var(--circle) var(--circle);
  }
}

@media (max-width: 768px) {
  .icon-arrow-circle {
    width: 5.6rem;
    height: 5.6rem;
  }
}

.icon-circle-hover {
  color: var(--primary-color);
  transform: rotate(-90deg);
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}

.button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5rem;
  max-width: 63rem;
  line-height: 1.8;
  padding: 2.4rem 3.8rem 2.4rem 4rem;
  border: solid 1px var(--border-color);
  border-radius: 8px;
}

.button__text {
  position: relative;
  z-index: 1;
  transition: .3s;
}

.button .icon-arrow-circle {
  width: 7.2rem;
  height: 7.2rem;
  margin: 0 0 0 auto;
}

.button.-primary {
  background: #1D61FFCC;
  border: none;
  color: #fff;
}

@media (min-width: 769px) {
  .button:hover {
    background: #1D61FFB2;
    border: #1D61FFB2;
    box-shadow: 0px 6px 10px 0px #33529933;
  }

  .button:hover .button__text {
    color: #fff;
  }

  .button .icon-arrow-circle path {
    transition: .3s;
  }
  .button:hover .icon-arrow-circle rect {
    stroke: #fff;
  }
  .button:hover .icon-arrow-circle path {
    fill: #fff;
  }
}

@media (max-width: 768px) {
  .button {
    padding: 2.4rem;
    font-size: 1.4rem;
  }

  .button .icon-arrow-circle {
    width: 4rem;
    height: 4rem;
  }
}

.button:disabled {
  pointer-events: none;
  background: #E6EAE9;
  border: none;
  color: var(--color-gs-tertiary);
}

.button:disabled .icon-arrow-circle rect {
  stroke: var(--color-gs-tertiary);
}

.button:disabled .icon-arrow-circle path {
  fill: var(--color-gs-tertiary);
}
.link {
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .link {
    font-size: 1.4rem;
    gap: 1.6rem;
  }
}

/* 共通ページリンク */
.pages-link {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  border-top: solid 1px var(--border-color);
  border-bottom: solid 1px var(--border-color);
  padding: 4rem 1.6rem;
}

.pages-link img {
  width: 20rem;
}

.pages-link__content {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 3.2rem;
}

.pages-link__text {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.pages-link__text span {
  color: var(--primary-color);
  font-size: 1.6rem;
  line-height: 1;
}
.pages-link__text em {
  font-family: var(--font-en);
  font-size: 5.6rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 1;
  word-break: keep-all;
}

.pages-link .icon-arrow-circle {
  flex-shrink: 0;
  margin: 0 0 0 auto;
}

.dnd-section:has(.pages-link) + .dnd-section:has(.pages-link) .pages-link {
  border-top: none;
}

@media (min-width: 769px) {
  .row-fluid .span6:has(.pages-link) {
    width: 46.875%;
    position: relative;
  }

  .row-fluid .span6:has(.pages-link) + .span6:has(.pages-link)::before {
    content: "";
    display: block;
    width: 1px;
    height: calc(100% - 4rem);
    background: var(--border-color);
    position: absolute;
    left: -4.1rem;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}
@media (max-width: 768px) {
  .pages-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
    padding: 3.2rem 0 3.3rem;
  }
  .pages-link img {
    width: 100%;
  }
  .pages-link__text {
    gap: 1rem;
  }
  .pages-link__text span {
    font-size: 1.4rem;
  }
  .pages-link__text em {
    font-size: 4.2rem;
  }
  .pages-link .icon-arrow-circle {
    width: 5.6rem;
    height: 5.6rem;
  }
  .row-fluid .span6:has(.pages-link) + .span6:has(.pages-link) .pages-link {
    border-top: none;
  }
}

/* テキストリンク */

.text-link {
  color: var(--primary-color);
  text-decoration: underline;
}
.line {
  margin: 0;
  border-color: #303030;
}
/* Fields */
.form fieldset {
  max-width: 100% !important;
}

.hs-form-field {
  margin-bottom: 1.4rem;
}

.hs-form-field > label {
  display: flex;
  gap: .4rem;
  margin-bottom: 1.6rem;
}

/* Labels */

form label {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.7;
}

fieldset:has(textarea) label {
  margin: 0 0 1.3rem;
}

@media (max-width: 768px) {
  form label {
    font-size: 1.6rem;
    margin: 0;
  }
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: clamp(14px,1.6rem,16px);
  line-height: 1.7;
}
@media (max-width: 768px) {
  form legend {
    font-size: 1.4rem;
    line-height: 1.8;
  }
}

/* Inputs */
input[type="text"],
input[type=email],
input[type=tel] {
  display: block;
  background: #F5F5F7;
  border: none;
  padding: 0;
  font-size: 1.4rem;
  border-radius: .4rem;
}

select {
  display: block;
  background: #F5F5F7 url('data:image/svg+xml;charset=utf-8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 7.70078L0 1.70078L1.4 0.300781L6 4.90078L10.6 0.300781L12 1.70078L6 7.70078Z" fill="#303030"/></svg>') no-repeat right 1.6rem center;
  background-size: 1.2rem .74rem;
  border: none;
  padding: 0;
  font-size: 1.4rem;
  border-radius: .4rem;
  appearance: none;
}

input[type="text"]:focus,
input[type=email]:focus,
input[type=tel]:focus,
select:focus,
textarea:focus {
  outline: none;
  border: 2px solid #1D61FFCC;
}

textarea {
  background: #F5F5F7;
  padding: 1.6rem;
  font-size: 1.4rem;
  border: none;
  height: 40rem;
  border-radius: .4rem;
}

.is-confirm .hs-form-field > label {
  margin-bottom: 1.2rem;
}
.is-confirm input[type=text],
.is-confirm input[type=search],
.is-confirm input[type=email],
.is-confirm input[type=password],
.is-confirm input[type=tel],
.is-confirm input[type=number],
.is-confirm input[type=file],
.is-confirm select,
.is-confirm textarea {
  padding-left: 0;
  padding-right: 0;
  pointer-events: none;
  appearance: none;
  height: auto;
  background: none;
  font-size: 2rem;
  line-height: 1.8;
}

.is-confirm input:-webkit-autofill {
  box-shadow: 0 0 0 1.4rem #fff inset !important;
}

.is-confirm .hs-form-radio:not(:has(input:checked)) {
  display: none;
}

.is-confirm input[type=radio] + span {
  padding: 0;
}

.is-confirm input[type=radio] + span::before,
.is-confirm input[type=radio] + span::after,
.is-confirm input[type=radio]:checked + span::after {
  display: none;
}

@media (max-width: 768px) {
  input[type="text"],
  input[type=email],
  input[type=tel],
  textarea,
  select {
    font-size: 1.6rem;
  }
  select {

    background-position: right .8rem center;
  }
  .is-confirm input[type=text],
  .is-confirm input[type=search],
  .is-confirm input[type=email],
  .is-confirm input[type=password],
  .is-confirm input[type=tel],
  .is-confirm input[type=number],
  .is-confirm input[type=file],
  .is-confirm select,
  .is-confirm textarea {
    font-size: 1.8rem;
  }

  .is-confirm select {
    padding: .6rem 0 1.8rem;
  }
}

/* Inputs - checkbox/radio */

.inputs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 4.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inputs-list input,
.inputs-list span {
  vertical-align: middle;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=checkbox] + span,
input[type=radio] + span {
  display: inline-block;
  margin: 0 !important;
  padding: 0 0 0 2.8rem;
  position: relative;
}

input[type=checkbox] + span::before,
input[type=radio] + span::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  border: solid 1px #A7A8AA;
  border-radius: .4rem;
  position: absolute;
  left: 0;
  top: 3px;
}

input[type=checkbox] + span::after {
  content: "";
  display: block;
  width: 12px;
  height: 10px;
  border-left: solid 3px var(--color-black);
  border-bottom: solid 3px var(--color-black);
  opacity: 0;
  position: absolute;
  top: .6rem;
  left: .4rem;
  transform: rotate(-45deg);
}

input[type=checkbox]:checked + span::after {
  opacity: 1;
}

input[type=radio] + span::before {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  top: .1rem;
}

input[type=radio] + span::after {
  content: "";
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  left: 4px;
  opacity: 0;
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: 5px;
}

input[type=radio]:checked + span::after {
  opacity: 1;
}

@media (max-width: 768px) {
  input[type=checkbox] + span {
    padding: 0 0 0 3.0rem;
  }
  input[type=checkbox] + span::before {
    width: 2rem;
    height: 2rem;
  }
  input[type=checkbox] + span::after {
    width: 1.2rem;
    height: 1rem;
    border-left: solid .3rem var(--color-black);
    border-bottom: solid .3rem var(--color-black);
    top: .5rem;
    left: .3rem;
  }
  input[type=radio] + span {
    padding: 0 0 0 3.7rem;
  }
  input[type=radio] + span::before {
    width: 2.5rem;
    height: 2.5rem;
  }
  input[type=radio] + span::after {
    width: 1.7rem;
    height: 1.7rem;
    left: .4rem;
    top: .5rem;
  }
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: clamp(16px,1.8rem,18px);
  line-height: 1.7;
}

form .hs-richtext a {
  text-decoration: underline;
}

@media (min-width: 769px) {
  form .hs-richtext p {
    margin: 0 0 2rem;
  }
}

@media (max-width: 768px) {
  form .hs-richtext,
  form .hs-richtext p {
    font-size: 1.6rem;
  }
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 0 !important;
}

.legal-consent-container .hs-form-booleancheckbox-display > span {
  display: flex !important;
  gap: .4rem;
}

/* Validation */

.hs-form-required {
  color: #FE4249;
}

.hs-input.invalid.error {
  border-color: #FE4249;
}

.hs-error-msg {
  font-size: 1.4rem;
  color: #FE4249;
  margin-top: 0.4rem;
}

.is-confirm .hs-form-required {
  display: none;
}

/* Submit button */
.actions:has(.hs-button) {
  max-width: 63rem;
  cursor: pointer;
  border: none;
  background: #1D61FFCC url('data:image/svg+xml;charset=utf-8,<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="55" height="55" rx="27.5" stroke="white" stroke-opacity="0.3"/><path d="M30.7832 28.6667H23.3332C23.1443 28.6667 22.9859 28.6029 22.8582 28.4751C22.7304 28.3473 22.6665 28.189 22.6665 28.0001C22.6665 27.8112 22.7304 27.6529 22.8582 27.5251C22.9859 27.3973 23.1443 27.3334 23.3332 27.3334H30.7832L27.5165 24.0667C27.3832 23.9334 27.3193 23.7779 27.3248 23.6001C27.3304 23.4223 27.3998 23.2667 27.5332 23.1334C27.6665 23.0112 27.8221 22.9473 27.9998 22.9417C28.1776 22.9362 28.3332 23.0001 28.4665 23.1334L32.8665 27.5334C32.9332 27.6001 32.9804 27.6723 33.0082 27.7501C33.0359 27.8279 33.0498 27.9112 33.0498 28.0001C33.0498 28.089 33.0359 28.1723 33.0082 28.2501C32.9804 28.3279 32.9332 28.4001 32.8665 28.4667L28.4665 32.8667C28.3443 32.989 28.1915 33.0501 28.0082 33.0501C27.8248 33.0501 27.6665 32.989 27.5332 32.8667C27.3998 32.7334 27.3332 32.5751 27.3332 32.3917C27.3332 32.2084 27.3998 32.0501 27.5332 31.9167L30.7832 28.6667Z" fill="white"/></svg>') no-repeat right 3.8rem center;
  border-radius: .8rem;
  transition: all .15s linear;
}
.post-search input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  transition: all 0.15s linear;
  white-space: normal;
  padding: 0;
  border: none;
  background: none;
  font-size: 1.8rem;
  font-weight: 700;
  position: relative;
}

.form .actions .hs-button {
  width: 100%;
  display: block;
  line-height: 1.8;
  border-radius: .8rem;
  padding: 3.6rem 3.8rem 3.6rem 4rem;
  color: #fff;
  text-align: left;
}

.form .button .icon-arrow-circle {
  width: 5.6rem;
  height: 5.6rem;
}

@media (min-width: 769px) {
  .actions:has(.hs-button):hover {
    background-color: #1d61ffb2;
    box-shadow: 0 6px 10px 0 #33529933;
  }
}

@media (max-width: 768px) {
  .actions:has(.hs-button) {
    gap: 1.6rem;
    background-size: 4rem 4rem;
    background-position: right 2.4rem center;
  }
  form input[type=submit],
  form .hs-button {
    font-size: 1.5rem;
  }
  .form .actions .hs-button {
    padding: 3.15rem 2.4rem;
    font-size: 1.4rem;
  }
  .form .button .icon-arrow-circle {
    width: 4rem;
    height: 4rem;
  }
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}




[aria-hidden="true"] {
  display: none;
}
/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}
.parallax-image {
  position: relative;
  overflow: hidden;
}

.parallax-image::before {
  content: "";
  display: block;
}

.parallax-image img {
  /* transition: transform .3s; */
  position: absolute;
  top: 0;
  left: 0;
}

.video {
  overflow: hidden;
}

.video::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.video iframe {
  min-width: 100%;
  min-height: 100%;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* Missing Template at Path: \'recruit-monicle\/css\/components\/_nav.css\' */
/* Navigation skipper */

.header__skip {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: -1000px;
  width: 1px;
}

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
  height: auto;
  left: 0;
  overflow: visible;
  top: 0;
  width: auto;
}

/**/
.header {
  display: flex;
  align-items: center;
  padding: 2.7rem 3.6rem;
  height: 10rem;
}

.header__inner {
  width: 100%;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  font-family: var(--font-en);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
  & img {
    width: 13rem;
  }
}

.header__pannel {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__pannel-buttons {
  display: flex;
  align-items: center;
  gap: 4.7rem;
}

.header__pannel-list {
  display: flex;
  gap: 2rem;

  & li {
    width: 20rem;
    &:has(.header-button.-entry) {
      width: 13.6rem;
    }
  }
}

.header-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.6rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 2;
  padding-right: 1.25rem;
  border: solid 1px var(--color-black);
  background: linear-gradient(270deg,#fff 50%,#666 0) no-repeat 100% 100%;
  background-size: 202% 100%;
  position: relative;

  &::after {
    content: "";
    display: block;
    width: .7rem;
    height: 1.3rem;
    background: url('data:image/svg+xml;utf8,<svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.18878 12L5.90576 6.5L1.18878 1" stroke="%23303030" stroke-linecap="square"/></svg>') no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1.6rem;
    margin: auto;
    transition: .3s;
  }

  &.-entry {
    font-family: var(--font-en);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.2;
    padding-right: .45rem;
    &::after {
      transform: rotate(90deg);
      right: 1.3rem;
    }
  }
}

.header__pannel-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6rem;
  width: 2.4rem;
  height: 2.4rem;
  & span {
    width: 100%;
    height: 1px;
    background: var(--color-black);
    transition: .3s;
  }
  &[aria-expanded="true"] {
    gap: 1rem;
    & span {
      width: 3rem;
      &:first-child {
        transform: rotate(45deg) translate(2px, 6px);
      }
      &:nth-child(2) {
        display: none;
      }
      &:last-child {
        transform: rotate(-45deg) translate(1px,-6px);
      }
    }
  }
}

.globalnav {
  background: #fff;
  padding: 8.7rem 4.3rem 3.1rem 6.8rem;
  width: 100%;
  position: absolute;
  top: 100px;
  left: 0;
  z-index: 999;
}

.globalnav__wrap {
  display: flex;
  flex-direction: column;
  gap: 8.7rem;
}

.globalnav__column {
  display: flex;
  align-items: flex-start;
  gap: 6.1rem;
}

.globalnav__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6.9rem 6.4rem;
  width: 56.9rem;
  & li {
    width: 25rem;
    counter-increment: number;
    & a {
      display: flex;
      align-items: center;
      gap: 1.2rem;
      font-family: var(--font-en);
      font-size: 1.6rem;
      &::before {
        content: counter(number, decimal-leading-zero);
        width: 2.9rem;
      }

      & span {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        &::before {
          content: "";
          display: block;
          width: 9.1rem;
          height: .1rem;
          background: #E2E8F0;
        }
      }
    }

    &:nth-child(even) {
      width: auto;
      flex: 1;
    }
  }
}

.globalnav__other-link {
  width: 39.8rem;
  padding: 0 1.65rem;
  line-height: 0;
}

.globalnav__subnav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5rem;
}

.globalnav__subnav-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5rem;

  & li {
    & a {
      font-size: 1.2rem;
      line-height: 1.2;
    }
  }
}

.globalnav__developers-bnr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 23rem;
  padding: 1.7rem 1.5rem;
  background: linear-gradient(to right, #0037B8, #040C1C);
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.05em;
  transform: .3s;
  & span {
    font-family: var(--font-en);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
  }
}

@media ( 768px < width) {
  .header-button:hover {
    background-position: 0 100%;
    color: #fff;
    &::after {
      background-image: url('data:image/svg+xml;utf8,<svg width="7" height="13" viewBox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.18878 12L5.90576 6.5L1.18878 1" stroke="%23fff" stroke-linecap="square"/></svg>');
    }
  }
  .header__pannel-menu:hover {
    gap: 1rem;
  }
  .globalnav__menu li a:hover span {
    text-decoration: underline;
  }
  .globalnav__subnav-list li a:hover {
    text-decoration: underline;
  }
  .globalnav__developers-bnr:hover {
    opacity: .8;
  }
}

@media (width <= 768px) {
  .header {
    padding: 1.8rem 2rem;
    height: auto;
  }
  .header__pannel-list {
    display: none;
  }
  .globalnav {
    padding: 2rem 2.4rem;
    overflow: auto;
    overscroll-behavior-y: contain;
    height: calc(100% - 7rem);
    position: fixed;
    top: 70px;
  }
  .globalnav__wrap {
    gap: 2rem;
  }
  .globalnav__column {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }
  .globalnav__menu {
    width: auto;
    flex-direction: column;
    gap: 4.4rem;
    & li {
      width: auto;
      &:nth-child(2n) {
        flex: 0 0 auto;
      }
    }
  }

  .globalnav__buttons {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
  }

  .header-button {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    padding-right: 0;
    border-color: #000;
    background: #fff;

    &.-entry {
      font-weight: 600;
      padding-right: 0;
      letter-spacing: 0;
      background: #fff;
    }
  }

  .globalnav__other-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 8rem;
    border: solid 1px #000;
    padding: 2.1rem 2rem;
  }

  .globalnav__subnav {
    flex-direction: column-reverse;
    gap: 6rem;
  }

  .globalnav__subnav-list {
    gap: 1.8rem 1rem;
  }
  .globalnav__developers-bnr {
    width: 100%;
    padding: 1.7rem 2.2rem;
    & span {
      font-size: 2.5rem;
      line-height: 1.1;
    }

    & small {
      font-size: 1.3rem;
    }
  }
}

.header-l2 {
  background: #000;
  & .header__logo {
    color: #fff;
  }
  & .header__pannel-menu {
    & span {
      background: #fff;
    }
  }
}
.footer {
  background: #333;
  padding: 8rem 8rem 4rem;
}

.footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.footer__logo {
  width: 22rem;
  margin: 0 0 6rem;
  line-height: 0;
}

.footer__column {
  display: flex;
  gap: 8rem;
  & dl {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    margin: 0;
    & dt {
      font-family: var(--font-en);
      color: rgba(255, 255, 255, .35);
      font-size: 1.8rem;
      font-weight: 600;
      line-height: 1.2;
      padding: 0 0 .7rem;
      border-bottom: solid 1px rgba(255, 255, 255, .35);
    }

    & dd {
      display: flex;
      gap: 2.4rem;
      margin: 0;
    }
  }
}

.footer__menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  & li {
    line-height: 1;
    & a {
      color: #fff;
      font-size: 1.5rem;
      line-height: 1;
      padding-bottom: .4rem;
      position: relative;
      &::before {
        content: "";
        display: block;
        height: 1px;
        position: absolute;
        bottom: 0;
        inset: 100% 0 auto;
        background: #fff;
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform 0.6s;
      }
      &[target] {
        &::after {
          content: "";
          display: inline-block;
          width: 1.6rem;
          height: 1.6rem;
          background: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.4177 6.22237L5.47904 11.1611C5.35382 11.2863 5.20651 11.3489 5.0371 11.3489C4.86768 11.3489 4.72037 11.2863 4.59515 11.1611C4.46994 11.0359 4.40733 10.8885 4.40733 10.7191C4.40733 10.5497 4.46994 10.4024 4.59515 10.2772L9.53385 5.33849L5.20282 5.33849C5.02605 5.33849 4.88057 5.27772 4.76641 5.15619C4.65224 5.03465 4.59515 4.8855 4.59515 4.70872C4.60252 4.53931 4.66329 4.39384 4.77745 4.2723C4.89162 4.15077 5.03709 4.09 5.21387 4.09L11.0475 4.09C11.1359 4.09 11.2151 4.10658 11.285 4.13972C11.355 4.17287 11.4195 4.2189 11.4784 4.27783C11.5373 4.33676 11.5834 4.4012 11.6165 4.47118C11.6496 4.54115 11.6662 4.62033 11.6662 4.70872L11.6662 10.5424C11.6662 10.7044 11.6055 10.8462 11.4839 10.9677C11.3624 11.0893 11.2169 11.1537 11.0475 11.1611C10.8707 11.1611 10.7216 11.1003 10.6 10.9788C10.4785 10.8572 10.4177 10.7081 10.4177 10.5313L10.4177 6.22237Z" fill="white"/></svg>') no-repeat center center / 100% 100%;
          position: absolute;
          margin: 0 0 0 .4rem;
        }
      }
    }
  }
}

.footer__submenu {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: 2rem;
  & li {
    & a {
      color: rgba(255, 255, 255, .55);
      font-size: 1.4rem;
      padding: 0;
      &::before {
        display: none;
      }
      &[target] {
        &::after {
          width: 1.4rem;
          height: 1.5rem;
          background-image: url('data:image/svg+xml;utf8,<svg width="14" height="15" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.10092 5.82244L4.49147 10.4319C4.3746 10.5488 4.23711 10.6072 4.07899 10.6072C3.92087 10.6072 3.78338 10.5488 3.66651 10.4319C3.54964 10.315 3.49121 10.1775 3.49121 10.0194C3.49121 9.8613 3.54964 9.7238 3.66651 9.60693L8.27596 4.99748L4.23367 4.99748C4.06868 4.99748 3.9329 4.94077 3.82635 4.82733C3.71979 4.7139 3.66651 4.57469 3.66651 4.4097C3.67339 4.25158 3.7301 4.11581 3.83666 4.00238C3.94322 3.88895 4.07899 3.83223 4.24398 3.83223L9.6887 3.83223C9.7712 3.83223 9.8451 3.8477 9.91041 3.87863C9.97572 3.90957 10.0359 3.95254 10.0909 4.00753C10.1459 4.06253 10.1888 4.12268 10.2198 4.18799C10.2507 4.2533 10.2662 4.3272 10.2662 4.4097L10.2662 9.85442C10.2662 10.0057 10.2095 10.138 10.096 10.2514C9.9826 10.3649 9.84682 10.425 9.6887 10.4319C9.52371 10.4319 9.3845 10.3752 9.27107 10.2617C9.15764 10.1483 9.10092 10.0091 9.10092 9.84411L9.10092 5.82244Z" fill="white" fill-opacity="0.55"/></svg>');
          margin: .2rem 0 0 .4rem;
        }
      }
    }
  }
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8rem;
}

.footer__sublist {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.4rem;
  & li {
    line-height: 1;
    & a {
      color: rgba(255, 255, 255, .55);
      font-size: 1.3rem;
      line-height: 1;
    }
  }
}

.footer__sns {
  display: flex;
  gap: 2rem;
  & li {
    width: 4rem;
    line-height: 0;
    & a {
      & svg {
        fill-opacity: .55;
      }
    }
  }
}

.footer__copy {
  padding-top: 4rem;
  margin-top: 4rem;
  border-top: solid 1px rgba(255, 255, 255, .1);
  text-align: right;
  & small {
    font-family: var(--font-en);
    font-size: 1.4rem;
    color: rgba(255, 255, 255, .35);
  }
}

@media (width >= 768px) {
  .footer__menu {
    & li {
      & a {
        &:hover {
          &::before {
            transform: scaleX(1);
            transform-origin: left center;
          }
        }
      }
    }
  }

  .footer__submenu {
    & li {
      & a {
        &:hover {
          color: #fff;
          &[target] {
            &::after {
              background-image: url('data:image/svg+xml;utf8,<svg width="14" height="15" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.10092 5.82244L4.49147 10.4319C4.3746 10.5488 4.23711 10.6072 4.07899 10.6072C3.92087 10.6072 3.78338 10.5488 3.66651 10.4319C3.54964 10.315 3.49121 10.1775 3.49121 10.0194C3.49121 9.8613 3.54964 9.7238 3.66651 9.60693L8.27596 4.99748L4.23367 4.99748C4.06868 4.99748 3.9329 4.94077 3.82635 4.82733C3.71979 4.7139 3.66651 4.57469 3.66651 4.4097C3.67339 4.25158 3.7301 4.11581 3.83666 4.00238C3.94322 3.88895 4.07899 3.83223 4.24398 3.83223L9.6887 3.83223C9.7712 3.83223 9.8451 3.8477 9.91041 3.87863C9.97572 3.90957 10.0359 3.95254 10.0909 4.00753C10.1459 4.06253 10.1888 4.12268 10.2198 4.18799C10.2507 4.2533 10.2662 4.3272 10.2662 4.4097L10.2662 9.85442C10.2662 10.0057 10.2095 10.138 10.096 10.2514C9.9826 10.3649 9.84682 10.425 9.6887 10.4319C9.52371 10.4319 9.3845 10.3752 9.27107 10.2617C9.15764 10.1483 9.10092 10.0091 9.10092 9.84411L9.10092 5.82244Z" fill="white"/></svg>');
            }
          }
        }
      }
    }
  }
  .footer__sublist {
    & li {
      & a {
        &:hover {
          color: #fff;
        }
      }
    }
  }
  .footer__sns {
    & li {
      & a {
        &:hover {
          & svg {
            fill-opacity: 1;
          }
        }
      }
    }
  }
}

@media (width <= 768px) {
  .footer {
    padding: 6.4rem 0 4rem;
  }
  .footer__inner {
    margin: 0 2rem;
  }
  .footer__column {
    flex-direction: column;
    gap: 4.8rem;
    & dl {
      & dd {
        gap: 1.6rem;
      }
    }
  }
  .footer__menu {
    & li {
      & a {
        padding-bottom: 0;
      }
    }
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
    margin-top: 4rem;
  }
  .footer__sublist {
    gap: 1.6rem;
    & li {
      & a {
        font-size: 1.2rem;
      }
    }
  }
  .footer__sns {
    gap: .8rem;
  }
  .footer__copy {
    display: flex;
    justify-content: space-between;
  }
  .footer__logo {
    width: 12.9rem;
    margin: 0;
  }
}
/* Missing Template at Path: \'recruit-monicle\/css\/components\/_hero.css\' */
.breadcrumbs {
  padding: 2rem 3.6rem;
  position: absolute;
}

.breadcrumbs__list {
  display: flex;
  align-items: center;
  white-space: nowrap;
  & li {
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    line-height: 1;
    & + li {
      &::before {
        content: "/";
        margin: 0 .6rem;
      }
    }
  }
}

@media (max-width: 768px) {
  .breadcrumbs__list{
    overflow: scroll;
  }
  .breadcrumbs {
    padding: 2rem;
  }
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}
/* Missing Template at Path: \'recruit-monicle\/css\/components\/_slider.css\' */
/* Missing Template at Path: \'recruit-monicle\/css\/components\/_recruit.css\' */

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 768px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}

@media (width > 768px) {
  .for-sp {
    display: none;
  }
}

@media (width <= 768px) {
  .for-pc {
    display: none;
  }
}

.bg-gray {
  background: #F3F3F3;
}