@charset "UTF-8";
/*! 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;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 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
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, 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;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* 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 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 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;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 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, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

h1, h2, h3, h4, h5, ul, ol, li, p {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

/*------------------------------------------------------
# functions
-------------------------------------------------------*/
/*------------------------------------------------------
# media query
-------------------------------------------------------*/
/*------------------------------------------------------
# common
-------------------------------------------------------*/
html {
  overflow-x: hidden;
}

body {
  position: relative;
  width: 100%;
  margin: 0;
  color: #000000;
  line-height: 2;
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.1em;
  text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

input[type=button],
input[type=search],
input[type=submit],
button {
  border-radius: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
}
input[type=button]::-webkit-search-decoration,
input[type=search]::-webkit-search-decoration,
input[type=submit]::-webkit-search-decoration,
button::-webkit-search-decoration {
  display: none;
}
input[type=button]::focus,
input[type=search]::focus,
input[type=submit]::focus,
button::focus {
  outline-offset: -2px;
}

input[type=text], textarea {
  border-radius: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
}

input::-ms-clear {
  visibility: hidden;
}

a {
  color: #333;
  text-decoration: none !important;
  transition: all 0.3s;
}
a:hover {
  text-decoration: none;
}

button {
  transition: all 0.3s;
}
button:hover {
  transition: all 0.3s;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.pc-none {
  display: block !important;
}
@media print, screen and (min-width: 769px) {
  .pc-none {
    display: none !important;
  }
}

.sp-none {
  display: none !important;
}
@media print, screen and (min-width: 769px) {
  .sp-none {
    display: block !important;
  }
}

figure {
  margin: 0;
  padding: 0;
}

/*------------------------------------------------------
# l-main
-------------------------------------------------------*/
.l-main--post-archive {
  background-color: #f8f8f8;
}

/*------------------------------------------------------
# l-inner
-------------------------------------------------------*/
.l-inner {
  width: 100%;
  max-width: 1045px;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .l-inner {
    padding: 0 20px;
  }
}

.l-inner--s {
  width: 100%;
  max-width: 788px;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .l-inner--s {
    padding: 0 20px;
  }
}

.l-inner--m {
  width: 100%;
  max-width: 916px;
  margin: 0 auto;
  padding: 120px 10px 140px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .l-inner--m {
    padding: 0 20px;
  }
}

.l-inner--l {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .l-inner--l {
    padding: 0 20px;
  }
}

/*------------------------------------------------------
# case
-------------------------------------------------------*/
.l-case-inner {
  width: 100%;
  max-width: 1155px;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .l-case-inner {
    padding: 0 20px;
  }
}

.l-case-inner--s {
  max-width: 1044px;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .l-case-inner--s {
    padding: 0 20px;
  }
}

/*------------------------------------------------------
# l-lp-inner
-------------------------------------------------------*/
.l-lp-inner {
  width: 100%;
  max-width: 1220px !important;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  color: #333838;
}
@media only screen and (max-width: 768px) {
  .l-lp-inner {
    padding: 0 24px;
  }
}

/*------------------------------------------------------
# l-header
-------------------------------------------------------*/
.l-header {
  position: relative;
  z-index: 9;
}
@media only screen and (max-width: 950px) {
  .l-header {
    padding-top: 68px;
  }
}

.l-header__top {
  width: 100%;
  height: 48px;
  background: #04a2ad;
  display: flex;
  justify-content: flex-end;
}
@media only screen and (max-width: 950px) {
  .l-header__top {
    display: none;
  }
}

.l-header__links {
  height: 100%;
  display: flex;
}

.l-header__link a {
  display: flex;
  align-items: center;
  border-radius: 24px 0 0 24px;
  transition: all 0.4s;
}
.l-header__link a:hover {
  opacity: 0.8;
}

.l-header__link--top a {
  width: 266px;
  height: 100%;
  padding-left: 31px;
  background-color: #0097a1;
  box-shadow: inset 0 0 10px #009198;
  font-size: 14px;
  font-weight: bold;
  color: #dfedee;
}
.l-header__link--top a img {
  margin-right: 9px;
}

.l-header__link--contact a {
  width: 168px;
  height: 100%;
  padding-left: 30px;
  box-shadow: 4.7px 8.8px 40px 0 rgba(186, 186, 186, 0.3), inset 0 0 10px #d6e4e4;
  background-color: #dfedee;
  font-size: 14px;
  font-weight: bold;
  color: #0097a1;
  position: relative;
  margin-left: -25px;
}
.l-header__link--contact a i {
  margin-right: 8px;
}

.l-header__body {
  width: 100%;
  height: 105px;
  background: #fff;
}
@media only screen and (max-width: 950px) {
  .l-header__body {
    height: 68px;
    position: fixed;
    top: 0;
    left: 0;
  }
}

.l-header__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1140px;
  height: 100%;
  margin: 0 auto;
  padding: 0 10px;
}
@media only screen and (max-width: 950px) {
  .l-header__inner {
    position: relative;
  }
}

@media only screen and (max-width: 950px) {
  .l-header__logo {
    position: relative;
    z-index: 10;
  }
}
.l-header__logo a {
  display: block;
}
.l-header__logo img {
  width: 50px;
  height: 65px;
}
@media only screen and (max-width: 950px) {
  .l-header__logo img {
    width: 35px;
    height: 46px;
  }
}

/*------------------------------------------------------
# l-header-nav
-------------------------------------------------------*/
.l-header-nav {
  width: 763px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  transform: translateX(-25px);
  position: relative;
}
@media only screen and (max-width: 950px) {
  .l-header-nav {
    display: none;
  }
}

.l-header-nav__child {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  border-radius: 0 0 6px 6px;
  position: absolute;
  left: 0;
  top: 105px;
  visibility: hidden;
  opacity: 0;
}
.l-header-nav__child::before {
  content: "";
  display: block;
  width: 100%;
  width: 100vw;
  height: calc(100% + 30px);
  background-image: linear-gradient(to left, #f8f8f8, #89cacf);
  position: absolute;
  z-index: -1;
  top: 0;
  margin: 0 calc(50% - 50vw);
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}

.l-header-nav__item > a, .l-header-nav__item > span {
  display: flex;
  align-items: center;
  height: 105px;
  font-size: 16px;
  color: #000;
  cursor: pointer;
  transition: all 0.4s;
}
.l-header-nav__item i {
  margin-left: 5px;
}
.l-header-nav__item:hover > a, .l-header-nav__item:hover > span {
  color: #0097a1;
}
.l-header-nav__item:hover .l-header-nav__child {
  visibility: visible;
  opacity: 1;
}
.l-header-nav__item:hover .l-header-nav__child::before {
  visibility: visible;
  opacity: 1;
}

.l-header-nav__child-title {
  width: 230px;
  height: 100%;
  padding-left: 30px;
  line-height: 1;
  font-size: 20px;
}
.l-header-nav__child-title span {
  display: block;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  color: #0097a1;
  font-weight: bold;
  margin-bottom: 5px;
}

.l-header-nav__child-body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 3.75%;
  width: calc(100% - 230px);
  padding: 35px 30px 45px;
  position: relative;
}
.l-header-nav__child-body::after {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 20px);
  background: #e8eaea;
  position: absolute;
  left: 0;
  top: 10px;
}

.l-header-nav__child-item {
  width: 29.58%;
}
.l-header-nav__child-item.is-knowhow {
  width: 46.25%;
}
.l-header-nav__child-item a {
  display: block;
  width: 100%;
  font-size: 16px;
  color: #0097a1;
  font-weight: bold;
  border-bottom: solid 1px #0097a1;
  padding-bottom: 10px;
  white-space: nowrap;
}
.l-header-nav__child-item a::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-right.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 12px;
  transition: all 0.4s;
}
.l-header-nav__child-item a:hover::before {
  transform: translateX(5px);
}
.l-header-nav__child-item a.is-short {
  letter-spacing: 0;
}

/*------------------------------------------------------
# l-header-nav-sp
-------------------------------------------------------*/
.l-header-nav-sp {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
@media only screen and (max-width: 950px) {
  .l-header-nav-sp {
    display: block;
  }
}

.l-header-nav-sp__open-button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 68px;
  height: 68px;
  background-image: linear-gradient(to top, #008d97, #00a2ad);
  padding: 22px 16px 18px 16px;
  position: absolute;
  top: 0;
  right: 0;
}
.l-header-nav-sp__open-button span {
  display: inline-block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background-color: #dfedee;
}

.l-header-nav-sp__body {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-image: linear-gradient(to left, rgba(248, 248, 248, 0.9), rgba(137, 202, 207, 0.9));
}

.l-header-nav-sp__inner {
  width: calc(100% - 75px);
  height: calc(100% - 30px);
  margin-left: 75px;
  background: #f8f8f8;
  border-radius: 6px;
}

.l-header-nav-sp__close-button {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.l-header-nav-sp__close-button span {
  display: inline-block;
  width: 25px;
  height: 3px;
  border-radius: 3px;
  background-image: linear-gradient(to left, #008d97, #00a2ad);
  position: absolute;
}
.l-header-nav-sp__close-button span:nth-child(1) {
  transform: rotate(45deg);
}
.l-header-nav-sp__close-button span:nth-child(2) {
  transform: rotate(-45deg);
}

.l-header-nav-sp__body {
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.l-header-nav-sp__body.is-active {
  opacity: 1;
  pointer-events: auto;
}

body.is-no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.l-header-nav-sp__list-wrap {
  height: calc(100% - 50px);
  overflow-y: scroll;
  padding: 0 20px 40px 40px;
}

.l-header-nav-sp__list {
  margin-bottom: 40px;
}
.l-header-nav-sp__list > li {
  border-bottom: solid 1px #e8eaea;
}
.l-header-nav-sp__list a, .l-header-nav-sp__list span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.75;
  padding: 13px 0;
}
.l-header-nav-sp__list a i {
  width: 20px;
  height: 21px;
}
.l-header-nav-sp__list .l-header-nav-sp__title::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-plus.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.l-header-nav-sp__list .l-header-nav-sp__title.is-active::after {
  height: 3px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-minus.svg) no-repeat;
  background-size: contain;
}

.l-header-nav-sp__child-list {
  background: #fff;
  padding: 0 15px;
}
.l-header-nav-sp__child-list a {
  justify-content: flex-start;
  font-size: 14px;
  padding: 5px 0;
}
.l-header-nav-sp__child-list a i {
  width: 15px;
  height: 16px;
  margin-right: 9px;
}
.l-header-nav-sp__child-list li {
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

.l-header-nav-sp__child-list.is-active li {
  max-height: 500px;
}
.l-header-nav-sp__child-list.is-active li:first-child {
  padding-top: 3px;
}
.l-header-nav-sp__child-list.is-active li:last-child {
  padding-bottom: 3px;
  margin-bottom: 20px;
}

.l-header-nav-sp__button i {
  width: 20px;
  height: 20px;
}
.l-header-nav-sp__button + .l-header-nav-sp__button {
  margin-top: 14px;
}

/*------------------------------------------------------
# l-simple-footer
-------------------------------------------------------*/
.l-simple-footer {
  border-top: 1px solid #e0e0e0;
  letter-spacing: 0;
  padding: 64px 96px;
}

.l-simple-footer__logo {
  margin: 0 auto 50px;
  max-width: 1160px;
}

.l-simple-footer__logo-link {
  backface-visibility: hidden;
  display: block;
  height: 42px;
  transition: all 0.2s ease-in-out;
  width: 140px;
}

.l-simple-footer__logo-link:hover {
  opacity: 0.7;
}

.l-simple-footer-inner {
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  justify-content: space-between;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 1160px;
  padding: 0;
}

.l-simple-footer__list {
  display: flex;
}

.l-simple-footer__item {
  list-style: none;
  margin-right: 32px;
}

.l-simple-footer__anchor {
  color: rgba(0, 0, 0, 0.6);
  position: relative;
}

.l-simple-footer__anchor[target=_blank] {
  padding-right: 1.3em;
}

.l-simple-footer__anchor[target=_blank]:after {
  background: url(https://bucket.safie.link/safie-global-menu/images/icon-external.svg) 100% 0/contain no-repeat;
  content: "";
  display: block;
  height: 1em;
  position: absolute;
  right: 0;
  top: 0.1em;
  width: 1em;
}

.l-footer-bottom__anchor:hover {
  color: #00a2ad;
}

@media screen and (max-width: 1000px) {
  .l-simple-footer {
    max-width: 100%;
    padding: 48px 64px;
  }
  .l-simple-footer__logo-link:hover {
    opacity: 1;
  }
  .l-simple-footer-inner {
    display: block;
    max-width: 100%;
    padding: 0;
  }
  .l-simple-footer__list {
    display: block;
  }
  .l-simple-footer__item {
    margin-bottom: 20px;
    margin-right: 0;
  }
  .l-simple-footer__item:last-child {
    margin-bottom: 0;
  }
  .l-simple-footer__anchor[target=_blank]:after {
    top: 0.1em;
  }
  .l-simple-footer__credit {
    margin: 32px 0 0;
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .l-simple-footer__logo {
    margin-bottom: 32px;
  }
  .l-simple-footer {
    padding: 24px;
  }
}
/*------------------------------------------------------
# c-icon
-------------------------------------------------------*/
.c-icon-arrow {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-right.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
@media only screen and (max-width: 768px) {
  .c-icon-arrow {
    width: 15px;
    height: 15px;
  }
}
@media only screen and (max-width: 768px) {
  .c-icon-arrow.is-no-respo {
    width: 20px;
    height: 20px;
  }
}

.c-icon-arrow--wb {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/icon-arrow-white-bottom.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
@media only screen and (max-width: 768px) {
  .c-icon-arrow--wb {
    width: 15px;
    height: 15px;
  }
}

.c-icon-arrow-white-right {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-white.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
@media only screen and (max-width: 768px) {
  .c-icon-arrow-white-right {
    width: 15px;
    height: 15px;
  }
}
@media only screen and (max-width: 768px) {
  .c-icon-arrow-white-right.is-no-respo {
    width: 20px;
    height: 20px;
  }
}

.c-icon-arrow-white-large {
  width: 30px;
  height: 30px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-white.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
@media only screen and (max-width: 768px) {
  .c-icon-arrow-white-large {
    width: 20px;
    height: 20px;
  }
}

.c-icon-arrow-white-right-02 {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-white02.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.c-icon-arrow-right-md {
  width: 30px;
  height: 30px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-right.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
@media only screen and (max-width: 768px) {
  .c-icon-arrow-right-md {
    width: 20px;
    height: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .c-icon-arrow-right-md.is-no-respo {
    width: 30px;
    height: 30px;
  }
}

.c-icon-chevron {
  width: 9px;
  height: 12px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-chevron.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.c-icon-chevron.is-left {
  transform: rotate(180deg);
}

.c-icon-arrow-right {
  content: "";
  width: 40px;
  height: 40px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-right.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
@media only screen and (max-width: 768px) {
  .c-icon-arrow-right {
    width: 30px;
    height: 30px;
  }
}

.c-icon-arrow-left {
  content: "";
  width: 40px;
  height: 40px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-left.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
@media only screen and (max-width: 768px) {
  .c-icon-arrow-left {
    width: 30px;
    height: 30px;
  }
}

.c-icon-arrow-bottom {
  width: 30px;
  height: 30px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-bottom.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.c-icon-arrow-bottom-large {
  width: 40px;
  height: 40px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-bottom.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
@media only screen and (max-width: 768px) {
  .c-icon-arrow-bottom-large {
    width: 30px;
    height: 30px;
  }
}

.icon-arrow-thin {
  width: 8px;
  height: 10px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-thin.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.icon-arrow-thin-bottom {
  width: 8px;
  height: 12px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-thin.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
  transform: rotate(90deg);
}

/*------------------------------------------------------
# c-button
-------------------------------------------------------*/
.c-button {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.75;
  text-align: center;
  color: #0097a1;
  background: #fff;
  border-radius: 45px;
  border: solid 1px #87c1c5;
  padding: 14px 0;
}
.c-button i {
  display: inline-block;
  transition: transform 0.4s;
  margin-right: 16px;
}
@media only screen and (max-width: 768px) {
  .c-button i {
    margin-right: 10px;
  }
}
.c-button:hover i {
  transform: translateX(5px);
}
.c-button.is-grad {
  background: linear-gradient(45deg, #00a2ad, #008d97);
  color: #fff;
  position: relative;
  z-index: 0;
}
.c-button.is-grad::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #0097a1, #007d85);
  border-radius: 30px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
  transition: all 0.4s;
}
.c-button.is-grad:hover::after {
  opacity: 1;
}
.c-button.is-grad:hover::before {
  transform: translateX(5px);
}
.c-button.is-transparent {
  background: transparent;
}

.c-case-button {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.75;
  text-align: center;
  background: linear-gradient(45deg, #00a2ad, #008d97);
  border-radius: 40px;
  color: #fff;
  padding: 12px 0;
  transition: all 0.4s;
  position: relative;
  z-index: 0;
}
.c-case-button::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #0097a1, #007d85);
  border-radius: 40px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
}
.c-case-button i {
  margin-right: 10px;
  transition: transform 0.4s;
}
.c-case-button:hover {
  color: #fff;
}
.c-case-button:hover::after {
  opacity: 1;
}
.c-case-button:hover i {
  transform: translateX(5px);
}

/*------------------------------------------------------
# c-lp-button
-------------------------------------------------------*/
.c-lp-button {
  display: block;
  width: 100%;
  height: auto;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  background: linear-gradient(45deg, #00a2ad, #008d97);
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  border-radius: 40px;
  color: #fff;
  letter-spacing: 0.05em;
  padding: 25px 0;
  transition: all 0.4s;
  position: relative;
  z-index: 0;
}
.c-lp-button::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: linear-gradient(45deg, #008d97, #00a2ad);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
  transition: all 0.4s;
}
.c-lp-button:hover {
  box-shadow: none;
}
.c-lp-button:hover::after {
  opacity: 1;
}
.c-lp-button.is-red {
  background: linear-gradient(99deg, #f31e6e 2%, #f15f17 95%);
}
.c-lp-button.is-red::after {
  background: linear-gradient(99deg, #e31b68 2%, #e05915 95%);
}
.c-lp-button.is-blue {
  background: linear-gradient(99deg, #008c95 0%, #1d80a8 58%, #40317a 100%);
}
.c-lp-button.is-blue::after {
  background: linear-gradient(99deg, #007d86 0%, #1b799e 58%, #372a6b 100%);
}
.c-lp-button.is-white {
  border: solid 2px #008c95;
  background: #fff;
  color: #008c95;
  position: relative;
}
.c-lp-button.is-white::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border: solid 2px #008c95;
  border-left: none;
  border-bottom: none;
  position: absolute;
  right: 25px;
  top: 50%;
  transform: rotate(-315deg) translateY(-50%);
  transition: all 0.3s;
}
@media only screen and (max-width: 768px) {
  .c-lp-button.is-white::before {
    width: 8px;
    height: 8px;
  }
}
.c-lp-button.is-white::after {
  content: none;
}
.c-lp-button.is-white:hover::before {
  right: 20px;
}
.c-lp-button.is-indent-s {
  text-indent: 50px;
}
@media only screen and (max-width: 768px) {
  .c-lp-button.is-indent-s {
    text-indent: 0;
  }
}
.c-lp-button.is-indent-l {
  text-indent: 80px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .c-lp-button.is-indent-l {
    text-indent: 0;
  }
}
@media only screen and (max-width: 768px) {
  .c-lp-button.is-indent-l {
    text-indent: 0;
  }
}
@media only screen and (max-width: 768px) {
  .c-lp-button {
    font-size: 16px;
    padding: 20px 0;
  }
}

.c-lp-button__icon-document {
  display: inline-block;
  width: 123px;
  height: 80.5px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/icon-document-new.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .c-lp-button__icon-document {
    left: -3px;
  }
}
@media only screen and (max-width: 768px) {
  .c-lp-button__icon-document {
    width: 85px;
    height: 56px;
    left: -10px;
  }
}

.c-lp-button__icon-mail {
  width: 56px;
  height: 56px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/icon-mail.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 768px) {
  .c-lp-button__icon-mail {
    width: 44px;
    height: 44px;
  }
}

.wp-block-button.is-style-c-lp-button:hover {
  opacity: 1 !important;
}
.wp-block-button.is-style-c-lp-button a, .wp-block-button.is-style-c-lp-button .wp-block-button__link {
  display: block;
  width: 100%;
  height: auto;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  background: linear-gradient(45deg, #00a2ad, #008d97);
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  border-radius: 40px;
  color: #fff;
  letter-spacing: 0.05em;
  padding: 25px 0;
  transition: all 0.4s;
  position: relative;
  z-index: 0;
}
.wp-block-button.is-style-c-lp-button a::after, .wp-block-button.is-style-c-lp-button .wp-block-button__link::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: linear-gradient(45deg, #008d97, #00a2ad);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
  transition: all 0.4s;
}
.wp-block-button.is-style-c-lp-button a:hover, .wp-block-button.is-style-c-lp-button .wp-block-button__link:hover {
  box-shadow: none;
}
.wp-block-button.is-style-c-lp-button a:hover::after, .wp-block-button.is-style-c-lp-button .wp-block-button__link:hover::after {
  opacity: 1;
}
.wp-block-button.is-style-c-lp-button.is-white a, .wp-block-button.is-style-c-lp-button.is-white .wp-block-button__link {
  border: solid 2px #008c95;
  background: #fff;
  color: #008c95;
  position: relative;
}
.wp-block-button.is-style-c-lp-button.is-white a::before, .wp-block-button.is-style-c-lp-button.is-white .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border: solid 2px #008c95;
  border-left: none;
  border-bottom: none;
  position: absolute;
  right: 25px;
  top: 50%;
  transform: rotate(-315deg) translateY(-50%);
  transition: all 0.3s;
}
@media only screen and (max-width: 768px) {
  .wp-block-button.is-style-c-lp-button.is-white a::before, .wp-block-button.is-style-c-lp-button.is-white .wp-block-button__link::before {
    width: 8px;
    height: 8px;
  }
}
.wp-block-button.is-style-c-lp-button.is-white a::after, .wp-block-button.is-style-c-lp-button.is-white .wp-block-button__link::after {
  content: none;
}
.wp-block-button.is-style-c-lp-button.is-white a:hover::before, .wp-block-button.is-style-c-lp-button.is-white .wp-block-button__link:hover::before {
  right: 20px;
}

/*------------------------------------------------------
# c-lp-simple-button
-------------------------------------------------------*/
.c-lp-simple-button {
  display: block;
  width: 100%;
  height: auto;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  background: #fff;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  border-radius: 45px;
  color: #008c95;
  letter-spacing: 0.05em;
  padding: 32px 0;
  transition: all 0.4s;
  position: relative;
  z-index: 0;
}
.c-lp-simple-button:hover {
  box-shadow: none;
  background: #e6f8f9;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .c-lp-simple-button {
    font-size: 18px;
    padding: 24px 0;
  }
}
@media only screen and (max-width: 768px) {
  .c-lp-simple-button {
    font-size: 16px;
    padding: 20px 0;
  }
}
.c-lp-simple-button span {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 76px;
  height: 76px;
  background: #008c95;
  border-radius: 50%;
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .c-lp-simple-button span {
    width: 54px;
    height: 54px;
  }
}
@media only screen and (max-width: 768px) {
  .c-lp-simple-button span {
    width: 44px;
    height: 44px;
  }
}
.c-lp-simple-button .c-lp-simple-button__icon-contact::before {
  content: "";
  display: inline-block;
  width: 38px;
  height: 38px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/icon-headset-s.svg) no-repeat;
  background-size: 100%;
}
@media only screen and (max-width: 768px) {
  .c-lp-simple-button .c-lp-simple-button__icon-contact::before {
    transform: scale(0.7);
  }
}
.c-lp-simple-button .c-lp-simple-button__icon-document::before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 35px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/icon-document.svg) no-repeat;
  background-size: 100%;
}
@media only screen and (max-width: 768px) {
  .c-lp-simple-button .c-lp-simple-button__icon-document::before {
    transform: scale(0.7);
  }
}

/*------------------------------------------------------
# c-pager
-------------------------------------------------------*/
.c-pager .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-pager .page-numbers li {
  position: relative;
  z-index: 1;
}
.c-pager .page-numbers li a:not(.prev):not(.next),
.c-pager .page-numbers li .page-numbers.current {
  display: block;
  width: 19px;
  margin: 0 12.5px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .c-pager .page-numbers li a:not(.prev):not(.next),
  .c-pager .page-numbers li .page-numbers.current {
    width: 16px;
    font-size: 14px;
  }
}
.c-pager .page-numbers li a:not(.prev):not(.next):hover::before {
  display: block;
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #e8eaea;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.c-pager .page-numbers li .page-numbers.current {
  position: relative;
  z-index: 2;
  color: #fff;
}
.c-pager .page-numbers li .page-numbers.current::before {
  display: block;
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #0097a1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.c-pager .page-numbers li .prev {
  margin-left: -1em;
  margin-right: 5px;
}
.c-pager .page-numbers li .next {
  margin-left: 5px;
  margin-right: -1em;
}

/*------------------------------------------------------
# c-top-button
-------------------------------------------------------*/
.c-top-button {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 16px 0;
  border-radius: 32px;
  box-shadow: 7.3px 6.8px 19px 1px rgba(0, 151, 161, 0.2);
  background-image: linear-gradient(45deg, #008d97, #00a2ad);
  position: relative;
  letter-spacing: 0;
  z-index: 0;
}
.c-top-button::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, #027981, #0099a3);
  border-radius: 32px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
  transition: all 0.4s;
}
.c-top-button:hover {
  box-shadow: none;
}
.c-top-button:hover::after {
  opacity: 1;
  box-shadow: none;
}
.c-top-button.is-white {
  background: #fff;
  color: #0097a1;
  border: solid 1px #008d97;
  box-shadow: 7.3px 6.8px 19px 1px rgba(0, 151, 161, 0.2);
}
@media only screen and (max-width: 768px) {
  .c-top-button.is-white {
    box-shadow: 3.7px 3.4px 9.5px 0.5px rgba(141, 228, 225, 0.4);
  }
}
.c-top-button.is-white:hover {
  background-image: linear-gradient(to left, #008d97, #00a2ad);
  color: #fff;
  box-shadow: none;
}

/*------------------------------------------------------
# c-top-contact-button
-------------------------------------------------------*/
.c-top-contact-button {
  display: block;
  width: 100%;
  height: auto;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 16px 0;
  border-radius: 16px;
  box-shadow: 7.3px 6.8px 19px 1px rgba(141, 228, 225, 0.4);
  background-image: linear-gradient(to right, #f31e6e, #f15f17);
  box-shadow: 7.3px 6.8px 19px 1px rgba(200, 2, 76, 0.4);
  position: relative;
  z-index: 0;
}
.c-top-contact-button::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #d80c59, #eb3106);
  border-radius: 16px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
  transition: all 0.4s;
  box-shadow: none;
}
.c-top-contact-button:hover {
  box-shadow: none;
}
.c-top-contact-button:hover::after {
  opacity: 1;
}

/*------------------------------------------------------
# c-breadcrumb
-------------------------------------------------------*/
.c-breadcrumb {
  height: 60px;
  padding-top: 19px;
  background: linear-gradient(180deg, rgb(241, 250, 251) 0%, rgb(241, 250, 251) 72%, rgba(255, 255, 255, 0) 100%);
  position: relative;
  z-index: 2;
}

.c-breadcrumb div > span {
  display: flex;
}
@media only screen and (max-width: 768px) {
  .c-breadcrumb div > span {
    overflow-x: scroll;
  }
}
.c-breadcrumb div > span a, .c-breadcrumb div > span span {
  font-size: 12px;
  white-space: nowrap;
}
.c-breadcrumb div > span a {
  color: #0097a1;
  font-weight: bold;
  text-decoration: #87c1c5 underline;
  text-underline-offset: 5px;
}
.c-breadcrumb div > span span {
  color: #87c1c5;
}

.c-breadcrumb__pause {
  margin-left: 25px;
  position: relative;
}
.c-breadcrumb__pause::before {
  content: "";
  display: block;
  width: 8px;
  height: 10px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-thin.svg) no-repeat;
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
}

/*------------------------------------------------------
# c-page-header
-------------------------------------------------------*/
.c-page-header {
  margin-top: -15px;
  padding-top: 27px;
  padding-bottom: 40px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/blog/bg-header.png) no-repeat right bottom;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .c-page-header {
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/blog/bg-header-sp.png);
    background-size: 100%;
    padding-top: 27px;
    padding-bottom: 20px;
  }
}

.c-page-header__inner {
  width: 100%;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .c-page-header__inner {
    align-items: flex-start;
  }
}

.c-page-header__title {
  font-size: 40px;
  margin-right: 57px;
}
@media only screen and (max-width: 768px) {
  .c-page-header__title {
    width: 3em;
    font-size: 28px;
    margin-right: 28px;
    white-space: nowrap;
  }
}

.c-page-header__read {
  font-size: 18px;
  padding: 20px 0;
}
@media only screen and (max-width: 768px) {
  .c-page-header__read {
    width: calc(100% - 3em - 28px);
    font-size: 14px;
    padding: 0 0 10px;
  }
}

@media only screen and (max-width: 768px) {
  .c-page-header__nav-wrap {
    margin: 0 -20px;
  }
}

.c-page-header__nav {
  width: 100%;
  display: flex;
}
@media only screen and (max-width: 768px) {
  .c-page-header__nav {
    overflow: scroll;
    padding: 13px 20px;
  }
}
.c-page-header__nav a {
  display: block;
  padding: 6px 20px;
  border-radius: 30px;
  background: #fff;
  border: solid 1px #e8eaea;
  transition: all 0.4s;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .c-page-header__nav a {
    padding: 4px 20px;
    font-size: 12px;
    box-shadow: 1px 2px 10px 0 rgba(186, 186, 186, 0.5);
  }
}
.c-page-header__nav a + a {
  margin-left: 9px;
}
@media only screen and (max-width: 768px) {
  .c-page-header__nav a + a {
    margin-left: 7px;
  }
}
.c-page-header__nav a:hover, .c-page-header__nav a.is-active {
  background: #0097a1;
  border: solid 1px #0097a1;
  color: #fff;
}

/*------------------------------------------------------
# c-post-cv
-------------------------------------------------------*/
.c-post-cv {
  width: 100%;
  background: #0097a1;
}

.c-post-cv__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media only screen and (max-width: 768px) {
  .c-post-cv__inner {
    background: #0097a1;
    padding: 20px;
  }
}

.c-post-cv-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 82px 6.25% 80px;
  background: #0097a1;
}
@media only screen and (max-width: 768px) {
  .c-post-cv-item {
    width: 100%;
    max-width: 360px;
    padding: 30px 0;
  }
}
.c-post-cv-item + .c-post-cv-item {
  border-left: solid 1px #f8f8f8;
}
@media only screen and (max-width: 768px) {
  .c-post-cv-item + .c-post-cv-item {
    border-left: none;
    border-top: solid 1px #f8f8f8;
  }
}

.c-post-cv-item__title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  position: relative;
  padding-left: 76px;
  line-height: 1.5;
  margin-bottom: 30px;
  white-space: nowrap;
}
@media only screen and (max-width: 1279px) {
  .c-post-cv-item__title {
    white-space: normal;
  }
}
@media only screen and (max-width: 768px) {
  .c-post-cv-item__title {
    font-size: 19px;
    padding-left: 50px;
    letter-spacing: 0;
    margin-bottom: 15px;
  }
}
.c-post-cv-item__title::before {
  content: "";
  display: inline-block;
  width: 56px;
  height: 56px;
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 768px) {
  .c-post-cv-item__title::before {
    width: 40px;
    height: 40px;
  }
}

.c-post-cv-item__title--document::before {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/blog/icon-cv-document.png) no-repeat center center/contain;
}

.c-post-cv-item__title--mail::before {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/blog/icon-cv-mail.png) no-repeat center center/contain;
}

.c-post-cv-item__button {
  max-width: 480px;
  padding: 24px 0;
  font-size: 20px;
}
@media only screen and (max-width: 768px) {
  .c-post-cv-item__button {
    padding: 16px 0;
    font-size: 16px;
  }
}

.c-post-cv.is-single {
  background: none;
  padding: 60px 0 120px;
}
@media only screen and (max-width: 768px) {
  .c-post-cv.is-single {
    padding-bottom: 0;
  }
}
.c-post-cv.is-single .c-post-cv-item {
  padding: 82px 6.25% 80px;
}

/*------------------------------------------------------
# c-lp-cv
-------------------------------------------------------*/
.c-lp-cv {
  position: relative;
  padding: min(10.94vw, 168px) 0;
  background-image: linear-gradient(147deg, #f4fffc 14%, #c9ffe5 48%, #82eade 65%, #00bac1 81%, #0093b8 96%);
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .c-lp-cv {
    padding: 64px 0;
    background-image: linear-gradient(125deg, #f4fffc -9%, #c9ffe5 46%, #82eade 73%, #00bac1 99%, #0093b8 122%);
  }
}
.c-lp-cv.is-bottom-layer {
  padding-bottom: 18.55vw;
  margin-bottom: -6.61vw;
  z-index: 0;
}
@media only screen and (max-width: 768px) {
  .c-lp-cv.is-bottom-layer {
    padding-bottom: 22.46vw;
    margin-bottom: -7vw;
  }
}
.c-lp-cv.is-simple {
  background-image: linear-gradient(150deg, #00bac1 45%, #0093b8 91%);
}
.c-lp-cv.is-simple .c-lp-cv__content {
  color: #fff;
}

.c-lp-cv__content {
  width: min(750px, 51.65vw);
}
.c-lp-cv__content.wp-block-group {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media only screen and (max-width: 768px) {
  .c-lp-cv__content {
    width: 100%;
  }
}

.c-lp-cv__title {
  text-align: center;
  font-size: 56px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .c-lp-cv__title {
    font-size: 3.86vw;
  }
}
@media only screen and (max-width: 768px) {
  .c-lp-cv__title {
    margin: 0 -24px;
    font-size: min(6.76vw, 28px);
  }
}

.c-lp-cv__text {
  text-align: center;
  font-size: 29px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 1.45px;
  margin-top: 40px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .c-lp-cv__text {
    font-size: 24px;
  }
}
@media only screen and (max-width: 768px) {
  .c-lp-cv__text {
    font-size: 21px;
    text-align: center;
    margin-top: 24px;
  }
}
.c-lp-cv__text.is-small {
  font-size: 21px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .c-lp-cv__text.is-small {
    font-size: 18px;
    margin-top: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .c-lp-cv__text.is-small {
    font-size: 16px;
    margin-top: 15px;
    text-align: left;
  }
}

.c-lp-cv__buttons {
  display: flex;
  margin-top: 40px;
  gap: 0 16px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .c-lp-cv__buttons {
    flex-direction: column;
    gap: 15px 0;
  }
}
@media only screen and (max-width: 768px) {
  .c-lp-cv__buttons {
    flex-direction: column;
    align-items: center;
    gap: 8px 0;
    margin-top: 24px;
  }
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .c-lp-cv__buttons .c-lp-button {
    font-size: 18px;
  }
}
@media only screen and (max-width: 768px) {
  .c-lp-cv__buttons .c-lp-button {
    max-width: 318px;
  }
}

.c-lp-cv__thumb {
  width: 785px;
  position: absolute;
  left: min(750px, 51.65vw);
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .c-lp-cv__thumb {
    display: flex;
    justify-content: center;
    width: calc(100% + 24px);
    position: static;
    transform: translateY(0);
    margin-top: 23px;
    margin-right: -24px;
  }
  .c-lp-cv__thumb img {
    max-width: 385.4px;
    width: 100%;
  }
}

.c-lp-cv.is-no-thumb .c-lp-cv__content {
  width: 100%;
}
.c-lp-cv.is-no-thumb .c-lp-cv__buttons {
  max-width: 896px;
  margin-left: auto;
  margin-right: auto;
}

.c-lp-cv__simple-buttons {
  display: flex;
  max-width: 992px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  gap: 0 40px;
}
@media only screen and (max-width: 768px) {
  .c-lp-cv__simple-buttons {
    flex-direction: column;
    max-width: 318px;
    gap: 10px 0;
    margin-top: 24px;
  }
}

/*------------------------------------------------------
# c-section-header
-------------------------------------------------------*/
.c-section-header {
  letter-spacing: 0;
}
.c-section-header__title {
  font-size: 28px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.c-section-header__title span:not(.space-adjustment01):not(.space-adjustment02) {
  color: #1397b1;
}
.c-section-header__title span:not(.space-adjustment01):not(.space-adjustment02).is-grad {
  background-image: linear-gradient(to right, #f31e6e, #f15f17);
  color: #1397b1;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-section-header__title.is-center {
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .c-section-header__title {
    font-size: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .c-section-header__title .space-adjustment01 {
    letter-spacing: -9px;
  }
}
@media only screen and (max-width: 768px) {
  .c-section-header__title .space-adjustment02 {
    letter-spacing: -18px;
  }
}

.c-section-header__read span {
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .c-section-header__read {
    font-size: 14px;
  }
}

/*------------------------------------------------------
# c-lp-header
-------------------------------------------------------*/
@media only screen and (max-width: 768px) {
  .c-lp-header {
    position: relative;
    z-index: 2;
  }
}

.c-lp-header.is-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media only screen and (max-width: 768px) {
  .c-lp-header.is-sp-center {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.c-lp-header.is-white {
  color: #fff;
}

.c-lp-header__title {
  font-size: 96px;
  font-weight: bold;
  line-height: 1.2;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .c-lp-header__title {
    font-size: min(6.25vw, 96px);
  }
}
@media only screen and (max-width: 768px) {
  .c-lp-header__title {
    font-size: min(9vw, 40px);
  }
}
.c-lp-header__title .is-gradation {
  background-image: linear-gradient(99deg, #6EC5A7 0%, #37BCB0 50%, #0486A4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-lp-header__title .is-small {
  font-size: min(3.12vw, 48px);
}
@media only screen and (max-width: 768px) {
  .c-lp-header__title .is-small {
    font-size: min(5vw, 21px);
  }
}
.c-lp-header__title .is-medium {
  font-size: min(3.64vw, 56px);
}
@media only screen and (max-width: 768px) {
  .c-lp-header__title .is-medium {
    font-size: min(7vw, 29px);
  }
}
.c-lp-header__title .is-medium-large {
  font-size: min(5.21vw, 80px);
}
@media only screen and (max-width: 768px) {
  .c-lp-header__title .is-medium-large {
    font-size: min(9.6vw, 40px);
  }
}
.c-lp-header__title .is-adjustment {
  margin-left: -0.5em;
}
.c-lp-header__title.is-medium {
  font-size: min(3.64vw, 56px);
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .c-lp-header__title.is-medium {
    font-size: min(7vw, 28px);
  }
}
.c-lp-header__title.is-medium-large {
  font-size: min(4.56vw, 70px);
  line-height: 1.2;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .c-lp-header__title.is-medium-large {
    font-size: min(7vw, 28px);
  }
}

.c-lp-header__text {
  font-size: 36px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 1.8px;
  margin-bottom: 24px;
}
@media only screen and (max-width: 768px) {
  .c-lp-header__text {
    font-size: 18px;
    margin-bottom: 16px;
  }
}
.c-lp-header__text .is-gradation {
  background-image: linear-gradient(99deg, #6EC5A7 0%, #37BCB0 50%, #0486A4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-lp-header__text.is-pc-center {
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .c-lp-header__text.is-pc-center {
    text-align: left;
  }
}

main.house-construction .c-lp-header.is-center {
  text-align: center;
  font-feature-settings: "palt";
}

/*------------------------------------------------------
# p-kv
-------------------------------------------------------*/
.p-kv {
  background-image: linear-gradient(38deg, #edf3f4, rgba(255, 255, 255, 0.43));
}

.p-kv__inner {
  width: 100%;
  max-width: 1280px;
  height: 612px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  outline: none;
  border: none;
}
@media only screen and (max-width: 768px) {
  .p-kv__inner {
    height: 165.06vw;
  }
}

.p-kv__bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
}
.p-kv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: none;
  border: none;
}
@media only screen and (max-width: 1279px) {
  .p-kv__bg img {
    object-position: right top;
  }
}
@media only screen and (max-width: 768px) {
  .p-kv__bg img {
    object-position: left top;
  }
}

.p-kv__logo {
  width: 72px;
}
@media only screen and (max-width: 768px) {
  .p-kv__logo {
    width: 40px;
  }
}

.p-kv__copy {
  width: 100%;
  max-width: 896px;
  margin: 0 auto;
  padding-top: 84px;
  position: relative;
  z-index: 3;
}
@media only screen and (max-width: 1279px) {
  .p-kv__copy {
    padding-left: 10px;
  }
}
@media only screen and (max-width: 768px) {
  .p-kv__copy {
    width: 57.06vw;
    padding-top: 23.46vw;
    margin: 0 auto 0 40px;
  }
}

.p-kv__title {
  margin-top: 25px;
  margin-left: -6px;
}
.p-kv__title span {
  display: block;
  height: 33px;
  width: auto;
  margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
  .p-kv__title span {
    height: 5.33vw;
    margin-bottom: 15px;
  }
}
.p-kv__title span img {
  height: 100%;
  width: auto;
}
.p-kv__title span:nth-child(3) {
  height: 67px;
  margin-top: 25px;
}
@media only screen and (max-width: 768px) {
  .p-kv__title span:nth-child(3) {
    height: 10.66vw;
    margin-bottom: 20px;
  }
}

.p-kv__read {
  font-size: 16px;
  font-weight: 500;
  margin-top: 45px;
  letter-spacing: -0.6px;
}
@media only screen and (max-width: 768px) {
  .p-kv__read {
    font-size: 14px;
    margin-top: 25px;
    letter-spacing: 0;
  }
}

.kv-animation {
  overflow: hidden;
}
.kv-animation img {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.6s;
  transform: translateY(100%);
}
.kv-animation.is-active img {
  transform: translateY(0%);
}

/*------------------------------------------------------
# p-timeline
-------------------------------------------------------*/
.p-timeline {
  width: 100%;
  margin: 0 auto;
  position: relative;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/bg-timeline.webp) no-repeat center center/cover;
}

.no-webp .p-timeline {
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/bg-timeline.png);
}

.p-timeline__inner {
  width: 100%;
  height: 240px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding-top: 88px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/img-timeline.webp) repeat-x left 88px;
}

.no-webp .p-timeline__inner {
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/img-timeline.png);
}

@media only screen and (max-width: 768px) {
  .p-timeline__inner {
    height: 180px;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/img-timeline.webp) no-repeat center 90px;
    background-size: 830px;
  }
  .no-webp .p-timeline__inner {
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/img-timeline.png);
  }
}
@keyframes scroll-bg {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -2161px;
  }
}
/*------------------------------------------------------
# p-solution
-------------------------------------------------------*/
.p-solution {
  width: 100%;
  background: #edf3f4;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-solution {
    padding-top: 75px;
    padding-bottom: 50px;
  }
}

.p-solution__inner {
  position: relative;
}

.p-solution__step-title {
  font-size: 18px;
  font-weight: bold;
  color: #1397b1;
  margin-top: 34px;
  margin-bottom: 24px;
  letter-spacing: 0.3px;
}
@media only screen and (max-width: 768px) {
  .p-solution__step-title {
    font-size: 14px;
    margin-bottom: 10px;
  }
}

.p-solution__step {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 896px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
@media only screen and (max-width: 950px) {
  .p-solution__step {
    display: block;
    max-width: 100%;
  }
}

.p-solution__nav-wrap {
  position: relative;
  margin-bottom: 40px;
}

.p-solution__nav {
  width: 118px;
  position: sticky;
  left: 0;
  top: 0;
  border-top: solid 1px #e6e6e6;
}
@media only screen and (max-width: 950px) {
  .p-solution__nav {
    width: 100%;
    position: static;
    border-top: none;
  }
}

.p-solution__nav-item {
  border-bottom: solid 1px #e6e6e6;
  padding: 12px 5px 7px 15px;
  position: relative;
  display: block;
  font-size: 15px;
  line-height: 1.5;
  font-weight: bold;
  color: #000;
}
@media only screen and (max-width: 950px) {
  .p-solution__nav-item {
    padding: 17px 20px 17px 30px;
    background: #fff;
    display: flex;
    align-items: center;
  }
}
@media only screen and (max-width: 950px) {
  .p-solution__nav-item::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #e6e6e6 transparent transparent transparent;
    position: absolute;
    left: 50%;
    left: 23px;
    bottom: -6px;
    z-index: 2;
  }
}
@media only screen and (max-width: 950px) {
  .p-solution__nav-item::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 3px 0 3px;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    left: 25px;
    bottom: -4px;
    z-index: 3;
  }
}
@media only screen and (max-width: 950px) {
  .p-solution__nav-item:last-child {
    border-bottom: none;
  }
}
.p-solution__nav-item:last-child::before, .p-solution__nav-item:last-child::after {
  content: none;
}

.p-solution__nav-title {
  letter-spacing: -0.3px;
  font-size: 15px;
}
@media only screen and (max-width: 950px) {
  .p-solution__nav-title {
    font-size: 10px;
    color: #000;
  }
}
.p-solution__nav-title img {
  display: inline-block;
}
@media only screen and (max-width: 950px) {
  .p-solution__nav-title img {
    width: 14px;
  }
}
.p-solution__nav-title::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background: #ababab;
  position: absolute;
  left: 0;
  top: 22px;
}
@media only screen and (max-width: 950px) {
  .p-solution__nav-title::before {
    background: #1397b1;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.p-solution__nav-txt {
  letter-spacing: -0.3px;
}
@media only screen and (max-width: 950px) {
  .p-solution__nav-txt br {
    display: none;
  }
}
@media only screen and (max-width: 950px) {
  .p-solution__nav-txt {
    color: #1397b1;
    font-size: 12px;
    margin-left: 10px;
    text-decoration: underline;
    text-underline-offset: 6px;
  }
}

.p-solution__nav-item.is-active {
  color: #333;
  border-bottom: solid 1px #1397b1;
  background: #fff;
}
.p-solution__nav-item.is-active::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 5px 0 5px;
  border-color: #1397b1 transparent transparent transparent;
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
}
.p-solution__nav-item.is-active::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 3px 0 3px;
  border-color: #e8eeef transparent transparent transparent;
  position: absolute;
  left: calc(50% + 2px);
  bottom: -4px;
  transform: translateX(calc(-50% - 2px));
}
.p-solution__nav-item.is-active .p-solution__nav-title::before {
  border-radius: 5px;
  background: #1397b1;
  z-index: 2;
}
.p-solution__nav-item.is-active .p-solution__nav-title::after {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  background: rgba(152, 220, 225, 0.7);
  border-radius: 7px;
  position: absolute;
  left: -4px;
  top: 18px;
  z-index: 1;
  box-shadow: 0 0 10px rgba(204, 204, 204, 0.7);
}
.p-solution__nav-item.is-active .p-solution__nav-txt {
  text-decoration: #0097a1 underline;
  text-underline-offset: 2px;
}

.p-solution__nav-item.is-visited {
  background: #fff;
}

.p-solution__float-area {
  margin-left: 10px;
}
@media only screen and (max-width: 950px) {
  .p-solution__float-area {
    margin-left: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-solution__float-area {
    width: calc(100% + 40px);
    margin-left: -20px;
  }
}

.p-solution__content-wrap {
  position: relative;
  padding: 10px 20px;
}
@media only screen and (max-width: 768px) {
  .p-solution__content-wrap {
    padding: 0;
    border-radius: 0 !important;
    padding-bottom: 133px;
  }
}

.p-solution__content {
  display: flex;
  position: sticky;
  left: 0;
  top: 0;
}
@media only screen and (max-width: 768px) {
  .p-solution__content {
    display: block;
    position: static;
    padding: 0 20px;
  }
}

.p-solution__title-wrap {
  position: relative;
}

.p-solution__content-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 146px;
  height: 120px;
  background: #fff;
  border-radius: 6px 0 0 6px;
  color: #58bec6;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}
@media only screen and (max-width: 768px) {
  .p-solution__content-title {
    width: 100%;
    height: auto;
    border-radius: 0 !important;
    text-align: left;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 30px 20px 0;
  }
}
.p-solution__content-title .label {
  line-height: 1;
  margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
  .p-solution__content-title .label {
    margin-bottom: 0;
    margin-right: 9px;
  }
}
.p-solution__content-title .label__txt {
  color: #222222;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0;
}
.p-solution__content-title .label__num {
  display: inline-block;
  margin-left: 4px;
}
.p-solution__content-title .txt {
  letter-spacing: 0;
  font-size: 16px;
}
@media only screen and (max-width: 768px) {
  .p-solution__content-title .txt {
    font-size: 12px;
  }
}
.p-solution__content-title::after {
  content: "";
  display: block;
  width: 1px;
  height: 100px;
  background: #e6e6e6;
  position: absolute;
  right: 0;
  top: 10px;
}
@media only screen and (max-width: 768px) {
  .p-solution__content-title::after {
    content: none;
  }
}

.p-solution__body-wrap {
  position: relative;
  width: 100%;
}

.p-solution__body {
  background: #fff;
  width: 100%;
  max-width: 582px;
  padding-top: 90px;
  padding-bottom: 100px;
}
@media only screen and (max-width: 950px) {
  .p-solution__body {
    max-width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .p-solution__body {
    padding: 0 20px;
  }
}
.p-solution__body.is-step-01 {
  padding-top: 45px;
  padding-bottom: 98px;
  border-radius: 0 6px 0 0;
}
@media only screen and (max-width: 768px) {
  .p-solution__body.is-step-01 {
    padding-bottom: 0;
  }
}
.p-solution__body.is-step-04 {
  border-radius: 0 0 6px 6px;
  padding-bottom: 110px;
}
@media only screen and (max-width: 950px) {
  .p-solution__body.is-step-04 {
    width: calc(100% - 146px);
  }
}
@media only screen and (max-width: 768px) {
  .p-solution__body.is-step-04 {
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .p-solution__body {
    border-radius: 0 !important;
    padding-top: 0 !important;
  }
}

.p-solution__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: #0fa6af;
  border-radius: 32px;
  box-shadow: 0 0 30px #92d7d8;
  position: absolute;
  left: calc(50% + 73px);
  bottom: -35px;
  transform: translateX(-50%);
  z-index: 99;
  animation: glow01 2s infinite ease;
}
@media only screen and (max-width: 768px) {
  .p-solution__next {
    width: 55px;
    height: 56px;
    left: 50%;
    bottom: 30px;
    animation: glowsp 2s infinite ease !important;
  }
}
.p-solution__next::before {
  content: "";
  display: block;
  width: 16px;
  height: 35px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-arrow-dot.svg) no-repeat left top/contain;
}
.p-solution__next span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -20px;
  letter-spacing: 0;
}
@media only screen and (max-width: 768px) {
  .p-solution__next span {
    color: #fff !important;
  }
}

.p-solution__content-wrap.is-step-01 {
  padding-top: 30px;
  background-image: linear-gradient(to top, #00a2ad, #98dce1);
  border-radius: 6px 6px 0 0;
}
.p-solution__content-wrap.is-step-02 {
  background-image: linear-gradient(to top, #59b4b1, #02a3ae);
}
.p-solution__content-wrap.is-step-02 .p-solution__content-title {
  color: #18a5ae;
}
.p-solution__content-wrap.is-step-02 .p-solution__next {
  background-color: #59b4b1;
  animation: glow02 2s infinite ease;
}
.p-solution__content-wrap.is-step-02 .p-solution__next span {
  color: #59b4b1;
}
.p-solution__content-wrap.is-step-03 {
  background-image: linear-gradient(to top, #20a0a9, #59b4b1);
}
.p-solution__content-wrap.is-step-03 .p-solution__content-title {
  color: #51b1b0;
}
.p-solution__content-wrap.is-step-03 .p-solution__next {
  background-color: #21a0a9;
  animation: glow03 2s infinite ease;
}
.p-solution__content-wrap.is-step-03 .p-solution__next span {
  color: #21a0a9;
}
.p-solution__content-wrap.is-step-04 {
  background-image: linear-gradient(to top, #0097a1, #20a0a9);
  border-radius: 0 0 6px 6px;
  padding-bottom: 20px;
}
.p-solution__content-wrap.is-step-04 .p-solution__content-title {
  color: #179ba3;
}
@media only screen and (max-width: 768px) {
  .p-solution__content-wrap.is-step-04 .p-solution__content-title {
    height: auto;
  }
}

@keyframes glow01 {
  0% {
    box-shadow: 0 0 30px #31b1b4;
  }
  50% {
    box-shadow: 0 0 8px #31b1b4;
  }
  100% {
    box-shadow: 0 0 30px #31b1b4;
  }
}
@keyframes glow02 {
  0% {
    box-shadow: 0 0 30px #59b4b1;
  }
  50% {
    box-shadow: 0 0 8px #59b4b1;
  }
  100% {
    box-shadow: 0 0 30px #59b4b1;
  }
}
@keyframes glow03 {
  0% {
    box-shadow: 0 0 30px #21a0a9;
  }
  50% {
    box-shadow: 0 0 8px #21a0a9;
  }
  100% {
    box-shadow: 0 0 30px #21a0a9;
  }
}
@keyframes glowsp {
  0% {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }
  50% {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  }
  100% {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }
}
/*------------------------------------------------------
# p-solution-header
-------------------------------------------------------*/
.p-solution-header {
  display: flex;
  padding: 0 0 0 110px;
  margin: 0 20px 60px 30px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-solution-header {
    padding: 0;
    margin: 0;
  }
}
.p-solution-header::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
@media only screen and (max-width: 768px) {
  .p-solution-header::before {
    left: auto;
    right: 0;
  }
}
.p-solution-header.is-step-01::before {
  width: 95px;
  height: 85px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-step01.png) no-repeat left top/cover;
}
@media only screen and (max-width: 768px) {
  .p-solution-header.is-step-01::before {
    transform: scaleX(-1);
    width: 78px;
    height: 69px;
    top: -33px;
  }
}
.p-solution-header.is-step-02::before {
  width: 98px;
  height: 73px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-step02.png) no-repeat left top/cover;
}
@media only screen and (max-width: 768px) {
  .p-solution-header.is-step-02::before {
    width: 88px;
    height: 66px;
    top: -30px;
  }
}
.p-solution-header.is-step-03::before {
  width: 95px;
  height: 103px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-step03.png) no-repeat left top/cover;
}
@media only screen and (max-width: 768px) {
  .p-solution-header.is-step-03::before {
    width: 68px;
    height: 74px;
    top: -30px;
  }
}
.p-solution-header.is-step-04 {
  margin-bottom: 0;
}
.p-solution-header.is-step-04::before {
  width: 111px;
  height: 75px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-step04.png) no-repeat left top/cover;
  left: -15px;
}
@media only screen and (max-width: 768px) {
  .p-solution-header.is-step-04::before {
    width: 80px;
    height: 54px;
    top: -30px;
    left: auto;
    right: 0;
  }
}

.p-solution-header__inner {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .p-solution-header__inner {
    margin-bottom: 27px;
  }
}

.p-solution-header__title {
  font-size: 24px;
  line-height: 1.67;
  padding-bottom: 19px;
  margin-bottom: 15px;
  border-bottom: solid 1px #e6e6e6;
}
@media only screen and (max-width: 768px) {
  .p-solution-header__title {
    padding-top: 5px;
    padding-bottom: 0;
    margin-bottom: 12px;
    font-size: 18px;
    border-bottom: none;
  }
}
.p-solution-header__title span {
  position: relative;
}
.p-solution-header__title span::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 3px;
  background-image: linear-gradient(to right, #f31e6e, #f15f17);
  position: absolute;
  left: 0;
  bottom: -7px;
}
@media only screen and (max-width: 768px) {
  .p-solution-header__title span::after {
    bottom: -3px;
  }
}

.p-solution-header__read {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
}
@media only screen and (max-width: 768px) {
  .p-solution-header__read {
    font-size: 14px;
    border-bottom: solid 1px #e6e6e6;
    padding-bottom: 15px;
  }
}

/*------------------------------------------------------
# p-solution-read
-------------------------------------------------------*/
.p-solution-read {
  max-width: 466px;
  margin: 0 auto;
  padding: 32px 0 29px 0;
  border-radius: 30px;
  background-color: #edf3f4;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-solution-read {
    max-width: none;
    background: none;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 22px;
  }
}
.p-solution-read span {
  background-image: linear-gradient(to right, #f31e6e, #f15f17);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-align: center;
  color: #1397b1;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p-solution-read.is-step-01 {
  background: #edf3f4 url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/bg-step01-illust.png) no-repeat center 66px/407px;
}
@media only screen and (max-width: 768px) {
  .p-solution-read.is-step-01 {
    width: calc(100% + 40px);
    padding-top: 85px;
    padding-bottom: 40px;
    margin-left: -20px;
    background: #dff2f3 url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/bg-step01-illust-sp.png) no-repeat center 35px/221px;
  }
}
@media only screen and (max-width: 768px) {
  .p-solution-read.is-step-02 {
    text-align: left;
    font-size: 16px;
  }
}

/*------------------------------------------------------
# p-solution-record
-------------------------------------------------------*/
.p-solution-record {
  display: flex;
  padding: 0 20px;
  margin-bottom: 47px;
}
@media only screen and (max-width: 768px) {
  .p-solution-record {
    display: block;
    padding: 0;
    margin-bottom: 40px;
  }
}

.p-solution-record__item {
  padding: 0 22px;
}
@media only screen and (max-width: 768px) {
  .p-solution-record__item {
    padding: 0;
    display: flex;
    align-items: center;
  }
}
.p-solution-record__item + .p-solution-record__item {
  border-left: solid 1px #e6e6e6;
}
@media only screen and (max-width: 768px) {
  .p-solution-record__item + .p-solution-record__item {
    border-left: none;
    margin-top: 15px;
  }
}

@media only screen and (max-width: 768px) {
  .p-solution-record__thumb {
    width: 148px;
    margin-right: 16px;
  }
}
@media only screen and (max-width: 768px) {
  .p-solution-record__thumb img {
    width: 100%;
    height: 110px;
    object-fit: cover;
  }
}

.p-solution-record__txt {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  color: #333;
  letter-spacing: 0;
  margin-top: 22px;
}
@media only screen and (max-width: 768px) {
  .p-solution-record__txt {
    width: calc(100% - 164px);
    text-align: left;
    font-size: 16px;
    white-space: normal;
    margin-top: 0;
  }
}

/*------------------------------------------------------
# p-solution-video
-------------------------------------------------------*/
.p-solution-video {
  max-width: 473px;
  margin: -45px auto 0;
  padding-top: 53.06%;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/bg-step02-move.webp) no-repeat center center/contain;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  .p-solution-video {
    width: 295px;
    padding-top: 156px;
    margin-top: 0;
    margin-bottom: 36px;
  }
}

.no-webp .p-solution-video {
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/bg-step02-move.png);
}

.p-solution-video__inner {
  width: 305px;
  height: auto;
  position: absolute;
  left: 83px;
  top: calc(50% - 6px);
  transform: translateY(-50%);
}
@media only screen and (max-width: 768px) {
  .p-solution-video__inner {
    width: 190px;
    height: 112px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@media only screen and (max-width: 768px) {
  .p-solution-video__inner iframe {
    width: 100%;
    height: 100%;
  }
}

/*------------------------------------------------------
# p-solution-example
-------------------------------------------------------*/
@media only screen and (max-width: 768px) {
  .p-solution-example {
    width: calc(100% + 40px);
    margin-left: -20px;
    padding-bottom: 32px;
    background: #edf3f4;
  }
}

.p-solution-example__title {
  display: flex;
  justify-content: center;
  margin: 0 20px;
  border-bottom: solid 1px #1397b1;
  color: #1397b1;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  background: #fff;
}
@media only screen and (max-width: 768px) {
  .p-solution-example__title {
    width: 100%;
    margin: 0;
  }
}
.p-solution-example__title span {
  width: 258px;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 6px 6px 0 0;
  border: solid 1px #1397b1;
  border-bottom: none;
  position: relative;
  bottom: -1px;
}
@media only screen and (max-width: 768px) {
  .p-solution-example__title span {
    width: 224px;
    height: 39px;
    background: #edf3f4;
    border-radius: 4px 4px 0 0;
  }
}

.p-solution-example__txt {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0;
  margin-top: 21px;
}
@media only screen and (max-width: 768px) {
  .p-solution-example__txt {
    font-size: 14px;
    text-align: left;
    padding: 0 20px;
  }
}
.p-solution-example__txt span {
  color: #1397b1;
  font-weight: bold;
}

.p-solution-example__item {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 950px) {
  .p-solution-example__item {
    justify-content: center;
  }
}
@media only screen and (max-width: 768px) {
  .p-solution-example__item {
    margin-bottom: 20px;
  }
}

.p-solution-example__thumb {
  width: 140px;
  height: 140px;
}
@media only screen and (max-width: 768px) {
  .p-solution-example__thumb {
    width: 60px;
    height: 60px;
  }
}
.p-solution-example__thumb img {
  max-width: none;
  width: 180px;
  height: 180px;
  position: relative;
  top: -20px;
}
@media only screen and (max-width: 768px) {
  .p-solution-example__thumb img {
    width: 100px;
    height: 100px;
  }
}

.p-solution-example__comment-inner {
  width: 394px;
  margin-left: 20px;
  padding: 16px 25px;
  border-radius: 40px;
  border: solid 1px #b1e3e6;
  background-color: #dff2f3;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  color: #333;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 30px #e6eced;
}
@media only screen and (max-width: 768px) {
  .p-solution-example__comment-inner {
    width: calc(100% - 60px);
    margin-left: 40px;
    padding: 8px 15px;
    border-radius: 15px;
    background-color: #fff;
    font-size: 12px;
    letter-spacing: 0;
  }
}
.p-solution-example__comment-inner::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 16px 6px;
  border-color: transparent transparent #b1e3e6 transparent;
  position: absolute;
  left: -13px;
  top: 24px;
  transform: rotate(-90deg);
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .p-solution-example__comment-inner::before {
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    left: -15px;
  }
}
.p-solution-example__comment-inner::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 4px 14px 4px;
  border-color: transparent transparent #dff2f3 transparent;
  position: absolute;
  left: -9px;
  top: 25px;
  transform: rotate(-90deg);
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .p-solution-example__comment-inner::after {
    border-color: transparent transparent #fff transparent;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    left: -11px;
  }
}
.p-solution-example__comment-inner span {
  display: inline-block;
  margin-top: 9px;
  font-size: 10px;
}

.p-solution-example__item.is-reverse {
  margin-left: 30px;
}
@media only screen and (max-width: 768px) {
  .p-solution-example__item.is-reverse {
    margin-left: 20px;
  }
}
.p-solution-example__item.is-reverse .p-solution-example__thumb {
  order: 2;
}
.p-solution-example__item.is-reverse .p-solution-example__thumb img {
  left: -20px;
}
@media only screen and (max-width: 768px) {
  .p-solution-example__item.is-reverse .p-solution-example__thumb img {
    left: -40px;
  }
}
.p-solution-example__item.is-reverse .p-solution-example__comment {
  order: 1;
}
@media only screen and (max-width: 768px) {
  .p-solution-example__item.is-reverse .p-solution-example__comment-inner {
    width: calc(100% - 40px);
    margin-left: 0;
  }
}
.p-solution-example__item.is-reverse .p-solution-example__comment-inner::before {
  right: -13px;
  left: auto;
  transform: rotate(90deg);
}
@media only screen and (max-width: 768px) {
  .p-solution-example__item.is-reverse .p-solution-example__comment-inner::before {
    right: -15px;
    transform: translateY(-50%) rotate(90deg);
  }
}
.p-solution-example__item.is-reverse .p-solution-example__comment-inner::after {
  right: -9px;
  left: auto;
  transform: rotate(90deg);
}
@media only screen and (max-width: 768px) {
  .p-solution-example__item.is-reverse .p-solution-example__comment-inner::after {
    right: -10px;
    transform: translateY(-50%) rotate(90deg);
  }
}

/*------------------------------------------------------
# p-solution-support
-------------------------------------------------------*/
.p-solution-support {
  width: 100%;
  max-width: 503px;
  margin: 31px auto 0;
}
@media only screen and (max-width: 768px) {
  .p-solution-support {
    margin-top: 0;
  }
}

.p-solution-support__read {
  letter-spacing: 0;
}
@media only screen and (max-width: 768px) {
  .p-solution-support__read {
    font-size: 14px;
  }
}

.p-solution-support__inner {
  margin-top: 31px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
@media only screen and (max-width: 768px) {
  .p-solution-support__inner {
    gap: 20px 0;
    padding-bottom: 50px;
  }
}

.p-solution-support__item {
  width: 243px;
  border-radius: 20px;
  box-shadow: 7.3px 6.8px 19px 1px rgba(0, 151, 161, 0.2);
  background-color: #fff;
  transition: all 0.4s;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-solution-support__item {
    width: 100%;
    border-radius: 10px;
    box-shadow: 3.7px 3.4px 19px 1px rgba(0, 151, 161, 0.2);
  }
}
.p-solution-support__item a {
  display: block;
}
@media only screen and (max-width: 768px) {
  .p-solution-support__item a {
    display: flex;
    align-items: center;
  }
}

@media only screen and (max-width: 768px) {
  .p-solution-support__thumb {
    width: 110px;
    height: 110px;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
  }
}
.p-solution-support__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-solution-support__body {
  padding: 6px 15px 15px;
}
@media only screen and (max-width: 768px) {
  .p-solution-support__body {
    padding-left: 20px;
  }
}

.p-solution-support__title {
  font-size: 18px;
  font-weight: bold;
  color: #0097a1;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .p-solution-support__title {
    font-size: 16px;
  }
}

.p-solution-support__button {
  padding: 4px 0;
  font-size: 12px;
  color: #edf3f4;
  box-shadow: none;
  letter-spacing: 0;
}
@media only screen and (max-width: 768px) {
  .p-solution-support__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 30px;
    background-image: linear-gradient(to right, #008d97, #00a2ad);
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 10px;
    border-radius: 20px 0 10px 0;
  }
}

.p-solution-support__item:hover {
  box-shadow: none;
  background-color: #edf3f4;
}
.p-solution-support__item:hover .p-solution-support__title {
  color: #027a82;
}
.p-solution-support__item:hover .p-solution-support__button::after {
  opacity: 1;
}

/*------------------------------------------------------
# p-solution-slide
-------------------------------------------------------*/
.p-solution-slide {
  padding-top: 400px;
  padding-bottom: 200px;
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .p-solution-slide {
    width: calc(100% + 40px);
    margin-left: -20px;
    padding-top: 450px;
    padding-bottom: 100px;
  }
}

.lazyloaded.p-solution-slide {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/figure-step-04.webp) no-repeat center top;
}
@media only screen and (max-width: 768px) {
  .lazyloaded.p-solution-slide {
    background-position: center 45px;
  }
}

.no-webp .p-solution-slide {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/figure-step-04.png) no-repeat center top;
}
@media only screen and (max-width: 768px) {
  .no-webp .p-solution-slide {
    background-position: center 45px;
  }
}

.p-solution-slide__inner {
  display: flex;
  align-items: center;
  height: 150px;
  position: relative;
  justify-content: center;
  left: calc(50% + 80px);
}
@media only screen and (max-width: 950px) {
  .p-solution-slide__inner {
    left: calc(50% + 85px);
  }
}
@media only screen and (max-width: 768px) {
  .p-solution-slide__inner {
    left: -10.66vw;
    justify-content: flex-start;
  }
}

.p-solution-slide__read {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.69;
  letter-spacing: 1.2px;
  position: absolute;
  left: 55px;
  top: 247px;
}
@media only screen and (max-width: 768px) {
  .p-solution-slide__read {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }
}
.p-solution-slide__read span {
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .p-solution-slide__read span {
    color: #1397b1;
  }
}

.p-solution-slide__item {
  position: relative;
}

.p-solution-slide__thumb {
  width: 80px;
  height: auto;
  justify-content: center;
  transform: scale(1);
}
@media only screen and (max-width: 950px) {
  .p-solution-slide__thumb {
    width: 8.8vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-solution-slide__thumb {
    width: 16.96vw;
  }
}

.p-solution-slide__text {
  width: 100vw;
  max-width: 502px;
  padding: 34px 20px;
  border-radius: 30px;
  border: solid 1px #b1e3e6;
  background-color: #dff2f3;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: 0 0 60px #e6eced;
  position: absolute;
  left: calc(50% - 40px);
  bottom: -190px;
  transform: translateX(-50%);
  opacity: 0;
  transition: all 0.3s;
}
@media only screen and (max-width: 950px) {
  .p-solution-slide__text {
    left: calc(50% - 5.5vw);
  }
}
@media only screen and (max-width: 768px) {
  .p-solution-slide__text {
    width: calc(100vw - 80px);
    left: calc(50% - 8.3vw);
    position: relative;
    bottom: -60px;
  }
}
.p-solution-slide__text::before {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 17px 10px;
  border-color: transparent transparent #b1e3e6 transparent;
  position: absolute;
  left: 50%;
  top: -17px;
  transform: translateX(-50%);
}
.p-solution-slide__text::after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 17px 10px;
  border-color: transparent transparent #dff2f3 transparent;
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
}

.p-solution-slide__item.swiper-slide-active {
  margin-left: 89px;
}
@media only screen and (max-width: 768px) {
  .p-solution-slide__item.swiper-slide-active {
    margin-left: 19.2vw;
  }
}
.p-solution-slide__item.swiper-slide-active .p-solution-slide__thumb {
  transform-origin: center center;
  transform: scale(2);
  border-radius: 50%;
  position: relative;
  left: -44px;
  box-shadow: 0 0 60px #daeef4;
}
@media only screen and (max-width: 768px) {
  .p-solution-slide__item.swiper-slide-active .p-solution-slide__thumb {
    left: -9.6vw;
  }
}
.p-solution-slide__item.swiper-slide-active .p-solution-slide__thumb::before {
  content: "";
  display: block;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: solid 3px rgba(163, 241, 214, 0.7);
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: 3;
}
.p-solution-slide__item.swiper-slide-active .p-solution-slide__text {
  opacity: 1;
}

/*------------------------------------------------------
# p-top-cv-mid
-------------------------------------------------------*/
.p-top-cv-mid {
  width: 100%;
  height: 450px;
  display: flex;
  align-items: center;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/img-load.png) no-repeat center center/cover;
}
@media only screen and (max-width: 768px) {
  .p-top-cv-mid {
    height: auto;
    background-color: #edf3f4;
    padding-top: 69.86%;
  }
}

.p-top-cv-mid.lazyloaded {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/bg-top-cv-mid.webp) no-repeat center center/cover;
}
@media only screen and (max-width: 768px) {
  .p-top-cv-mid.lazyloaded {
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/bg-top-cv-mid-sp.webp);
  }
}

.no-webp .p-top-cv-mid {
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/bg-top-cv-mid.png);
}
@media only screen and (max-width: 768px) {
  .no-webp .p-top-cv-mid {
    background: #edf3f4 url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/bg-top-cv-mid-sp.png) no-repeat center top/100% auto;
  }
}

.p-top-cv-mid__inner {
  max-width: 650px;
  width: 100%;
  margin: 0 auto;
  padding: 64px 80px 52px;
  background: #fff;
  border-radius: 10px;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .p-top-cv-mid__inner {
    max-width: 100%;
    border-radius: 50px 50px 0 0;
    padding: 45px 0 60px;
  }
}

.p-top-cv-mid__title {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 15px;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .p-top-cv-mid__title {
    font-size: 20px;
    margin-bottom: 23px;
  }
}

.p-top-cv-mid__read {
  letter-spacing: 0;
  margin-bottom: 33px;
}
@media only screen and (max-width: 768px) {
  .p-top-cv-mid__read {
    margin-bottom: 43px;
  }
}

.p-top-cv-mid__button {
  max-width: 480px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .p-top-cv-mid__button {
    max-width: 89.6%;
  }
}
.p-top-cv-mid__button a {
  font-size: 20px;
  padding: 20px 0;
  border-radius: 20px;
}
@media only screen and (max-width: 768px) {
  .p-top-cv-mid__button a {
    font-size: 16px;
  }
}

/*------------------------------------------------------
# p-improvement
-------------------------------------------------------*/
.p-improvement {
  position: relative;
}
@media only screen and (max-width: 950px) {
  .p-improvement {
    padding-top: 130px;
  }
}
@media only screen and (max-width: 950px) {
  .p-improvement::before {
    content: "";
    display: block;
    width: 100%;
    height: 50px;
    background: #edf3f4;
    position: absolute;
    left: 0;
    top: 0;
  }
}

.p-improvement__item-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-top: 90px;
}
@media only screen and (max-width: 768px) {
  .p-improvement__item-wrap {
    justify-content: space-between;
    margin-top: 50px;
  }
}

.p-improvement__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33.25%;
  border-right: solid 1px #e6e6e6;
  border-bottom: solid 1px #e6e6e6;
  padding: 0 0 49px;
}
@media only screen and (max-width: 768px) {
  .p-improvement__item {
    width: 47.16%;
    border: none;
    padding: 0 0 30px;
  }
}
.p-improvement__item:nth-of-type(3n) {
  border-right: none;
}
.p-improvement__item:nth-last-of-type(-n+3) {
  border-bottom: none;
}
.p-improvement__item:nth-of-type(-n+3) .p-improvement__thumb {
  margin-top: 0;
}

.p-improvement__thumb {
  width: 235px;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 60px 0 17px;
}
@media only screen and (max-width: 768px) {
  .p-improvement__thumb {
    width: 142px;
    height: 102px;
    margin: 0 0 17px;
  }
}
.p-improvement__thumb.is-wide {
  width: 257px;
  height: 153px;
}
@media only screen and (max-width: 768px) {
  .p-improvement__thumb.is-wide {
    width: 142px;
    height: 102px;
  }
}
@media only screen and (max-width: 768px) {
  .p-improvement__thumb img {
    transform: scale(0.8);
  }
}

@media only screen and (max-width: 768px) {
  .p-improvement__item:nth-of-type(5) .p-improvement__thumb img {
    transform: scale(1);
  }
}
@media only screen and (max-width: 768px) {
  .p-improvement__item:nth-of-type(6) .p-improvement__thumb img {
    transform: scale(1);
  }
}
@media only screen and (max-width: 768px) {
  .p-improvement__item:nth-of-type(7) .p-improvement__thumb img {
    transform: scale(0.9);
    margin-bottom: -18px;
  }
}
@media only screen and (max-width: 768px) {
  .p-improvement__item:nth-of-type(8) .p-improvement__thumb img {
    transform: scale(1);
  }
}
@media only screen and (max-width: 768px) {
  .p-improvement__item:nth-of-type(9) .p-improvement__thumb img {
    transform: scale(0.9);
  }
}

.p-improvement__list {
  width: 100%;
  max-width: 215px;
  margin-top: 24px;
}
@media only screen and (max-width: 768px) {
  .p-improvement__list {
    margin-top: 13px;
  }
}
.p-improvement__list li {
  display: flex;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
  margin-bottom: 5px;
  letter-spacing: 0;
}
@media only screen and (max-width: 768px) {
  .p-improvement__list li {
    font-size: 12px;
  }
}
.p-improvement__list li::before {
  content: "・";
}

.p-improvement__button {
  display: inline-block;
  letter-spacing: 0;
}
@media only screen and (max-width: 768px) {
  .p-improvement__button {
    display: block;
    width: 100%;
  }
}
.p-improvement__button a {
  max-width: none;
  width: auto;
  padding: 7px 40px;
  white-space: nowrap;
}
@media only screen and (max-width: 950px) {
  .p-improvement__button a {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .p-improvement__button a {
    width: 100%;
    padding-left: 9px;
    padding-right: 9px;
    padding: 3px 9px;
  }
}
@media only screen and (max-width: 768px) {
  .p-improvement__button a.is-font-small {
    font-size: 13px;
  }
}

.p-improvement__title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: -5px;
  margin-top: 10px;
}
@media only screen and (max-width: 768px) {
  .p-improvement__title {
    font-size: 14px;
    margin-top: 0;
  }
}

.p-improvement__message {
  max-width: 640px;
  margin: 80px auto 0;
  padding: 110px 60px 62px 60px;
  border-radius: 30px;
  background-color: #53b0d9;
  font-size: 18px;
  letter-spacing: 0;
  color: #fff;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-improvement__message {
    width: 100vw;
    margin: 40px 0 0;
    padding: 91px 40px 60px 40px;
    border-radius: 30px 30px 0 0;
    font-size: 16px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
.p-improvement__message span {
  font-weight: bold;
}
.p-improvement__message::before {
  content: "";
  display: block;
  width: 225px;
  height: 131px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/img-improvement-title.png) no-repeat;
  position: absolute;
  left: 50%;
  top: -57px;
  transform: translateX(-50%);
}
@media only screen and (max-width: 768px) {
  .p-improvement__message::before {
    width: 140px;
    height: 89.5px;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/img-improvement-title-sp.png) no-repeat center center/cover;
    top: -30px;
  }
}

/*------------------------------------------------------
# p-knowhow
-------------------------------------------------------*/
.p-knowhow {
  padding: 120px 0 56px;
  background-image: linear-gradient(to left, #edf3f4, #fff);
}

.p-knowhow__inner {
  max-width: 1280px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/bg-knowhow.png) no-repeat center top;
}
.p-knowhow__inner::before {
  content: "";
  display: block;
  width: 192px;
  height: 100%;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
}
@media only screen and (max-width: 768px) {
  .p-knowhow__inner::before {
    content: none;
  }
}
.p-knowhow__inner::after {
  content: "";
  display: block;
  width: 192px;
  height: calc(100% + 340px);
  background-image: linear-gradient(to right, rgba(237, 243, 244, 0), #edf3f4);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 99;
}
@media only screen and (max-width: 768px) {
  .p-knowhow__inner::after {
    content: none;
  }
}

/*------------------------------------------------------
# p-knowhow-nav
-------------------------------------------------------*/
.p-knowhow-nav {
  width: 100%;
  background-color: #e8eff1;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-knowhow-nav::after {
    content: "";
    display: block;
    width: 83px;
    height: 80px;
    position: absolute;
    right: 0;
    top: 0;
    background-image: linear-gradient(to left, rgba(232, 239, 241, 0.97), transparent);
    z-index: 2;
  }
}

.p-knowhow-nav__item-wrap {
  display: flex;
  justify-content: center;
  column-gap: 20px;
  width: 100%;
  max-width: 825px;
  height: 71px;
  margin: 0 auto;
}
@media only screen and (max-width: 950px) {
  .p-knowhow-nav__item-wrap {
    justify-content: flex-start;
  }
}
@media only screen and (max-width: 768px) {
  .p-knowhow-nav__item-wrap {
    max-width: none;
    height: 80px;
    padding: 0 20px;
  }
}

.p-knowhow-nav__item {
  width: auto !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  transition: all 0.4s;
  height: 71px !important;
}
@media only screen and (max-width: 950px) {
  .p-knowhow-nav__item {
    width: 33%;
    justify-content: center;
  }
}
@media only screen and (max-width: 768px) {
  .p-knowhow-nav__item img {
    transform: scale(0.8);
    transform-origin: left center;
  }
}
.p-knowhow-nav__item img.is-w30 {
  width: 33px;
}
.p-knowhow-nav__item span {
  display: inline-block;
  margin-left: 10px;
}
@media only screen and (max-width: 768px) {
  .p-knowhow-nav__item span {
    margin-left: 2px;
  }
}
.p-knowhow-nav__item.swiper-slide-thumb-active {
  color: #0097a1;
}
.p-knowhow-nav__item.swiper-slide-thumb-active::after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  background-image: linear-gradient(to left, #008d97, #00a2ad);
  position: absolute;
  left: 0;
  bottom: 0;
}
.p-knowhow-nav__item:hover {
  color: #0097a1;
}

/*------------------------------------------------------
# p-knowhow-content
-------------------------------------------------------*/
.p-knowhow-content {
  width: 100%;
  max-width: 1280px;
  margin: 82px auto 0;
  padding-bottom: 50px;
}
@media only screen and (max-width: 950px) {
  .p-knowhow-content {
    margin-top: 90px;
    padding-bottom: 40px;
  }
}

.p-knowhow-content__item {
  width: 100%;
  max-width: 896px;
  padding: 10px;
  border-radius: 20px;
  box-shadow: 7.3px 6.8px 19px 1px rgba(0, 151, 161, 0.2);
  background-image: linear-gradient(to right, #008d97, #00a2ad);
  transition: all 0.4s;
  position: relative;
  top: 0;
}
@media only screen and (max-width: 950px) {
  .p-knowhow-content__item {
    padding: 5px;
    border-radius: 10px;
    box-shadow: 3.7px 3.4px 19px 1px rgba(0, 151, 161, 0.2);
  }
}
.p-knowhow-content__item.swiper-slide-active {
  top: -42px;
}

.p-knowhow-content__item-inner {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}
@media only screen and (max-width: 950px) {
  .p-knowhow-content__item-inner {
    display: block;
    border-radius: 10px;
  }
}

.p-knowhow-content__thumb {
  box-shadow: 4.7px 8.8px 40px 0 rgba(186, 186, 186, 0.3);
  width: 438px;
}
@media only screen and (max-width: 1279px) {
  .p-knowhow-content__thumb {
    width: 50%;
  }
}
@media only screen and (max-width: 950px) {
  .p-knowhow-content__thumb {
    width: 100%;
  }
}
.p-knowhow-content__thumb img {
  width: auto;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 950px) {
  .p-knowhow-content__thumb img {
    width: 100%;
    height: 194.5px;
  }
}

.p-knowhow-content__body {
  margin-left: 40px;
  padding-right: 40px;
  padding-bottom: 25px;
  width: calc(100% - 478px);
}
@media only screen and (max-width: 1279px) {
  .p-knowhow-content__body {
    width: 50%;
  }
}
@media only screen and (max-width: 950px) {
  .p-knowhow-content__body {
    margin: 0;
    padding: 14px 20px 0;
    width: 100%;
  }
}

.p-knowhow-content__title {
  padding: 47px 0 21px;
  width: calc(100% + 5px);
  font-size: 36px;
  font-weight: bold;
  line-height: 1.5;
  color: #1397b1;
  position: relative;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-knowhow-gray01.svg) no-repeat right 20px;
}
@media only screen and (max-width: 950px) {
  .p-knowhow-content__title {
    background: none !important;
    padding: 0 0 10px;
    font-size: 18px;
  }
}
.p-knowhow-content__title::after {
  content: "";
  width: calc(100% - 23px);
  height: 1px;
  background: #e6e6e6;
  position: absolute;
  left: 0;
  bottom: 0;
}
@media only screen and (max-width: 950px) {
  .p-knowhow-content__title::after {
    width: 100%;
  }
}
.p-knowhow-content__title span {
  display: block;
  padding-top: 10px;
  color: #738386;
}
@media only screen and (max-width: 950px) {
  .p-knowhow-content__title span {
    display: inline-block;
    width: 67px;
    margin-left: 9px;
    padding-top: 8px;
    vertical-align: text-top;
  }
}
.p-knowhow-content__title.is-item02 {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-knowhow-gray02.svg) no-repeat right center;
}
.p-knowhow-content__title.is-item03 {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-knowhow-gray-service.png) no-repeat right bottom 25px;
  background-size: 95px auto;
}
.p-knowhow-content__title.is-item04 {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-knowhow-gray03.svg) no-repeat right center;
}
.p-knowhow-content__title.is-item05 {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-knowhow-gray-logistics.png) no-repeat right bottom 25px;
  background-size: 110px auto;
}
.p-knowhow-content__title.is-item06 {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-knowhow-gray06.svg) no-repeat right center;
}
.p-knowhow-content__title.is-item07 {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-knowhow-gray07.svg) no-repeat right center;
}

.p-knowhow-content__txt {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 20px;
  margin-bottom: 23px;
}
@media only screen and (max-width: 1279px) {
  .p-knowhow-content__txt {
    font-size: 14px;
    margin-top: 13px;
    margin-bottom: 13px;
  }
}

.p-knowhow-content__btn {
  width: 157px;
  margin-left: auto;
}
@media only screen and (max-width: 950px) {
  .p-knowhow-content__btn {
    width: calc(100% + 40px);
    margin-left: -20px;
  }
}
.p-knowhow-content__btn a {
  padding: 8px 0;
  box-shadow: none;
}
@media only screen and (max-width: 950px) {
  .p-knowhow-content__btn a {
    border-radius: 0 0 10px 10px;
  }
}
@media only screen and (max-width: 950px) {
  .p-knowhow-content__btn a::after {
    content: none;
  }
}

/*------------------------------------------------------
# p-top-blog
-------------------------------------------------------*/
@media only screen and (max-width: 768px) {
  .p-top-blog {
    padding-top: 70px;
    padding-bottom: 80px;
  }
}
.p-top-blog .c-section-header__read {
  font-weight: 500;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .p-top-blog .c-section-header__read {
    text-align: left;
  }
}
.p-top-blog .p-post-item {
  width: 31.5%;
}
.p-top-blog .p-post-item:hover {
  box-shadow: none;
}
.p-top-blog .p-post-item:hover .p-post-item__title {
  color: #0097a1;
}
@media only screen and (max-width: 768px) {
  .p-top-blog .p-post-item {
    width: 100%;
    border-radius: 6px;
    box-shadow: 3.7px 3.4px 19px 1px rgba(141, 228, 225, 0.5);
  }
}
.p-top-blog .p-post-item__body {
  padding-left: 0;
  padding-right: 0;
}
@media only screen and (max-width: 768px) {
  .p-top-blog .p-post-item__body {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.p-top-blog .p-post-item__date {
  color: #c4dddc;
}
.p-top-blog .p-post-item__cat span {
  color: #0097a1;
}

.p-top-blog__inner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 15px 20px;
  margin-top: 52px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
  .p-top-blog__inner {
    gap: 20px;
    margin-bottom: 49px;
  }
}

.p-top-blog__button {
  max-width: 244px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .p-top-blog__button {
    max-width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .p-top-blog__button a {
    padding: 20px 0;
    border-radius: 40px;
  }
}
@media only screen and (max-width: 768px) {
  .p-top-blog__button a::after {
    border-radius: 40px;
  }
}

/*------------------------------------------------------
# p-top-cv
-------------------------------------------------------*/
.p-top-cv {
  width: 100%;
  border-top: solid 1px #e6e6e6;
}
@media only screen and (max-width: 768px) {
  .p-top-cv {
    border-top: none;
    background: #edf3f4;
  }
}

.p-top-cv__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media only screen and (max-width: 768px) {
  .p-top-cv__inner {
    padding: 50px 20px;
  }
}

.p-top-cv-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 6.25%;
}
@media only screen and (max-width: 768px) {
  .p-top-cv-item {
    width: 100%;
    max-width: 100%;
    padding: 40px 20px;
    background: #fff;
  }
}
.p-top-cv-item + .p-top-cv-item {
  border-left: solid 1px #e6e6e6;
}
@media only screen and (max-width: 768px) {
  .p-top-cv-item + .p-top-cv-item {
    border-left: none;
    margin-top: 30px;
  }
}

.p-top-cv-item__title {
  font-size: 24px;
  font-weight: bold;
  position: relative;
  line-height: 1.5;
  margin-bottom: 30px;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .p-top-cv-item__title {
    font-size: 16px;
    letter-spacing: 0;
    margin-bottom: 15px;
  }
}
.p-top-cv-item__title::before {
  content: "";
  display: block;
  width: 37px;
  height: 35px;
  vertical-align: middle;
  position: relative;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
  .p-top-cv-item__title::before {
    width: 35px;
    height: 35px;
  }
}
.p-top-cv-item__title span {
  color: #1397b1;
}
.p-top-cv-item__title.is-document::before {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-top-cv-document.png) no-repeat center center/contain;
}
.p-top-cv-item__title.is-mail::before {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/top/icon-top-cv-mail.png) no-repeat center center/contain;
}

.p-top-cv-item__button {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
.p-top-cv-item__button a {
  font-size: 20px;
  padding: 20px 0;
}
.p-top-cv-item__button a.is-document {
  border-radius: 40px;
}
.p-top-cv-item__button a.is-document::after {
  border-radius: 40px;
}
@media only screen and (max-width: 768px) {
  .p-top-cv-item__button a {
    font-size: 16px;
  }
}

/*------------------------------------------------------
# p-post-archive
-------------------------------------------------------*/
.p-post-archive {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  padding-top: 40px;
  padding-bottom: 119px;
}
@media only screen and (max-width: 768px) {
  .p-post-archive {
    padding-top: 25px;
    padding-bottom: 80px;
  }
}

.p-post-archive__inner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 15px 20px;
  margin-bottom: 40px;
}

/*------------------------------------------------------
# p-post-item
-------------------------------------------------------*/
.p-post-item {
  width: 31.66%;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.4s;
  background: #fff;
}
@media only screen and (max-width: 768px) {
  .p-post-item {
    width: 100%;
    max-width: 335px;
    margin: 0 auto;
    box-shadow: 4.7px 8.8px 40px 0 rgba(186, 186, 186, 0.3);
  }
}

.p-post-item__thumb {
  overflow: hidden;
}
.p-post-item__thumb img {
  transform: scale(1);
  transition: all 0.4s;
  height: 158px;
  object-fit: cover;
}
@media only screen and (max-width: 768px) {
  .p-post-item__thumb img {
    height: 187px;
  }
}

.p-post-item__body {
  padding: 10px 15px 15px;
}

.p-post-item__meta {
  display: flex;
  justify-content: space-between;
}

.p-post-item__cat {
  width: calc(100% - 65px);
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.p-post-item__cat span {
  display: block;
  font-size: 10px;
  line-height: 1;
  font-weight: bold;
  color: #0097a1;
  letter-spacing: 0;
  padding: 5px 9px;
  background: #f8f8f8;
  border-radius: 10px;
}

.p-post-item__date {
  font-size: 10px;
  font-weight: bold;
  color: #bfc4c4;
  letter-spacing: 0;
}

.p-post-item__title {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
}

.p-post-item:hover {
  box-shadow: 4.7px 8.8px 40px 0 rgba(186, 186, 186, 0.3);
}
@media only screen and (max-width: 768px) {
  .p-post-item:hover {
    box-shadow: none;
  }
}
.p-post-item:hover .p-post-item__thumb img {
  transform: scale(1.1);
}
.p-post-item:hover .p-post-item__title {
  color: #0097a1;
}

/*------------------------------------------------------
# p-single
-------------------------------------------------------*/
.p-single {
  overflow-x: hidden;
  padding-top: 47px;
}
@media only screen and (max-width: 768px) {
  .p-single {
    padding-top: 16px;
  }
}

.p-single__inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1045px;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-single__inner {
    padding: 0 20px;
  }
}

.p-single__main {
  width: 74.92%;
}
@media only screen and (max-width: 768px) {
  .p-single__main {
    width: 100%;
  }
}

.p-single__title {
  font-size: 32px;
  line-height: 1.5;
}
@media only screen and (max-width: 768px) {
  .p-single__title {
    font-size: 20px;
  }
}

.p-single__thumb {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .p-single__thumb {
    border-radius: 3px;
  }
}
.p-single__thumb img {
  width: 100%;
  max-height: 428px;
  height: 40.95vw;
  object-fit: cover;
  object-position: center center;
}
@media only screen and (max-width: 768px) {
  .p-single__thumb img {
    height: 52.73vw;
  }
}

.p-single__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-bottom: 30px;
}
@media only screen and (max-width: 768px) {
  .p-single__meta {
    padding-bottom: 15px;
  }
}

.p-single__date {
  font-weight: bold;
  line-height: 1.13;
  color: #bfc4c4;
}
@media only screen and (max-width: 768px) {
  .p-single__date {
    font-size: 12px;
  }
}

.p-single__cat {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-right: auto;
  margin-left: 26px;
}
@media only screen and (max-width: 768px) {
  .p-single__cat {
    width: auto;
    margin-right: 0;
  }
}
.p-single__cat a {
  display: flex;
  padding: 0 17px 2px;
  border-radius: 18px;
  background-color: #f8f8f8;
  font-size: 18px;
  font-weight: bold;
  color: #0097a1;
}
@media only screen and (max-width: 768px) {
  .p-single__cat a {
    font-size: 14px;
  }
}

.p-single__share-list {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .p-single__share-list {
    background: #f8f8f8;
    padding: 15px 5px;
  }
}
.p-single__share-list li + li {
  margin-left: 15px;
}
.p-single__share-list a:hover {
  opacity: 0.7;
}

.p-single__copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 150px;
  height: 30px;
  padding: 0 20px;
  border-radius: 14.3px;
  border: solid 1px #87c1c5;
  line-height: 1;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  color: #0097a1;
}

.p-single__links {
  padding-top: 40px;
  margin-bottom: 47px;
  border-top: solid 1px #e8eaea;
}
@media only screen and (max-width: 768px) {
  .p-single__links {
    padding-top: 20px;
    margin-bottom: 43px;
    border-top: none;
  }
}

.p-single__links a {
  display: block;
  font-size: 18px;
  line-height: 1.72;
  color: #0097a1;
  text-decoration: #0097a1 underline;
  text-underline-offset: 8px;
  margin-bottom: 10px;
  padding-left: 37px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-single__links a {
    font-size: 14px;
    text-underline-offset: 4px;
    padding-left: 18.5px;
  }
}
.p-single__links a::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-right.svg) no-repeat left top;
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 3px;
  transition: all 0.4s;
}
@media only screen and (max-width: 768px) {
  .p-single__links a::before {
    width: 15px;
    height: 15px;
    top: 5px;
  }
}
.p-single__links a:hover {
  text-decoration: #0097a1 underline;
}
.p-single__links a:hover::before {
  transform: translateX(5px);
}

@media only screen and (max-width: 768px) {
  .p-single__share-list + .p-single__toc {
    margin-top: 40px;
  }
}

.p-single__toc + .p-single__content {
  margin-top: -113px;
}
@media only screen and (max-width: 768px) {
  .p-single__toc + .p-single__content {
    margin-top: 0;
  }
}

.p-single__toc {
  background: #f1fafb;
  padding: 20px 30px 40px;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  .p-single__toc {
    width: 100vw;
    padding: 20px 20px 20px;
    margin-left: -20px;
  }
}

.p-single__toc-title {
  font-size: 20px;
  font-weight: bold;
  position: relative;
  margin-bottom: 18px;
  line-height: 1;
}
@media only screen and (max-width: 768px) {
  .p-single__toc-title {
    margin-bottom: 14px;
  }
}
.p-single__toc-title::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 21px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/blog/icon-ribbon.png) no-repeat left top;
  vertical-align: middle;
  margin-right: 7px;
}
.p-single__toc-title span {
  display: inline-block;
  padding-bottom: 8px;
  transform: rotate(180deg);
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  color: #0097a1;
}

.p-single__toc-list {
  background: #fff;
  width: 100%;
  padding: 19px 0 10px;
}
@media only screen and (max-width: 768px) {
  .p-single__toc-list {
    padding: 15px 0 5px;
  }
}
.p-single__toc-list li {
  width: 100%;
  margin-bottom: 13px;
}
.p-single__toc-list li a {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  font-weight: bold;
  padding: 0 25px 0 45px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-single__toc-list li a {
    font-size: 12px;
    padding: 0 15px 0 33px;
  }
}
.p-single__toc-list li a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-white-bottom.svg) no-repeat left top/cover;
  position: absolute;
  left: 15px;
  top: 2px;
  transition: all 0.4s;
}
@media only screen and (max-width: 768px) {
  .p-single__toc-list li a::before {
    width: 10px;
    height: 10px;
    top: 5px;
  }
}
.p-single__toc-list li a:hover::before {
  transform: translateY(5px);
}

.p-single__content {
  padding-top: 123px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-single__content {
    padding-top: 0;
  }
}
.p-single__content::before {
  content: "";
  display: block;
  width: 100vw;
  height: 123px;
  background-image: linear-gradient(0deg, rgb(241, 250, 251) 10%, rgb(255, 255, 255) 100%);
  position: absolute;
  left: calc(50% - 50vw + 123px);
  top: 0;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .p-single__content::before {
    content: none;
  }
}

.p-single__sidebar {
  width: 21.07%;
  border-radius: 6px;
  background-color: #f8f8f8;
  margin-bottom: auto;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  .p-single__sidebar {
    width: 100%;
    border-radius: 0;
    background: #fff;
    padding-top: 80px;
  }
}
@media only screen and (max-width: 768px) {
  .p-single__sidebar::before {
    display: block;
    content: "";
    width: 100vw;
    height: 15px;
    background: #f1fafb;
    position: absolute;
    top: -15px;
    left: -20px;
  }
}

/*------------------------------------------------------
# p-post-content
-------------------------------------------------------*/
.p-post-content__inner {
  background: #fff;
  border-radius: 6px;
  padding: 60px 30px 40px;
}
@media only screen and (max-width: 768px) {
  .p-post-content__inner {
    padding: 60px 0;
  }
}

.p-post-content {
  position: relative;
  z-index: 1;
}
.p-post-content::before {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  background: #f1fafb;
  position: absolute;
  left: calc(50% - 50vw + 123px);
  top: 0;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .p-post-content::before {
    content: none;
  }
}

.p-post-content h2,
.p-single__summary h2 {
  background: #f1fafb;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.5;
  padding: 20px 40px;
  margin: 110px 0 40px;
  border-left: solid 2px #0097a1;
}
@media only screen and (max-width: 768px) {
  .p-post-content h2,
  .p-single__summary h2 {
    font-size: 20px;
    padding: 12px 16px;
    margin-bottom: 22px;
  }
}
.p-post-content h3,
.p-single__summary h3 {
  font-size: 24px;
  border-left: solid 10px #0097a1;
  margin: 73px 0 35px;
  padding-left: 20px;
  padding-bottom: 12px;
  line-height: 1.5;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-post-content h3,
  .p-single__summary h3 {
    border-left: solid 5px #0097a1;
    font-size: 18px;
    margin: 36px 0 40px;
    padding-left: 10px;
    padding-bottom: 10px;
  }
}
.p-post-content h3::before,
.p-single__summary h3::before {
  content: "";
  display: inline-block;
  width: calc(100% - 20px);
  height: 1px;
  background: #e8eaea;
  position: absolute;
  right: 0;
  bottom: 0;
}
@media only screen and (max-width: 768px) {
  .p-post-content h3::before,
  .p-single__summary h3::before {
    width: calc(100% - 10px);
  }
}
.p-post-content h4,
.p-single__summary h4 {
  color: #04a2ad;
  font-size: 20px;
  line-height: 1.5;
  background: #f8f8f8;
  padding: 5px 20px;
  margin: 35px 0 10px;
}
@media only screen and (max-width: 768px) {
  .p-post-content h4,
  .p-single__summary h4 {
    font-size: 16px;
    padding: 5px 10px;
    margin-top: 20px;
  }
}
.p-post-content p,
.p-single__summary p {
  margin-bottom: 20px;
  line-height: 1.75;
}
@media only screen and (max-width: 768px) {
  .p-post-content p,
  .p-single__summary p {
    font-size: 14px;
    margin-bottom: 10px;
  }
}
.p-post-content a,
.p-single__summary a {
  color: #0097a1;
  text-decoration: underline;
  text-underline-offset: 7px;
}
.p-post-content .wp-block-image,
.p-single__summary .wp-block-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 35px auto;
}
.p-post-content .wp-block-image img,
.p-single__summary .wp-block-image img {
  display: block;
  border-radius: 12px;
}
@media only screen and (max-width: 768px) {
  .p-post-content .wp-block-image img,
  .p-single__summary .wp-block-image img {
    border-radius: 6px;
  }
}
.p-post-content .wp-block-image figcaption,
.p-single__summary .wp-block-image figcaption {
  margin-bottom: 0 !important;
}
.p-post-content blockquote,
.p-single__summary blockquote {
  border-left: solid 4px #e8eaea;
  margin: 40px 0;
  padding: 10px 0 8px 41px;
  color: #777;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .p-post-content blockquote,
  .p-single__summary blockquote {
    font-size: 14px;
    padding: 5px 0 8px 19px;
    margin: 30px 0;
  }
}
.p-post-content blockquote::before, .p-post-content blockquote::after,
.p-single__summary blockquote::before,
.p-single__summary blockquote::after {
  content: "";
  width: 37px;
  height: 28px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/blog/icon-quote.png) no-repeat center center/contain;
  display: inline-block;
  position: absolute;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .p-post-content blockquote::before, .p-post-content blockquote::after,
  .p-single__summary blockquote::before,
  .p-single__summary blockquote::after {
    width: 21px;
    height: 15px;
  }
}
.p-post-content blockquote::before,
.p-single__summary blockquote::before {
  left: 24px;
  top: 0;
}
@media only screen and (max-width: 768px) {
  .p-post-content blockquote::before,
  .p-single__summary blockquote::before {
    left: 8px;
  }
}
.p-post-content blockquote::after,
.p-single__summary blockquote::after {
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  left: auto !important;
  transform: rotate(180deg);
}
.p-post-content ul,
.p-single__summary ul {
  padding-left: 1.5em;
  margin: 35px 0;
}
@media only screen and (max-width: 768px) {
  .p-post-content ul,
  .p-single__summary ul {
    margin: 20px 0;
  }
}
.p-post-content ul li,
.p-single__summary ul li {
  line-height: 1.75;
  margin-bottom: 10px;
  list-style-type: disc;
}
@media only screen and (max-width: 768px) {
  .p-post-content ul li,
  .p-single__summary ul li {
    font-size: 14px;
    margin-bottom: 5px;
  }
}
.p-post-content ul ul,
.p-single__summary ul ul {
  margin-top: 10px;
  margin-bottom: 15px;
}
.p-post-content ul ul li,
.p-single__summary ul ul li {
  list-style: circle;
}
.p-post-content ol,
.p-single__summary ol {
  padding-left: 1.5em;
  margin: 35px 0;
}
@media only screen and (max-width: 768px) {
  .p-post-content ol,
  .p-single__summary ol {
    margin: 20px 0;
  }
}
.p-post-content ol li,
.p-single__summary ol li {
  line-height: 1.75;
  margin-bottom: 10px;
  list-style-type: decimal;
}
@media only screen and (max-width: 768px) {
  .p-post-content ol li,
  .p-single__summary ol li {
    font-size: 14px;
    margin-bottom: 5px;
  }
}

.p-post-content__inner > *:first-child {
  margin-top: 0;
}

.wp-block-buttons {
  margin-bottom: 60px !important;
}
@media only screen and (max-width: 768px) {
  .wp-block-buttons {
    margin-bottom: 40px !important;
  }
}

.wp-block-button {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  transition: all 0.4s;
}
.wp-block-button .wp-block-button__link {
  background: #0097a1;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
.wp-block-button:not(.is-style-button-contact):not(.is-style-button-also-read):hover {
  opacity: 0.7;
}

.p-single__summary {
  padding: 30px 0 20px;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .p-single__summary {
    padding: 25px 0 15px;
    border-bottom: none;
  }
}
.p-single__summary img {
  border-radius: 12px;
  margin: 0 auto;
}
.p-single__summary img.alignleft {
  float: left;
}
.p-single__summary img.alignright {
  float: right;
}

.wp-block-buttons.is-layout-flex {
  display: block !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  color: #0097a1 !important;
}

.wp-block-button.is-style-button-contact .wp-block-button__link {
  display: block;
  width: 100%;
  max-width: 512px;
  padding: 12.5px 0;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  background: linear-gradient(45deg, #00a2ad, #008d97);
  transition: all 0.4s;
  position: relative;
  z-index: 0;
}
.wp-block-button.is-style-button-contact .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-white.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  transition: all 0.4s;
}
.wp-block-button.is-style-button-contact .wp-block-button__link::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #0097a1, #007d85);
  border-radius: 30px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
  transition: all 0.4s;
}
.wp-block-button.is-style-button-contact .wp-block-button__link:hover::after {
  opacity: 1;
}
.wp-block-button.is-style-button-contact .wp-block-button__link:hover::before {
  transform: translateX(5px);
}

.wp-block-button.is-style-button-also-read {
  background: #f1fafb;
  padding: 15px 15px 15px 186px;
  font-weight: bold;
  position: relative;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .wp-block-button.is-style-button-also-read {
    display: block;
    padding: 50px 10px 12px 10px;
    text-align: center;
  }
}
.wp-block-button.is-style-button-also-read::before {
  content: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/blog/icon-hand.png);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 768px) {
  .wp-block-button.is-style-button-also-read::before {
    left: calc(50% - 5.3em);
    top: 12px;
    transform: translateY(0) translateX(-50%) rotate(90deg) scale(0.8);
    z-index: 2;
  }
}
.wp-block-button.is-style-button-also-read::after {
  content: "あわせて読みたい";
  position: absolute;
  left: 50px;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translateY(-50%);
}
@media only screen and (max-width: 768px) {
  .wp-block-button.is-style-button-also-read::after {
    left: 50%;
    top: 10px;
    transform: translateY(0) translateX(-50%);
    z-index: 2;
  }
}
.wp-block-button.is-style-button-also-read .wp-block-button__link {
  display: block;
  width: 100%;
  max-width: 464px;
  background: #fff;
  color: #000;
  text-decoration: none;
  text-align: left;
  margin-left: 25px;
  padding: 11px 20px 11px 56px;
  position: relative;
  border-radius: 0;
}
@media only screen and (max-width: 768px) {
  .wp-block-button.is-style-button-also-read .wp-block-button__link {
    text-align: left;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding: 5px 10px 5px 30px;
    font-size: 14px;
  }
}
.wp-block-button.is-style-button-also-read .wp-block-button__link::before {
  content: "";
  width: 30px;
  height: 30px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-right.svg) no-repeat;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.4s;
}
@media only screen and (max-width: 768px) {
  .wp-block-button.is-style-button-also-read .wp-block-button__link::before {
    width: 15px;
    height: 15px;
    left: 10px;
  }
}
.wp-block-button.is-style-button-also-read .wp-block-button__link:hover::before {
  transform: translateY(-50%) translateX(5px);
}

.wp-block-group.p-comment-item {
  display: flex;
  margin: 40px auto;
}
@media only screen and (max-width: 768px) {
  .wp-block-group.p-comment-item {
    margin: 25px auto;
    flex-wrap: wrap !important;
  }
}
.wp-block-group.p-comment-item.is-layout-flex {
  align-items: flex-start !important;
}
.wp-block-group.p-comment-item .p-comment-item__thumb {
  width: 100px;
  margin: 0 15px 0 0 !important;
}
@media only screen and (max-width: 768px) {
  .wp-block-group.p-comment-item .p-comment-item__thumb {
    display: flex;
    flex-direction: row !important;
    width: 100%;
  }
}
.wp-block-group.p-comment-item .p-comment-item__thumb img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  border: solid 5px #fff;
  box-shadow: 0 0 1px 1px #87c1c5;
  margin: 0;
}
@media only screen and (max-width: 768px) {
  .wp-block-group.p-comment-item .p-comment-item__thumb img {
    width: 60px;
    height: 60px;
    border: solid 3px #fff;
  }
}
.wp-block-group.p-comment-item .p-comment-item__thumb figcaption {
  font-size: 12px;
  text-align: center;
  padding-top: 3px;
  margin: 0 !important;
}
@media only screen and (max-width: 768px) {
  .wp-block-group.p-comment-item .p-comment-item__thumb figcaption {
    text-align: left;
    padding-top: 0;
    margin-left: 10px !important;
    font-weight: bold;
  }
}
.wp-block-group.p-comment-item .p-comment-item__body {
  width: calc(100% - 120px);
  padding-left: 20px;
  border-left: solid 2px #e8eaea;
}
@media only screen and (max-width: 768px) {
  .wp-block-group.p-comment-item .p-comment-item__body {
    width: 100%;
    padding-left: 0;
    border-left: 0;
  }
}
.wp-block-group.p-comment-item .p-comment-item__body p:last-child {
  margin-bottom: 0;
}
.wp-block-group.p-comment-item.is-reverse .p-comment-item__thumb {
  order: 2;
  margin-right: 0 !important;
  margin-left: 15px !important;
}
@media only screen and (max-width: 768px) {
  .wp-block-group.p-comment-item.is-reverse .p-comment-item__thumb {
    order: 1;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}
.wp-block-group.p-comment-item.is-reverse .p-comment-item__body {
  order: 1;
  padding-left: 0;
  padding-right: 20px;
  border-left: none;
  border-right: solid 2px #e8eaea;
}
@media only screen and (max-width: 768px) {
  .wp-block-group.p-comment-item.is-reverse .p-comment-item__body {
    padding-right: 0;
    border-right: none;
  }
}

.p-comment-item-wrap .wp-block-group.p-comment-item:nth-child(even) .p-comment-item__thumb {
  order: 2;
  margin-right: 0 !important;
  margin-left: 15px !important;
}
@media only screen and (max-width: 768px) {
  .p-comment-item-wrap .wp-block-group.p-comment-item:nth-child(even) .p-comment-item__thumb {
    order: 1;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}
.p-comment-item-wrap .wp-block-group.p-comment-item:nth-child(even) .p-comment-item__body {
  order: 1;
  padding-left: 0;
  padding-right: 15px;
  border-left: none;
  border-right: solid 2px #e8eaea;
}
@media only screen and (max-width: 768px) {
  .p-comment-item-wrap .wp-block-group.p-comment-item:nth-child(even) .p-comment-item__body {
    padding-right: 0;
    border-right: none;
  }
}

/*------------------------------------------------------
# p-related-post
-------------------------------------------------------*/
.p-related-post {
  display: flex;
  justify-content: space-between;
  padding-bottom: 70px;
  padding-top: 123px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-related-post {
    padding-bottom: 0;
  }
}
.p-related-post::before {
  content: "";
  display: block;
  width: 100%;
  height: 123px;
  background-image: linear-gradient(180deg, rgb(241, 250, 251) 10%, rgb(255, 255, 255) 100%);
  position: absolute;
  left: 0;
  top: 0;
}
@media only screen and (max-width: 768px) {
  .p-related-post::before {
    background-image: linear-gradient(0, rgb(241, 250, 251) 10%, rgb(255, 255, 255) 100%);
  }
}
@media only screen and (max-width: 768px) {
  .p-related-post::after {
    content: "";
    display: block;
    width: 100%;
    height: 15px;
    background-image: linear-gradient(180deg, rgb(241, 250, 251) 10%, rgb(255, 255, 255) 100%);
    position: absolute;
    left: 0;
    bottom: 1px;
  }
}

.p-related-post__inner {
  display: flex;
}
@media only screen and (max-width: 768px) {
  .p-related-post__inner {
    display: block;
    background: rgb(241, 250, 251);
  }
}

.p-related-post__title {
  font-size: 28px;
  white-space: nowrap;
  margin-right: 40px;
}
@media only screen and (max-width: 768px) {
  .p-related-post__title {
    font-size: 20px;
    padding-bottom: 10px;
  }
}

.p-related-post__rabel {
  display: block;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  color: #0097a1;
  margin-bottom: -5px;
}
@media only screen and (max-width: 768px) {
  .p-related-post__rabel {
    display: inline-block;
    margin-right: 13.5px;
    margin-bottom: 0;
  }
}

.p-related-post__content {
  width: 100%;
  max-width: 870px;
}

.p-related-post-item {
  border-top: solid 1px #e8eaea;
}
.p-related-post-item a {
  display: flex;
  align-items: center;
  padding: 20px 0;
}
@media only screen and (max-width: 768px) {
  .p-related-post-item a {
    padding: 15px 0;
  }
}
.p-related-post-item:first-child {
  border: none;
}
@media only screen and (max-width: 768px) {
  .p-related-post-item:first-child {
    border-top: solid 1px #e8eaea;
  }
}
.p-related-post-item:first-child a {
  padding-top: 0;
}
@media only screen and (max-width: 768px) {
  .p-related-post-item:first-child a {
    padding-top: 15px;
  }
}
@media only screen and (max-width: 768px) {
  .p-related-post-item:last-child {
    border-bottom: solid 1px #e8eaea;
  }
}
.p-related-post-item:last-child a {
  padding-bottom: 0;
}
@media only screen and (max-width: 768px) {
  .p-related-post-item:last-child a {
    padding-bottom: 15px;
  }
}

.p-related-post-item__thumb {
  width: 240px;
  margin-right: 30px;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .p-related-post-item__thumb {
    width: 120px;
    margin-right: 10px;
  }
}
.p-related-post-item__thumb img {
  width: 100%;
  height: 134px;
  object-fit: cover;
  transform: scale(1);
  transition: all 0.4s;
}
@media only screen and (max-width: 768px) {
  .p-related-post-item__thumb img {
    height: 66px;
  }
}

.p-related-post-item__body {
  width: calc(100% - 275px);
}
@media only screen and (max-width: 768px) {
  .p-related-post-item__body {
    width: calc(100% - 130px);
  }
}

.p-related-post-item__cat {
  margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
  .p-related-post-item__cat {
    margin-bottom: 0;
  }
}
.p-related-post-item__cat span {
  display: inline-block;
  background: #f8f8f8;
  color: #0097a1;
  line-height: 1;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 13px;
  border-radius: 14px;
}
@media only screen and (max-width: 768px) {
  .p-related-post-item__cat span {
    background: #fff;
    font-size: 12px;
  }
}

.p-related-post-item__title {
  font-weight: bold;
  font-size: 18px;
}
@media only screen and (max-width: 768px) {
  .p-related-post-item__title {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
  }
}
.p-related-post-item__title::before {
  content: "";
  width: 21px;
  height: 21px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-right.svg) no-repeat;
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 7px;
  transition: all 0.4s;
}
@media only screen and (max-width: 768px) {
  .p-related-post-item__title::before {
    content: none;
  }
}

.p-related-post-item__date {
  font-size: 12px;
  color: #bfc4c4;
  margin-top: 6px;
}
@media only screen and (max-width: 768px) {
  .p-related-post-item__date {
    font-size: 10px;
    margin-top: 0;
  }
}

.p-related-post-item a:hover .p-related-post-item__thumb img {
  transform: scale(1.1);
}
.p-related-post-item a:hover .p-related-post-item__title::before {
  transform: translateX(5px);
}

/*------------------------------------------------------
# p-other-post
-------------------------------------------------------*/
.p-other-post {
  background: #f8f8f8;
  padding: 30px 0 80px;
}

.p-section-item__thumb {
  overflow: hidden;
}
.p-section-item__thumb img {
  transform: scale(1);
  transition: all 0.4s;
}

.p-other-post-item-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 20px;
  width: 100%;
}

.p-other-post-item {
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.4s;
  width: 32%;
}
@media only screen and (max-width: 768px) {
  .p-other-post-item {
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 4.7px 8.8px 40px 0 rgba(186, 186, 186, 0.3);
  }
}
@media only screen and (max-width: 768px) {
  .p-other-post-item:last-child {
    margin-bottom: 0;
  }
}

.p-other-post-item__body {
  padding: 15px;
  background: #fff;
}

.p-other-post-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-other-post-item__cat span {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  color: #0097a1;
  line-height: 1;
  padding: 5px 11px;
  background: #f8f8f8;
  border-radius: 10px;
}

.p-other-post-item__date {
  color: #bfc4c4;
  font-size: 10px;
  font-weight: bold;
}

.p-other-post-item__title {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.75;
}

.p-other-post-item__tag {
  display: flex;
}
@media only screen and (max-width: 768px) {
  .p-other-post-item__tag {
    margin-top: 8.5px;
  }
}
.p-other-post-item__tag li {
  font-size: 12px;
  font-weight: bold;
  color: #87c1c5;
}
@media only screen and (max-width: 768px) {
  .p-other-post-item__tag li {
    font-size: 10px;
  }
}
.p-other-post-item__tag li + li {
  margin-left: 10px;
}

.p-other-post-item__thumb {
  overflow: hidden;
}
.p-other-post-item__thumb img {
  transform: scale(1);
  transition: all 0.4s;
}

.p-other-post__title {
  display: flex;
  align-items: center;
  font-size: 32px;
  padding-bottom: 25px;
}
@media only screen and (max-width: 768px) {
  .p-other-post__title {
    display: block;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
}

.p-other-post__button {
  width: 100%;
  max-width: 314px;
  position: absolute;
  right: 0;
  top: 0;
}
@media only screen and (max-width: 768px) {
  .p-other-post__button {
    max-width: 100%;
    right: auto;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 40px;
  }
}

.p-other-post-item:hover {
  box-shadow: 4.7px 8.8px 40px 0 rgba(186, 186, 186, 0.3);
}
@media only screen and (max-width: 768px) {
  .p-other-post-item:hover {
    box-shadow: none;
  }
}
.p-other-post-item:hover .p-other-post-item__thumb img {
  transform: scale(1.1);
}
.p-other-post-item:hover .p-other-post-item__title::before {
  transform: translateX(2px);
}

/*------------------------------------------------------
# p-popular-post
-------------------------------------------------------*/
.p-popular-post {
  margin-bottom: 40px;
  background-color: #f8f8f8;
  border-radius: 6px;
}
@media only screen and (max-width: 768px) {
  .p-popular-post {
    box-shadow: 2px 4px 20px 0 rgba(186, 186, 186, 0.3);
    border: solid 1px #e8eaea;
  }
}

.p-popular-post__title {
  font-weight: bold;
  padding: 10px 15px;
  margin-bottom: 15px;
  border-bottom: solid 1px #e8eaea;
}
@media only screen and (max-width: 768px) {
  .p-popular-post__title {
    font-size: 20px;
    text-align: center;
  }
}

.p-popular-post__list {
  padding: 0 15px;
}
@media only screen and (max-width: 768px) {
  .p-popular-post__list {
    padding: 0 15px 7px;
  }
}
.p-popular-post__list li {
  margin-bottom: 17px;
}
@media only screen and (max-width: 768px) {
  .p-popular-post__list li {
    margin-bottom: 10px;
  }
}
.p-popular-post__list a {
  display: block;
}
@media only screen and (max-width: 768px) {
  .p-popular-post__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.p-popular-post__list a:hover img {
  transform: scale(1.1);
}

.p-popular-post__thumb {
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}
@media only screen and (max-width: 768px) {
  .p-popular-post__thumb {
    width: 120px;
    margin-right: 10px;
  }
}
.p-popular-post__thumb img {
  transition: all 0.4s;
  transform: scale(1);
  width: 186px;
  height: 103px;
  object-fit: cover;
}
@media only screen and (max-width: 768px) {
  .p-popular-post__thumb img {
    width: 120px;
    height: 66px;
    object-fit: cover;
  }
}

.p-popular-post__text {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;
}
@media only screen and (max-width: 768px) {
  .p-popular-post__text {
    width: calc(100% - 120px);
    font-size: 14px;
  }
}

/*------------------------------------------------------
# p-side-cv
-------------------------------------------------------*/
.p-side-cv {
  border-top: solid 1px #e8eaea;
  padding: 20px 10px;
}
@media only screen and (max-width: 768px) {
  .p-side-cv {
    border: none;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
  }
}

.p-side-cv__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fdeeb0;
  font-weight: bold;
  line-height: 1.5;
  padding: 15px 10px 18px;
}
@media only screen and (max-width: 768px) {
  .p-side-cv__title {
    font-size: 20px;
  }
}
.p-side-cv__title span {
  color: #0097a1;
}
.p-side-cv__title::before {
  content: "";
  width: 15px;
  height: 24px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/blog/icon-light.png) no-repeat;
  display: inline-block;
}

.p-side-cv__body {
  display: flex;
  min-height: 235px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/blog/bg-document.png) no-repeat left top/100% 100%;
  padding: 30px 10px;
}
@media only screen and (max-width: 768px) {
  .p-side-cv__body {
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/blog/bg-document-sp.png) no-repeat left top/100% 100%;
  }
}

.p-side-cv__thumb {
  margin-bottom: 17px;
}
@media only screen and (max-width: 768px) {
  .p-side-cv__thumb {
    max-width: 276px;
  }
}
.p-side-cv__thumb img {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-side-cv__thumb img {
    right: -10px;
  }
}

.p-side-cv__button {
  font-size: 14px;
}
@media only screen and (max-width: 768px) {
  .p-side-cv__button {
    font-size: 16px;
  }
}

/*------------------------------------------------------
# about pageDx
-------------------------------------------------------*/
main.about {
  /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
}
main.about .pageDx div, main.about .pageDx span, main.about .pageDx applet, main.about .pageDx object, main.about .pageDx iframe, main.about .pageDx h1, main.about .pageDx h2, main.about .pageDx h3, main.about .pageDx h4, main.about .pageDx h5, main.about .pageDx h6, main.about .pageDx p, main.about .pageDx blockquote, main.about .pageDx pre, main.about .pageDx a, main.about .pageDx abbr, main.about .pageDx acronym, main.about .pageDx address, main.about .pageDx big, main.about .pageDx cite, main.about .pageDx code, main.about .pageDx del, main.about .pageDx dfn, main.about .pageDx em, main.about .pageDx img, main.about .pageDx ins, main.about .pageDx kbd, main.about .pageDx q, main.about .pageDx s, main.about .pageDx samp, main.about .pageDx small, main.about .pageDx strike, main.about .pageDx strong, main.about .pageDx sub, main.about .pageDx sup, main.about .pageDx tt, main.about .pageDx var, main.about .pageDx b, main.about .pageDx u, main.about .pageDx i, main.about .pageDx center, main.about .pageDx dl, main.about .pageDx dt, main.about .pageDx dd, main.about .pageDx ol, main.about .pageDx ul, main.about .pageDx li, main.about .pageDx fieldset, main.about .pageDx form, main.about .pageDx label, main.about .pageDx legend, main.about .pageDx table, main.about .pageDx caption, main.about .pageDx tbody, main.about .pageDx tfoot, main.about .pageDx thead, main.about .pageDx tr, main.about .pageDx th, main.about .pageDx td, main.about .pageDx article, main.about .pageDx aside, main.about .pageDx canvas, main.about .pageDx details, main.about .pageDx embed, main.about .pageDx figure, main.about .pageDx figcaption, main.about .pageDx footer, main.about .pageDx header, main.about .pageDx hgroup, main.about .pageDx menu, main.about .pageDx nav, main.about .pageDx output, main.about .pageDx ruby, main.about .pageDx section, main.about .pageDx summary, main.about .pageDx time, main.about .pageDx mark, main.about .pageDx audio, main.about .pageDx video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}
main.about .pageDx article, main.about .pageDx aside, main.about .pageDx details, main.about .pageDx figcaption, main.about .pageDx figure, main.about .pageDx footer, main.about .pageDx header, main.about .pageDx hgroup, main.about .pageDx menu, main.about .pageDx nav, main.about .pageDx section {
  display: block;
}
main.about body {
  line-height: 1;
}
main.about .pageDx ol, main.about .pageDx ul {
  list-style: none;
}
main.about .pageDx blockquote, main.about .pageDx q {
  quotes: none;
}
main.about blockquote:before, main.about .pageDx blockquote:after, main.about .pageDx q:before, main.about .pageDx q:after {
  content: none;
}
main.about .pageDx table {
  border-collapse: collapse;
  border-spacing: 0;
}
main.about .pageDx {
  color: #000000;
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.1em;
  line-height: 2;
  overflow: hidden;
}
main.about .pageDx .textRobot {
  font-family: "Roboto", sans-serif;
}
main.about .pageDx .pc-none {
  display: none;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .pc-none {
    display: block;
  }
}
main.about .pageDx .sp-none {
  display: block;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sp-none {
    display: none;
  }
}
main.about .pageDx .icon-arrow {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/icon-arrow.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
}
main.about .pageDx .kvAreaPC {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  max-width: 1775px;
  z-index: 2;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaPC {
    display: none;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaPC {
    display: none;
  }
}
main.about .pageDx .kvAreaPC .kvWrap {
  height: 993px;
  margin: 0 auto;
  position: relative;
  width: 1280px;
}
main.about .pageDx .kvAreaPC .kvWrap .ttlPage {
  -webkit-animation: animationKvStart 0.5s 1.5s ease-out 1 normal;
  animation: animationKvStart 0.5s 1.5s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  left: 240px;
  position: absolute;
  top: 67px;
  width: 217px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaPC .kvWrap .ttlPage img {
  width: 100%;
}
main.about .pageDx .kvAreaPC .kvWrap .kvImgInner {
  position: relative;
}
main.about .pageDx .kvAreaPC .kvWrap .kvImgInner img {
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}
@-webkit-keyframes animationOpacitySwitcherAbout {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animationOpacitySwitcherAbout {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
main.about .pageDx .kvAreaPC .kvWrap .kv01 {
  -webkit-animation: animationKvStart 0.5s 0.5s ease-out 1 normal;
  animation: animationKvStart 0.5s 0.5s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  background-color: #fff;
  height: 603px;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 768px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaPC .kvWrap .kv01 .kv01-1 {
  -webkit-animation: animationOpacitySwitcherAbout 12s 0s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 12s 0s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 4;
}
main.about .pageDx .kvAreaPC .kvWrap .kv01 .kv01-2 {
  -webkit-animation: animationOpacitySwitcherAbout 12s 3s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 12s 3s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 3;
}
main.about .pageDx .kvAreaPC .kvWrap .kv01 .kv01-3 {
  -webkit-animation: animationOpacitySwitcherAbout 12s 6s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 12s 6s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 2;
}
main.about .pageDx .kvAreaPC .kvWrap .kv01 .kv01-4 {
  -webkit-animation: animationOpacitySwitcherAbout 12s 9s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 12s 9s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 1;
}
main.about .pageDx .kvAreaPC .kvWrap .kv02 {
  -webkit-animation: animationKvStart 0.4s 0.8s ease-out 1 normal;
  animation: animationKvStart 0.4s 0.8s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  background-color: #fff;
  bottom: 55px;
  height: 303px;
  position: absolute;
  right: 88px;
  width: 531px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaPC .kvWrap .kv02 .kv02-1 {
  -webkit-animation: animationOpacitySwitcherAbout 15s 0s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 15s 0s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 10;
}
main.about .pageDx .kvAreaPC .kvWrap .kv02 .kv02-2 {
  -webkit-animation: animationOpacitySwitcherAbout 15s 5s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 15s 5s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 9;
}
main.about .pageDx .kvAreaPC .kvWrap .kv02 .kv02-3 {
  -webkit-animation: animationOpacitySwitcherAbout 15s 10s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 15s 10s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 8;
}
main.about .pageDx .kvAreaPC .kvWrap .kv03 {
  -webkit-animation: animationKvStart 0.3s 0.85s ease-out 1 normal;
  animation: animationKvStart 0.3s 0.85s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  bottom: 120px;
  position: absolute;
  right: -167px;
  width: 289px;
  z-index: 10;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaPC .kvWrap .kv04 {
  -webkit-animation: animationKvStart 0.2s 0.95s ease-out 1 normal;
  animation: animationKvStart 0.2s 0.95s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  right: 361px;
  top: 540px;
  width: 299px;
  z-index: 10;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaPC .kvWrap .kv05 {
  -webkit-animation: animationKvStart 0.2s 1s ease-out 1 normal;
  animation: animationKvStart 0.2s 1s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  left: 308px;
  position: absolute;
  top: 405px;
  width: 310px;
  z-index: 10;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaPC .kvWrap .kv06 {
  -webkit-animation: animationKvStart 0.3s 0.75s ease-out 1 normal;
  animation: animationKvStart 0.3s 0.75s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  height: 303px;
  left: 227px;
  position: absolute;
  top: 435px;
  width: 375px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaPC .kvWrap .kv06 .kv06-1 {
  -webkit-animation: animationOpacitySwitcherAbout 12s 0s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 12s 0s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 10;
}
main.about .pageDx .kvAreaPC .kvWrap .kv06 .kv06-2 {
  -webkit-animation: animationOpacitySwitcherAbout 12s 4s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 12s 4s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 9;
}
main.about .pageDx .kvAreaPC .kvWrap .kv06 .kv06-3 {
  -webkit-animation: animationOpacitySwitcherAbout 12s 8s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 12s 8s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 8;
}
main.about .pageDx .kvAreaPC .kvWrap .kv07 {
  -webkit-animation: animationKvStart 0.3s 0.95s ease-out 1 normal;
  animation: animationKvStart 0.3s 0.95s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  background-color: #fff;
  height: 303px;
  left: 40px;
  position: absolute;
  top: 470px;
  width: 209px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaPC .kvWrap .kv07 .kv07-1 {
  -webkit-animation: animationOpacitySwitcherAbout 15s 0s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 15s 0s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 10;
}
main.about .pageDx .kvAreaPC .kvWrap .kv07 .kv07-2 {
  -webkit-animation: animationOpacitySwitcherAbout 15s 5s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 15s 5s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 9;
}
main.about .pageDx .kvAreaPC .kvWrap .kv07 .kv07-3 {
  -webkit-animation: animationOpacitySwitcherAbout 15s 10s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 15s 10s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 8;
}
main.about .pageDx .kvAreaPC .kvWrap .kv08 {
  -webkit-animation: animationKvStart 0.2s 0.9s ease-out 1 normal;
  animation: animationKvStart 0.2s 0.9s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  left: -326px;
  position: absolute;
  top: 291px;
  width: 375px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaPC .kvWrap .kv09 {
  -webkit-animation: animationKvStart 0.2s 0.82s ease-out 1 normal;
  animation: animationKvStart 0.2s 0.82s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  left: -235px;
  position: absolute;
  top: 33px;
  width: 375px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaPC .kvWrap .kv10 {
  -webkit-animation: animationKvStart 0.2s 1.1s ease-out 1 normal;
  animation: animationKvStart 0.2s 1.1s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  bottom: 0px;
  left: 57px;
  position: absolute;
  width: 312px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaPC .kvWrap .pageCopy {
  -webkit-animation: animationKvStart 0.3s 1.75s ease-out 1 normal;
  animation: animationKvStart 0.3s 1.75s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  top: 306px;
  right: 125px;
  width: 433px;
  z-index: 10;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaPC .kvWrap .pageCopy img {
  width: 100%;
}
main.about .pageDx .kvAreaSp {
  display: none;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaSp {
    overflow: visible;
    display: block;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp {
    overflow: hidden;
    display: block;
  }
}
main.about .pageDx .kvAreaSp .kvWrap {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  text-align: center;
  width: 100%;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaSp .kvWrap {
    height: 100vw;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp .kvWrap {
    width: auto;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp .kvWrap {
    height: 715px;
    padding-top: 70px;
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvText {
    left: 50%;
    margin: 0 auto;
    max-width: 660px;
    position: absolute;
    top: 40%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 75%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvText {
    left: inherit;
    max-width: 400px;
    position: relative;
    top: inherit;
    -webkit-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
    width: auto;
  }
}
main.about .pageDx .kvAreaSp .kvWrap .pageTitle {
  -webkit-animation: animationKvStart 0.4s 1.5s ease-out 1 normal;
  animation: animationKvStart 0.4s 1.5s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  margin: 0 auto 45px auto;
  width: 30%;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaSp .kvWrap .pageTitle img {
  width: 100%;
}
main.about .pageDx .kvAreaSp .kvWrap .pageCopy {
  -webkit-animation: animationKvStart 0.2s 1.8s ease-out 1 normal;
  animation: animationKvStart 0.2s 1.8s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  margin: 0 auto;
  width: 60%;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
main.about .pageDx .kvAreaSp .kvWrap .pageCopy img {
  width: 100%;
}
main.about .pageDx .kvAreaSp .kvWrap .kvSp {
  position: absolute;
}
main.about .pageDx .kvAreaSp .kvWrap .kvSp img {
  width: 100%;
}
main.about .pageDx .kvAreaSp .kvWrap .kvSp01 {
  -webkit-animation: animationKvStart 0.5s 0.5s ease-out 1 normal;
  animation: animationKvStart 0.5s 0.5s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  right: -122px;
  top: 0px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp01 {
    width: 35%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp01 {
    width: 192px;
  }
}
main.about .pageDx .kvAreaSp .kvWrap .kvSp02 {
  -webkit-animation: animationKvStart 0.5s 0.8s ease-out 1 normal;
  animation: animationKvStart 0.5s 0.8s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  right: -122px;
  width: 192px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp02 {
    top: 36.5%;
    width: 35%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp02 {
    top: 199px;
    width: 192px;
  }
}
main.about .pageDx .kvAreaSp .kvWrap .kvSp03 {
  -webkit-animation: animationKvStart 0.3s 0.85s ease-out 1 normal;
  animation: animationKvStart 0.3s 0.85s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  max-width: 380px;
  right: -122px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp03 {
    bottom: -40px;
    width: 40%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp03 {
    bottom: 119px;
    width: 224px;
  }
}
main.about .pageDx .kvAreaSp .kvWrap .kvSp04 {
  -webkit-animation: animationKvStart 0.3s 0.7s ease-out 1 normal;
  animation: animationKvStart 0.3s 0.7s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  max-width: 240px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp04 {
    width: 30%;
    right: 0px;
    bottom: -360px;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp04 {
    bottom: 117px;
    left: 45%;
    width: 156px;
  }
}
main.about .pageDx .kvAreaSp .kvWrap .kvSp05 {
  -webkit-animation: animationKvStart 0.2s 0.9s ease-out 1 normal;
  animation: animationKvStart 0.2s 0.9s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  bottom: 0px;
  right: -125px;
  width: 169px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp05 {
    display: none;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp05 {
    display: block;
  }
}
main.about .pageDx .kvAreaSp .kvWrap .kvSp06 {
  -webkit-animation: animationKvStart 0.5s 0.6s ease-out 1 normal;
  animation: animationKvStart 0.5s 0.6s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  left: -122px;
  width: 192px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp06 {
    top: 36.5%;
    width: 35%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp06 {
    top: 199px;
    width: 192px;
  }
}
main.about .pageDx .kvAreaSp .kvWrap .kvSp07 {
  -webkit-animation: animationKvStart 0.3s 0.95s ease-out 1 normal;
  animation: animationKvStart 0.3s 0.95s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  max-width: 240px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp07 {
    bottom: -456px;
    left: 43%;
    top: inherit;
    width: 30%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp07 {
    left: 80px;
    top: 415px;
    width: 105px;
  }
}
main.about .pageDx .kvAreaSp .kvWrap .kvSp08 {
  -webkit-animation: animationKvStart 0.75s 0.5s ease-out 1 normal;
  animation: animationKvStart 0.75s 0.5s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  left: -122px;
  top: 0px;
  width: 192px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp08 {
    width: 35%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp08 {
    width: 192px;
  }
}
main.about .pageDx .kvAreaSp .kvWrap .kvSp09 {
  -webkit-animation: animationKvStart 0.4s 0.9s ease-out 1 normal;
  animation: animationKvStart 0.4s 0.9s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  left: -125px;
  max-width: 380px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp09 {
    bottom: -210px;
    width: 43%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp09 {
    bottom: 0px;
    width: 261px;
  }
}
main.about .pageDx .kvAreaSp .kvWrap .kvSp10 {
  -webkit-animation: animationKvStart 0.3s 1s ease-out 1 normal;
  animation: animationKvStart 0.3s 1s ease-out 1 normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  max-width: 500px;
}
@-webkit-keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes animationKvStart {
  0% {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    @media screen and (max-width: 750px) {
      main.about {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
      }
    }
  }
  50% {
    -ms-filter: blur(0px);
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp10 {
    bottom: -30px;
    left: 24%;
    width: 52%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .kvAreaSp .kvWrap .kvSp10 {
    bottom: 30px;
    left: 124px;
    width: 219px;
  }
}
main.about .pageDx .sectionAbout {
  background-image: url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_bar01.png"), url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_bar02.png"), url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_bar03.png"), url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_dotted01.png"), url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_dotted02.png"), url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_dotted03.png"), url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_dotted04.png");
  background-position: top left 37%, top 23% left, bottom left, top 35% right, top 60% left 15%, bottom 18% left 50%, bottom right 5%;
  background-size: auto 54%, 100% 34%, 100% 28%, 10% auto, 20% auto, 13% auto, 20% auto;
  background-repeat: no-repeat;
  margin-top: -993px;
  padding: 1300px 0px 200px 0px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout {
    padding: 700px 0px 100px 0px;
    background-image: url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_bar01_sp.png"), url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_bar02_sp.png"), url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_bar03_sp.png"), url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_bar04_sp.png"), url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_dotted01_sp.png"), url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_dotted02_sp.png"), url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_dotted03_sp.png"), url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_about_dotted04_sp.png");
    background-position: top right 20vw, top 35% left, top 53% left, bottom 0px left, top 140px left 45%, top 55% right 10px, top 60% left 30%, bottom 4% left 45%;
    background-size: 97vw auto, 100vw auto, 100vw auto, 100vw auto, 34vw auto, 23vw auto, 34vw auto, 21vw auto;
    margin-top: 16vw;
    padding-top: 60vw;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout {
    padding-top: 180px;
    margin-top: -30px;
  }
}
main.about .pageDx .sectionAbout .titleAbout {
  left: 5%;
  position: absolute;
  top: 1300px;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .titleAbout {
    top: 60vw;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .titleAbout {
    display: none;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout {
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-feature-settings: palt;
  font-feature-settings: palt;
  font-size: 20px;
  line-height: 2.5;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .paragraphAbout {
    font-size: 18px;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout {
    font-size: 16px;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-left: 20%;
  width: 70%;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .paragraphAbout01 {
    display: block;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout01 {
    margin: 0 auto;
    width: calc(100% - 40px);
  }
}
main.about .pageDx .sectionAbout .paragraphAbout01 p {
  opacity: 0;
  -webkit-transition: all ease-in 0.75s;
  transition: all ease-in 0.75s;
  width: 35vw;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .paragraphAbout01 p {
    width: 100%;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout01 p.active {
  opacity: 1;
}
main.about .pageDx .sectionAbout .paragraphAbout01 .imgAbout01 {
  opacity: 0;
  -webkit-transform: translate(0%, -17%) skew(7deg, 5deg);
  transform: translate(0%, -17%) skew(7deg, 5deg);
  -webkit-transition: all ease-in 0.3s;
  transition: all ease-in 0.3s;
  width: 30vw;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .paragraphAbout01 .imgAbout01 {
    margin: 100px 0 0 30%;
    -webkit-transform: translateY(20%) skew(7deg, 5deg);
    transform: translateY(20%) skew(7deg, 5deg);
    width: 45vw;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout01 .imgAbout01 {
    margin: 100px 0 0 30%;
    width: 57vw;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout01 .imgAbout01.active {
  opacity: 1;
  -webkit-transform: translate(0%, -22%) skew(0deg, 0deg);
  transform: translate(0%, -22%) skew(0deg, 0deg);
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .paragraphAbout01 .imgAbout01.active {
    -webkit-transform: translateY(0%) skew(0deg, 0deg);
    transform: translateY(0%) skew(0deg, 0deg);
  }
}
main.about .pageDx .sectionAbout .paragraphAbout02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10vw;
  position: relative;
  width: 95%;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout02 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout02 .imgAbout02 {
  opacity: 0;
  -webkit-transform: translate(0%, -3%) skew(2deg, 3deg);
  transform: translate(0%, -3%) skew(2deg, 3deg);
  -webkit-transition: all ease-in 0.3s;
  transition: all ease-in 0.3s;
  width: 20vw;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .paragraphAbout02 .imgAbout02 {
    width: 25%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout02 .imgAbout02 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    -webkit-transform: translateY(20%) skew(2deg, 3deg);
    transform: translateY(20%) skew(2deg, 3deg);
    width: 50vw;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout02 .imgAbout02.active {
  opacity: 1;
  -webkit-transform: translate(0%, -8%) skew(0deg, 0deg);
  transform: translate(0%, -8%) skew(0deg, 0deg);
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout02 .imgAbout02.active {
    -webkit-transform: translate(0%, 15%) skew(0deg, 0deg);
    transform: translate(0%, 15%) skew(0deg, 0deg);
  }
}
main.about .pageDx .sectionAbout .paragraphAbout02 p {
  opacity: 0;
  margin-left: 10%;
  -webkit-transition: all ease-in 0.75s;
  transition: all ease-in 0.75s;
  width: 40vw;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .paragraphAbout02 p {
    width: 50vw;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout02 p {
    margin: 0 auto;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    width: calc(100% - 40px);
  }
}
main.about .pageDx .sectionAbout .paragraphAbout02 p.active {
  opacity: 1;
}
main.about .pageDx .sectionAbout .paragraphAbout02 .imgAboutTrain {
  position: absolute;
  max-width: 222px;
  right: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 18%;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .paragraphAbout02 .imgAboutTrain {
    bottom: 20px;
    right: -10px;
    top: inherit;
    width: 12%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout02 .imgAboutTrain {
    left: 50%;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    position: relative;
    top: inherit;
    right: inherit;
    top: 65px;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    width: 111px;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout03 {
  margin-top: 100px;
  padding-bottom: 60vw;
  position: relative;
  width: 100%;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .paragraphAbout03 {
    padding-bottom: 40vw;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout03 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-bottom: 20vw;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea01 {
  height: 65vw;
  left: 5%;
  margin-left: 5%;
  max-height: 800px;
  max-width: 600px;
  opacity: 0;
  position: absolute;
  top: 17vw;
  -webkit-transform: skew(2deg, 3deg);
  transform: skew(2deg, 3deg);
  -webkit-transition: all ease-in 0.5s;
  transition: all ease-in 0.5s;
  width: 45vw;
  z-index: 1;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea01 {
    height: 40vw;
    margin-left: 0;
    top: 400px;
    width: 30vw;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea01 {
    height: 112vw;
    left: 0px;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    position: relative;
    top: 60px;
    width: 75vw;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea01.active {
  opacity: 1;
  -webkit-transform: skew(0deg, 0deg);
  transform: skew(0deg, 0deg);
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea01 .slideImgWrap {
  background-color: #fff;
  position: relative;
  width: 100%;
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea01 .slideImgWrap .imgSlideAbout {
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}
@-webkit-keyframes animationOpacitySwitcherAbout {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animationOpacitySwitcherAbout {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea01 .slideImgWrap .imgSlideAbout.imgSlideAbout01-1 {
  -webkit-animation: animationOpacitySwitcherAbout 12s 0s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 12s 0s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 3;
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea01 .slideImgWrap .imgSlideAbout.imgSlideAbout01-2 {
  -webkit-animation: animationOpacitySwitcherAbout 12s 4s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 12s 4s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 2;
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea01 .slideImgWrap .imgSlideAbout.imgSlideAbout01-3 {
  -webkit-animation: animationOpacitySwitcherAbout 12s 8s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 12s 8s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 1;
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea02 {
  height: 48vw;
  margin-left: 5%;
  max-height: 700px;
  max-width: 480px;
  opacity: 0;
  position: absolute;
  right: 0px;
  top: 35vw;
  -webkit-transform: skew(-4deg, -5deg);
  transform: skew(-4deg, -5deg);
  -webkit-transition: all ease-in 0.3s;
  transition: all ease-in 0.3s;
  width: 30vw;
  z-index: 1;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea02 {
    height: 40vw;
    top: 450px;
    width: 25vw;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea02 {
    height: 82vw;
    left: inherit;
    margin: 0 0 0 49vw;
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    position: relative;
    right: 0px;
    top: 0px;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    width: 51vw;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea02.active {
  opacity: 1;
  -webkit-transform: skew(0deg, 0deg);
  transform: skew(0deg, 0deg);
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea02 .slideImgWrap {
  background-color: #fff;
  position: relative;
  width: 100%;
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea02 .slideImgWrap .imgSlideAbout {
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}
@-webkit-keyframes animationOpacitySwitcherAbout {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animationOpacitySwitcherAbout {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea02 .slideImgWrap .imgSlideAbout.imgSlideAbout02-1 {
  -webkit-animation: animationOpacitySwitcherAbout 9s 0s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 9s 0s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 3;
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea02 .slideImgWrap .imgSlideAbout.imgSlideAbout02-2 {
  -webkit-animation: animationOpacitySwitcherAbout 9s 3s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 9s 3s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 2;
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutSliderArea02 .slideImgWrap .imgSlideAbout.imgSlideAbout02-3 {
  -webkit-animation: animationOpacitySwitcherAbout 9s 6s ease-out infinite normal;
  animation: animationOpacitySwitcherAbout 9s 6s ease-out infinite normal;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 1;
}
main.about .pageDx .sectionAbout .paragraphAbout03 p {
  margin-left: 40%;
  position: relative;
  width: 40%;
  z-index: 2;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .paragraphAbout03 p {
    margin: 0 auto;
    text-align: center;
    width: 60%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout03 p {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    text-align: left;
    width: calc(100% - 40px);
  }
}
main.about .pageDx .sectionAbout .paragraphAbout03 p .textStrong {
  display: block;
  margin-bottom: 2em;
  font-size: 32px;
  opacity: 0;
  -webkit-transition: all ease-in 0.5s;
  transition: all ease-in 0.5s;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionAbout .paragraphAbout03 p .textStrong {
    font-size: 40px;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout03 p .textStrong {
    font-size: 32px;
    line-height: 1.5;
    text-align: center;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout03 p .textStrong.active {
  opacity: 1;
}
main.about .pageDx .sectionAbout .paragraphAbout03 p .textStrong br {
  display: none;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout03 p .textStrong br {
    display: block;
  }
}
main.about .pageDx .sectionAbout .paragraphAbout03 p .textStd {
  opacity: 0;
  -webkit-transition: all ease-in 0.3s;
  transition: all ease-in 0.3s;
}
main.about .pageDx .sectionAbout .paragraphAbout03 p .textStd.active {
  opacity: 1;
}
main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutBuilding {
  position: absolute;
  max-width: 100px;
  right: 8%;
  top: 25vw;
  width: 7vw;
  z-index: 2;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .paragraphAbout03 .imgAboutBuilding {
    bottom: 41vw;
    left: 20%;
    right: inherit;
    top: inherit;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
    width: 46px;
  }
}
main.about .pageDx .sectionAbout .imgAboutTeam {
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionAbout .imgAboutTeam {
    width: 56px;
  }
}
main.about .pageDx .sectionWhats {
  background: url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_whats_top.jpg") #f8f8f8 no-repeat top left;
  background-size: 100% auto;
  padding: 320px 0 180px 0;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionWhats {
    padding-top: 240px;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats {
    padding: 200px 0px 120px 0px;
  }
}
main.about .pageDx .sectionWhats .titleWhats {
  opacity: 0;
  text-align: center;
  -webkit-transition: all ease-in 0.4s;
  transition: all ease-in 0.4s;
}
main.about .pageDx .sectionWhats .titleWhats.active {
  opacity: 1;
}
main.about .pageDx .sectionWhats .titleWhats img {
  display: inline-block;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .titleWhats img {
    width: 75px;
  }
}
main.about .pageDx .sectionWhats .listStepsWrap {
  opacity: 0;
  margin: 120px auto 0px auto;
  -webkit-transform: translate(0%, -5%);
  transform: translate(0%, -5%);
  -webkit-transition: all ease-in 0.5s;
  transition: all ease-in 0.5s;
  width: 80%;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionWhats .listStepsWrap {
    width: 90%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap {
    margin-top: 0px;
    width: calc(100% - 50px);
  }
}
main.about .pageDx .sectionWhats .listStepsWrap.active {
  opacity: 1;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
}
main.about .pageDx .sectionWhats .listStepsWrap .swiper-container {
  margin: 0;
  width: 100%;
}
main.about .pageDx .sectionWhats .listStepsWrap .swiper-container .swiper-button-next.forSmall {
  display: none;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .swiper-container .swiper-button-next.forSmall {
    display: block;
    height: inherit;
    margin: 0;
    top: 450px;
    -webkit-transform: translate(60%, 0%);
    transform: translate(60%, 0%);
    width: auto;
  }
  main.about .pageDx .sectionWhats .listStepsWrap .swiper-container .swiper-button-next.forSmall:after {
    content: none;
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .swiper-container .swiper-button-prev.forSmall {
  display: none;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .swiper-container .swiper-button-prev.forSmall {
    display: block;
    height: inherit;
    margin: 0;
    top: 450px;
    -webkit-transform: scale(-1, 1) translate(60%, 0%);
    transform: scale(-1, 1) translate(60%, 0%);
    width: auto;
  }
  main.about .pageDx .sectionWhats .listStepsWrap .swiper-container .swiper-button-prev.forSmall:after {
    content: none;
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .listSteps {
  width: 100%;
}
main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep {
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep {
    display: block;
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .stepImgArea {
  position: relative;
  text-align: center;
  width: 50%;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .stepImgArea {
    height: 510px;
    width: 100%;
  }
}
@media screen and (max-width: 1199px) and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .stepImgArea {
    height: 450px;
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .stepImgArea img {
    left: 50%;
    max-width: 400px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .stepImgArea {
    margin: 0 auto;
    width: 90%;
  }
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .stepImgArea img {
    width: 100%;
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea {
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 60px 50px;
  width: 50%;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea {
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: -80px auto 0px auto;
    width: calc(90% - 60px);
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea {
    display: block;
    margin: -100px auto 0px auto;
    padding: 30px 20px;
    width: calc(100% - 60px);
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .titleSteps {
    border-right: #e8eaea 1px solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 20px;
    width: 40%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .titleSteps {
    border-right: none;
    padding: 0px 0px 20px 0px;
    width: 100%;
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .numStep {
  display: block;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .numStep {
    font-size: 12px;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .numStep {
    font-size: 10px;
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .titleEn {
  display: block;
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  font-weight: 700;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .titleEn {
    font-size: 18px;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .titleEn {
    font-size: 16px;
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .titleJp {
  color: #00a2ad;
  display: block;
  font-size: 40px;
  line-height: 1.5;
  padding-bottom: 0.8em;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .titleJp {
    font-size: 22px;
    letter-spacing: -0.02em;
  }
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .titleJp {
    font-size: 20px;
    padding-bottom: 0px;
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .textDetailStep {
  border-top: #e8eaea 1px solid;
  font-size: 14px;
  font-weight: 300;
  padding-top: 40px;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .textDetailStep {
    border-top: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 20px;
    padding-top: 0px;
    width: 60%;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .textDetailStep {
    border-top: #e8eaea 1px solid;
    padding-left: 0px;
    padding-top: 20px;
    width: 100%;
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .textDetailStep .small {
  display: block;
  font-size: 12px;
  text-indent: -1em;
  padding-left: 1em;
}
main.about .pageDx .sectionWhats .listStepsWrap .listSteps .partsStep .infoStepArea .textDetailStep .small:before {
  content: "※";
}
main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea {
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "Roboto", sans-serif;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-left: 50%;
  width: 100%;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea {
    margin: 10px auto 0px auto;
    padding-left: 0px;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    width: calc(80% - 60px);
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea {
    width: calc(100% - 50px);
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .swiper-pagination {
  bottom: 0px;
  font-size: 20px;
  font-weight: 300;
  left: inherit;
  position: relative;
  right: inherit;
  text-align: left;
  width: 80px;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .swiper-pagination {
    dont-size: 10px;
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .swiper-pagination .swiper-pagination-current {
  font-size: 32px;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .swiper-pagination .swiper-pagination-current {
    font-size: 16px;
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .swiper-pagination.swiper-paginationCurrentNum {
  color: transparent;
  text-align: right;
  width: 45px;
}
main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .swiper-pagination.swiper-paginationCurrentNum .swiper-pagination-current {
  color: #000000;
}
main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .swiper-pagination.swiper-paginationCurrentNum .swiper-pagination-total {
  display: none;
}
main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .swiper-button-next {
  display: block;
  height: inherit;
  left: inherit;
  margin-top: 0px;
  position: relative;
  right: inherit;
  width: 20px;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .swiper-button-next.forLarge {
    display: none;
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .swiper-button-next:after {
  content: none;
}
main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .swiper-button-next img {
  vertical-align: middle;
}
main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .line {
  position: relative;
  width: calc(100% - 150px);
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .line {
    width: calc(100% - 80px);
  }
}
main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .line:before {
  background-color: #e8eaea;
  content: "";
  display: block;
  height: 1px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 95%;
}
main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .line:after {
  background-color: #e8eaea;
  border-radius: 4px;
  content: "";
  display: block;
  height: 8px;
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 8px;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .listStepsWrap .pagenationArea .line:after {
    right: 0px;
  }
}
main.about .pageDx .sectionWhats .imgSteps {
  display: block;
  margin: 160px auto 0px auto;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .sectionWhats .imgSteps {
    margin-top: 100px;
    width: 130px;
  }
}
main.about .pageDx .comingsoonArea {
  background: #f8f8f8 url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_comingsoon.jpg") no-repeat center;
  background-size: cover;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  opacity: 0;
  position: relative;
  -webkit-transition: all ease-in 1s;
  transition: all ease-in 1s;
}
@media screen and (max-width: 1199px) {
  main.about .pageDx .comingsoonArea {
    font-size: 48px;
  }
}
@media screen and (max-width: 750px) {
  main.about .pageDx .comingsoonArea {
    background-image: url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_comingsoon_sp.jpg");
    font-size: 30px;
  }
}
main.about .pageDx .comingsoonArea.active {
  opacity: 1;
}
main.about .pageDx .comingsoonArea:before {
  background: url("https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg_dotted_black.png");
  content: "";
  display: block;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}
main.about .pageDx .comingsoonArea p {
  line-height: 1.5;
  margin: 0;
  padding: 3em 0.5em;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .comingsoonArea p {
    padding: 6.5em 0.8em;
  }
}
main.about .pageDx .learn-area {
  background: #fff;
  margin: 80px 0 120px;
}
main.about .pageDx .learn-area__inner {
  width: 100%;
  height: 390px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 1024px;
  margin: 0 auto;
  border: solid 1px #0097a1;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg-learn.png) no-repeat;
  background-size: cover;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .learn-area__inner {
    height: auto;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/about/bg-learn-sp.png) no-repeat;
    background-size: cover;
    border: none;
  }
}
main.about .pageDx .learn-area__inner a {
  display: block;
  width: 100%;
  height: 100%;
  color: #000;
  text-decoration: none;
  font-weight: bold;
}
main.about .pageDx .learn-area__body {
  width: 48.82%;
  padding: 55px 0 0 5.89%;
  position: relative;
  z-index: 3;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .learn-area__body {
    width: 100%;
    padding: 12vw 10.66vw 73.86vw;
  }
}
main.about .pageDx .learn-area__title {
  font-size: 40px;
  margin-bottom: 19px;
  padding-left: 40px;
  position: relative;
  white-space: nowrap;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .learn-area__title {
    font-size: 8.53vw;
    padding-left: 0;
    margin-bottom: 8vw;
  }
}
main.about .pageDx .learn-area__title::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 2px;
  background: #448d89;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media screen and (max-width: 750px) {
  main.about .pageDx .learn-area__title::before {
    width: 100%;
    height: 1px;
    top: auto;
    bottom: -4vw;
  }
}
main.about .pageDx .learn-area__title::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media screen and (max-width: 750px) {
  main.about .pageDx .learn-area__title::after {
    width: calc(100% - 16vw);
    height: 1px;
    left: auto;
    right: 0;
    top: auto;
    bottom: -4vw;
  }
}
main.about .pageDx .learn-area__txt {
  font-size: 16px;
}
main.about .pageDx .learn-area__btn {
  width: 270px;
  height: 60px;
  font-size: 16px;
  line-height: 57px;
  text-align: center;
  background: linear-gradient(45deg, #00a2ad, #008d97);
  border-radius: 30px;
  color: #fff;
  margin-top: 35px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .learn-area__btn {
    width: 100%;
    margin-top: 6.66vw;
  }
}
main.about .pageDx .learn-area__btn::after {
  content: "";
  display: inline-block;
  width: 270px;
  height: 60px;
  background: linear-gradient(45deg, #0097a1, #007d85);
  border-radius: 30px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
  width: 100%;
}
main.about .pageDx .learn-area__btn span {
  margin-right: 10px;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
}
main.about .pageDx .learn-area__illust {
  width: 55.37%;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
}
@media screen and (max-width: 750px) {
  main.about .pageDx .learn-area__illust {
    width: 79.46vw;
    right: 50%;
    -webkit-transform: translate(50%) scale(1);
    transform: translate(50%) scale(1);
  }
  main.about .pageDx .learn-area__illust img {
    width: 100%;
    height: auto;
  }
}
main.about .pageDx .learn-area__inner a:hover .learn-area__btn .icon-arrow {
  -webkit-transform: translateX(5px);
  transform: translateX(5px);
}
main.about .pageDx .learn-area__inner a:hover .learn-area__btn::after {
  opacity: 1;
}
main.about .pageDx .learn-area__inner a:hover .learn-area__illust {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
@media screen and (max-width: 750px) {
  main.about .pageDx .learn-area__inner a:hover .learn-area__illust {
    -webkit-transform: translate(50%) scale(1);
    transform: translate(50%) scale(1);
  }
}

/*------------------------------------------------------
# learn
-------------------------------------------------------*/
.c-learn-inner {
  width: 100%;
  max-width: 1045px;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .c-learn-inner {
    padding: 0 20px;
  }
}

/*------------------------------------------------------
# p-learn-content
-------------------------------------------------------*/
.p-learn-content__title {
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  padding: 90px 0 50px;
}
@media only screen and (max-width: 768px) {
  .p-learn-content__title {
    font-size: 20px;
    padding: 13.33vw 0 5.33vw;
  }
}

.p-learn-content__label {
  font-size: 16px;
  color: #0097a1;
  font-family: "Roboto", sans-serif;
  font-style: italic;
  letter-spacing: 0;
  margin-right: 20px;
}
@media only screen and (max-width: 768px) {
  .p-learn-content__label {
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
    margin-right: 0;
  }
}

/*-------------------------------------------------------
# p-learn-intro
-------------------------------------------------------*/
.p-learn-intro {
  width: 100%;
  height: 605px;
  background: linear-gradient(-25deg, #deeeef, #cbe7e9);
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 1279px) {
  .p-learn-intro {
    height: auto;
    padding-bottom: 5.23%;
  }
}
@media only screen and (max-width: 768px) {
  .p-learn-intro {
    padding-bottom: 11.33vw;
  }
}
.p-learn-intro::before {
  content: "";
  width: 1280px;
  height: 100%;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/learn/bg-head-left.png) no-repeat left bottom;
  background-size: contain;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .p-learn-intro::before {
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/learn/bg-head-left-sp.png) no-repeat left 96.93vw;
    background-size: 99.86vw auto;
  }
}
.p-learn-intro::after {
  content: "";
  width: 1280px;
  height: 100%;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/learn/bg-head-right.png) no-repeat right top;
  background-size: auto 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
@media only screen and (max-width: 1279px) {
  .p-learn-intro::after {
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .p-learn-intro::after {
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/learn/bg-head-right-sp.png) no-repeat right top;
    background-size: cover;
  }
}

.p-learn-intro__inner {
  height: 238px;
  padding-top: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media only screen and (max-width: 1279px) {
  .p-learn-intro__inner {
    padding-top: 7.81%;
  }
}
@media only screen and (max-width: 768px) {
  .p-learn-intro__inner {
    height: auto;
    padding-top: 16.26vw;
  }
}

.p-learn-intro__title {
  width: 33.17%;
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
}
@media only screen and (max-width: 1279px) {
  .p-learn-intro__title {
    font-size: 3.9vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-learn-intro__title {
    width: 60.66vw;
    margin-bottom: 10.13vw;
    font-size: 7.46vw;
  }
}

.p-learn-intro__txt {
  width: 62.43%;
  font-size: 14px;
}
@media only screen and (max-width: 768px) {
  .p-learn-intro__txt {
    width: 60.66vw;
    font-size: 3.73vw;
    font-weight: bold;
  }
}

/*-------------------------------------------------------
# c-learn-pickup
-------------------------------------------------------*/
.c-learn-pickup {
  padding-top: 20px;
}
@media only screen and (max-width: 1279px) {
  .c-learn-pickup {
    padding-top: 1.56%;
  }
}

.c-learn-pickup__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.c-learn-pickup__thumb {
  width: 40%;
  margin: 0;
  padding: 0;
  border: solid 1px #fff;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .c-learn-pickup__thumb {
    width: 70vw;
    margin: 8vw auto 4vw;
  }
}
.c-learn-pickup__thumb img {
  width: 100%;
  height: auto;
}
.c-learn-pickup__thumb::before {
  content: "";
  display: inline-block;
  width: 152px;
  height: 122px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/learn/illust-medical.png) no-repeat left top;
  background-size: 100%;
  position: absolute;
  right: -38px;
  bottom: -70px;
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  .c-learn-pickup__thumb::before {
    content: none;
  }
}
.c-learn-pickup__thumb::after {
  content: "";
  display: inline-block;
  width: 191px;
  height: 162px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/learn/illust-distribution.png) no-repeat left top;
  background-size: 100%;
  position: absolute;
  left: -80px;
  bottom: -140px;
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  .c-learn-pickup__thumb::after {
    content: none;
  }
}

.c-learn-pickup__body {
  width: 55.12%;
  position: relative;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}
@media only screen and (max-width: 768px) {
  .c-learn-pickup__body {
    width: 100%;
    padding-bottom: 0;
  }
}

.c-learn-pickup__label {
  display: inline-block;
  background: #fff;
  color: #0097a1;
  font-size: 20px;
  font-family: "Roboto", sans-serif;
  font-style: italic;
  font-weight: bold;
  padding: 9px 15px;
  line-height: 1;
  border: solid 1px #c6dedf;
  vertical-align: top;
}
@media only screen and (max-width: 768px) {
  .c-learn-pickup__label {
    font-size: 3.2vw;
    padding: 1.33vw 2.66vw;
    margin-bottom: 1.33vw;
  }
}

.c-learn-pickup__title {
  font-size: 24px;
  font-weight: bold;
  color: #0097a1;
  padding-right: 7.07%;
}
@media only screen and (max-width: 1279px) {
  .c-learn-pickup__title {
    font-size: 1.87vw;
  }
}
@media only screen and (max-width: 768px) {
  .c-learn-pickup__title {
    font-size: 18px;
    font-size: 4.8vw;
    margin-bottom: 4vw;
    line-height: 1.75;
  }
}
@media only screen and (max-width: 768px) {
  .c-learn-pickup__title br {
    display: none;
  }
}

.c-learn-pickup__link {
  font-size: 16px;
}
@media only screen and (max-width: 768px) {
  .c-learn-pickup__link {
    text-align: right;
  }
}
.c-learn-pickup__link .c-icon-arrow-right {
  margin-right: 10px;
  margin-bottom: 0;
  transition: transform 0.4s;
}
.c-learn-pickup__link a {
  font-weight: bold;
  display: block;
}
@media only screen and (max-width: 768px) {
  .c-learn-pickup__link a {
    font-size: 16px;
  }
}
.c-learn-pickup__link a:hover {
  color: #0097a1;
}
.c-learn-pickup__link a:hover .c-icon-arrow-right {
  transform: translateX(5px);
}

/*-------------------------------------------------------
# c-learn-list
-------------------------------------------------------*/
.c-learn-list-wrap {
  border-bottom: solid 1px #e8eaea;
}
@media only screen and (max-width: 768px) {
  .c-learn-list-wrap {
    border-bottom: none;
  }
}
.c-learn-list-wrap:nth-child(2) {
  border-top: solid 1px #e8eaea;
}
@media only screen and (max-width: 768px) {
  .c-learn-list-wrap:nth-child(2) {
    border-bottom: none;
  }
}
.c-learn-list-wrap:last-child {
  margin-bottom: 120px;
}

@media only screen and (max-width: 768px) {
  .c-learn-list-wrap__inner {
    padding: 0;
  }
}

.c-learn-list {
  display: flex;
  flex-wrap: wrap;
}

.c-learn-list__item {
  width: 33.31%;
  border-right: solid 1px #e8eaea;
}
@media only screen and (max-width: 768px) {
  .c-learn-list__item {
    width: 100%;
    border-right: none;
    border-bottom: solid 1px #e8eaea;
    padding: 0;
  }
}
.c-learn-list__item:first-child {
  border-left: solid 1px #e8eaea;
}
@media only screen and (max-width: 768px) {
  .c-learn-list__item:first-child {
    border-left: none;
  }
}
.c-learn-list__item .c-icon-arrow-right {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  transform: translateX(0);
  transition: transform 0.4s;
}
@media only screen and (max-width: 768px) {
  .c-learn-list__item .c-icon-arrow-right {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    margin-top: -3px;
  }
}
.c-learn-list__item a {
  display: block;
  height: 100%;
  padding: 14.7% 8.82% 12.35% 8.82%;
}
@media only screen and (max-width: 768px) {
  .c-learn-list__item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }
}

.c-learn-list__thumb {
  width: 100%;
  margin: 0 0 20px;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .c-learn-list__thumb {
    width: 35.07%;
    margin-bottom: 0;
    padding: 30px 0;
  }
}
.c-learn-list__thumb img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 0.4s;
}

.c-learn-list__title {
  font-size: 16px;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .c-learn-list__title {
    width: 60.44%;
    font-size: 14px;
    margin-top: -5px;
    line-height: 1.7;
  }
}

.c-learn-list__item a:hover {
  color: #0097a1;
  background: #f8f8f8;
}
.c-learn-list__item a:hover .c-icon-arrow-right {
  transform: translateX(5px);
}
@media only screen and (max-width: 768px) {
  .c-learn-list__item a:hover .c-icon-arrow-right {
    transform: translateX(0.66vw);
  }
}
.c-learn-list__item a:hover .c-learn-list__thumb img {
  transform: scale(1.1);
}

/*------------------------------------------------------
# case
-------------------------------------------------------*/
/*------------------------------------------------------
# p-case-intro
-------------------------------------------------------*/
.p-case-intro {
  width: 100%;
  background: #f1fafb;
  padding: 80px 0 min(4.68vw, 60px);
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .p-case-intro {
    background: #f1fafb;
    padding: 40px 0 16vw;
  }
}
.p-case-intro::before {
  content: "";
  display: inline-block;
  width: min(20.93vw, 268px);
  height: min(23.28vw, 298px);
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/illust-mv-center.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: calc(50% + 90px);
  bottom: -10px;
  transform: translateX(-50%);
  z-index: 3;
}
@media only screen and (max-width: 768px) {
  .p-case-intro::before {
    content: "";
    display: inline-block;
    width: min(98vw, 367.5px);
    height: min(145.86vw, 547px);
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/illust-mv-sp.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 58.66vw;
    transform: translateX(-50%);
    z-index: 2;
  }
}
.p-case-intro::after {
  content: "";
  display: inline-block;
  width: min(45vw, 576px);
  height: min(56.01vw, 717px);
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/illust-mv-right.png) no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .p-case-intro::after {
    display: none;
  }
}

main.retail .p-case-intro {
  overflow: hidden;
}
main.retail .p-case-intro::before {
  width: min(25vw, 320px);
  height: min(23.82vw, 305px);
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/retail/illust-mv-center.png);
  left: calc(50% + 133px);
  bottom: min(4.68vw, 60px);
}
@media only screen and (max-width: 768px) {
  main.retail .p-case-intro::before {
    width: min(89.33vw, 335px);
    height: min(81.46vw, 305.5px);
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/retail/illust-mv-sp.png);
    left: 50%;
    top: 58.66vw;
    transform: translateX(-50%);
  }
}
main.retail .p-case-intro::after {
  width: min(36.4vw, 466px);
  height: min(47.73vw, 611px);
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/retail/illust-mv-right.png);
  right: 0;
  bottom: -15px;
}

main.service .p-case-intro {
  overflow: hidden;
}
main.service .p-case-intro::before {
  width: min(25.62vw, 328px);
  height: min(24.45vw, 313px);
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/service/illust-mv-center.png);
  left: calc(50% + 148px);
  bottom: min(7.42vw, 95px);
}
@media only screen and (max-width: 768px) {
  main.service .p-case-intro::before {
    width: min(85.46vw, 320.5px);
    height: min(79.6vw, 298.5px);
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/service/illust-mv-sp.png);
    left: 50%;
    top: 58.66vw;
    transform: translateX(-50%);
  }
}
main.service .p-case-intro::after {
  width: min(35.78vw, 458px);
  height: min(46.64vw, 597px);
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/service/illust-mv-right.png);
  right: 0;
  bottom: -24px;
}

.p-case-intro__inner {
  z-index: 2;
}

.p-case-intro__logo {
  width: min(5vw, 64px);
  height: min(6.56vw, 84px);
}
@media only screen and (max-width: 768px) {
  .p-case-intro__logo {
    width: 10.66vw;
    height: 13.86vw;
  }
}

.p-case-intro__title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .p-case-intro__title {
    margin-top: 10px;
  }
}

.p-case-intro__title-left {
  color: #0097a1;
  font-weight: bold;
  font-size: min(5.62vw, 72px);
  letter-spacing: 0.12em;
  line-height: 1;
  background: #fff;
  border: solid 1px #0097a1;
  padding: min(0.78vw, 10px) min(3.51vw, 45px) min(1.56vw, 20px);
}
@media only screen and (max-width: 768px) {
  .p-case-intro__title-left {
    font-size: 9.6vw;
    padding: 1.33vw 4.66vw 2.66vw;
  }
}
.p-case-intro__title-left span {
  font-size: min(3.12vw, 40px);
}
@media only screen and (max-width: 768px) {
  .p-case-intro__title-left span {
    font-size: 5.33vw;
  }
}

.p-case-intro__title-center {
  padding: 0 30px;
}
@media only screen and (max-width: 768px) {
  .p-case-intro__title-center {
    width: 100%;
    text-align: center;
  }
}
.p-case-intro__title-center img {
  width: min(5vw, 64px);
  display: inline-block;
}
@media only screen and (max-width: 768px) {
  .p-case-intro__title-center img {
    width: 8.53vw;
    margin-top: 2.66vw;
  }
}

.p-case-intro__title-right {
  font-size: min(2.96vw, 38px);
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .p-case-intro__title-right {
    font-size: 6.4vw;
  }
}
.p-case-intro__title-right span {
  font-size: min(2.34vw, 30px);
}
@media only screen and (max-width: 768px) {
  .p-case-intro__title-right span {
    font-size: 4vw;
  }
}

.p-case-intro-description {
  width: 45.11%;
  margin-left: 56px;
  margin-top: min(4.6vw, 59px);
  background: rgba(255, 255, 255, 0.7);
  padding: 60px 40px;
}
@media only screen and (max-width: 768px) {
  .p-case-intro-description {
    width: 100%;
    margin-left: 0;
    padding: min(148vw, 555px) 0 0;
    background: none;
  }
}

@media only screen and (max-width: 768px) {
  main.retail .p-case-intro-description {
    padding-top: min(80vw, 300px);
  }
}

@media only screen and (max-width: 768px) {
  main.service .p-case-intro-description {
    padding-top: min(80vw, 300px);
  }
}

.p-case-intro-description__txt {
  font-size: 16px;
}
@media only screen and (max-width: 768px) {
  .p-case-intro-description__txt {
    font-weight: bold;
  }
}
.p-case-intro-description__txt + .p-case-intro-description__txt {
  margin-top: 2em;
}
@media only screen and (max-width: 768px) {
  .p-case-intro-description__txt + .p-case-intro-description__txt {
    margin-top: 1em;
  }
}

.p-case-intro-description__btn {
  max-width: 342px;
  margin-top: min(4.29vw, 55px);
}
@media only screen and (max-width: 768px) {
  .p-case-intro-description__btn {
    max-width: none;
  }
}
.p-case-intro-description__btn a {
  padding: 15px 0;
  border-radius: 43px;
}
.p-case-intro-description__btn a::after {
  border-radius: 43px;
}

/*------------------------------------------------------
# p-case-pickup
-------------------------------------------------------*/
.p-case-pickup {
  border-top: solid 1px #e8eaea;
  position: relative;
  padding: min(5.46vw, 70px) 0 min(2.96vw, 38px);
}
@media only screen and (max-width: 768px) {
  .p-case-pickup {
    padding: 10.66vw 0 16vw;
  }
}

.p-case-pickup__inner::before {
  content: "PICKUP";
  font-size: min(15.62vw, 200px);
  font-weight: bold;
  color: #f8f8f8;
  font-family: "Roboto", sans-serif;
  font-style: italic;
  line-height: 1;
  position: absolute;
  left: -60px;
  top: -105px;
  z-index: -1;
}
@media only screen and (max-width: 1279px) {
  .p-case-pickup__inner::before {
    top: -7.43vw;
    left: -4.69vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-pickup__inner::before {
    font-size: 26.66vw;
    top: auto;
    bottom: -20vw;
    left: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-pickup__inner {
    padding: 0;
  }
}

@media only screen and (max-width: 768px) {
  .p-case-pickup-list-scroll-wrap {
    width: 100%;
    overflow-x: scroll;
  }
}

.p-case-pickup-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media only screen and (max-width: 768px) {
  .p-case-pickup-list {
    flex-wrap: nowrap;
    width: calc(195% - 40px);
    padding: 0 20px;
  }
}

.p-case-pickup-list__item {
  width: 30.57%;
}
@media only screen and (max-width: 768px) {
  .p-case-pickup-list__item {
    width: 53.86vw;
  }
}

.p-case-pickup-list__title {
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .p-case-pickup-list__title {
    margin-top: 1.73vw;
    font-size: 14px;
    line-height: 1.7;
    padding-bottom: 15px;
  }
}
.p-case-pickup-list__title i {
  margin-right: 5px;
  transition: transform 0.4s;
}

.p-case-pickup-list__thumb {
  overflow: hidden;
}
.p-case-pickup-list__thumb img {
  transition: transform 0.4s;
}

.p-case-pickup-list__item a:hover .p-case-pickup-list__thumb img {
  transform: scale(1.1);
}
.p-case-pickup-list__item a:hover .p-case-pickup-list__title i {
  transform: translateX(3px);
}

/*------------------------------------------------------
# p-case-problem
-------------------------------------------------------*/
.p-case-problem {
  border-top: solid 1px #e8eaea;
  overflow: hidden;
}

.p-case-problem__inner {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.p-case-problem__inner::before {
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  background: #f8f8f8;
  left: 38.76%;
  top: 0;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .p-case-problem__inner::before {
    display: none;
  }
}

.p-case-problem__title {
  width: 38.76%;
  font-size: min(2.5vw, 32px);
  font-weight: bold;
  line-height: 1.5;
  margin-top: 150px;
  padding-right: 15px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-case-problem__title {
    width: 100%;
    font-size: min(5.33vw, 20px);
    margin-top: 27px;
    padding-right: 0;
  }
}
.p-case-problem__title::after {
  content: "";
  display: inline-block;
  width: min(15.85vw, 203px);
  height: min(12.81vw, 164px);
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/illust-problem.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: min(5.85vw, 75px);
  top: min(12.5vw, 160px);
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  .p-case-problem__title::after {
    width: 27.06vw;
    height: 21.86vw;
    left: 50%;
    top: auto;
    bottom: -25.34vw;
    transform: translateX(-50%);
  }
}

.p-case-problem__label {
  display: block;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  color: #0097a1;
  margin-bottom: 15px;
}
@media only screen and (max-width: 768px) {
  .p-case-problem__label {
    font-size: 12px;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 0;
    margin-bottom: 7px;
  }
}

.p-case-problem-list {
  width: 56.38%;
  padding: 60px 0;
}
@media only screen and (max-width: 768px) {
  .p-case-problem-list {
    width: 100%;
    padding: 18.66vw 0 0;
  }
}

@media only screen and (max-width: 768px) {
  .p-case-problem-list__item {
    width: 100vw;
    background: #f8f8f8;
    margin-left: -20px;
  }
}
.p-case-problem-list__item a {
  padding: min(3.51vw, 45px) min(3.12vw, 40px) min(3.12vw, 40px) 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-case-problem-list__item a {
    padding: 10.66vw 20px;
    align-items: flex-start;
  }
}
.p-case-problem-list__item + .p-case-problem-list__item {
  border-top: solid 1px #e8eaea;
}

.p-case-problem-list__thumb {
  width: 42.66%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;
}
@media only screen and (max-width: 768px) {
  .p-case-problem-list__thumb {
    width: 29.06vw;
    padding-left: 0;
    position: relative;
  }
}

@media only screen and (max-width: 768px) {
  .p-case-problem-list__thumb--01 {
    width: 32.66vw;
    left: -13px;
    top: 15px;
  }
}

@media only screen and (max-width: 768px) {
  .p-case-problem-list__thumb--03 {
    left: -13px;
    top: -5px;
  }
}

@media only screen and (max-width: 768px) {
  main.retail .p-case-problem-list__thumb--01 {
    width: 29.06vw;
    left: 0;
    top: 0;
  }
}

@media only screen and (max-width: 768px) {
  main.retail .p-case-problem-list__thumb--03 {
    left: 0;
    top: 0;
  }
}

.p-case-problem-list__body {
  width: 54.16%;
}
@media only screen and (max-width: 768px) {
  .p-case-problem-list__body {
    width: 57.33vw;
  }
}

.p-case-problem-list__title {
  font-size: min(1.87vw, 24px);
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: 13px;
  line-height: 1.3;
}
@media only screen and (max-width: 768px) {
  .p-case-problem-list__title {
    font-size: min(4.8vw, 18px);
  }
}

.p-case-problem-list__no {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  color: #0097a1;
  margin-right: 12px;
}
@media only screen and (max-width: 768px) {
  .p-case-problem-list__no {
    font-size: 12px;
  }
}

.p-case-problem-list__txt {
  font-size: 14px;
  letter-spacing: 0;
  color: #000;
}

.p-case-problem-list__link {
  font-weight: bold;
  font-size: 14px;
  color: #0097a1;
  margin-top: 25px;
}
@media only screen and (max-width: 768px) {
  .p-case-problem-list__link {
    font-size: 16px;
    color: #000;
    margin-top: 20px;
  }
}
.p-case-problem-list__link i {
  margin-right: 10px;
  transition: transform 0.4s;
}

.p-case-problem-list__item a:hover {
  background: #fff;
  border-radius: 6px;
  box-shadow: 10px 0 40px rgba(186, 186, 186, 0.3);
}
.p-case-problem-list__item a:hover .p-case-problem-list__link i {
  transform: translateY(5px);
}

/*------------------------------------------------------
# p-case-solutions
-------------------------------------------------------*/
.p-case-solutions {
  border-top: solid 1px #e8eaea;
  padding-bottom: 120px;
}
@media only screen and (max-width: 768px) {
  .p-case-solutions {
    border: none;
    padding-bottom: 0;
  }
}

.p-case-solutions__header {
  background: linear-gradient(180deg, rgb(248, 248, 248) 20%, rgb(171, 231, 235) 79%, rgb(0, 162, 173) 100%);
  position: relative;
  width: 100%;
  padding-bottom: 16%;
}
@media only screen and (max-width: 768px) {
  .p-case-solutions__header {
    padding-bottom: min(35.2vw, 132px);
  }
}
.p-case-solutions__header::after {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 11.4%;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/bg-solutions-header.svg) no-repeat center bottom;
  position: absolute;
  left: 0;
  bottom: -0.4%;
}
@media only screen and (max-width: 768px) {
  .p-case-solutions__header::after {
    padding-bottom: min(19.46vw, 73px);
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/bg-solutions-header-sp.svg);
  }
}
.p-case-solutions__header::before {
  content: "";
  width: min(28.28vw, 362px);
  height: min(12.26vw, 157px);
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/thumb-solutions-title.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  bottom: 20px;
  left: 51%;
  transform: translate(-50%);
}
@media only screen and (max-width: 1279px) {
  .p-case-solutions__header::before {
    bottom: 1.17vw;
  }
}
@media only screen and (max-width: 767px) and (min-width: 376px) {
  .p-case-solutions__header::before {
    bottom: 8px;
  }
}
@media only screen and (max-width: 375px) {
  .p-case-solutions__header::before {
    bottom: 5.8vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-solutions__header::before {
    width: min(52.13vw, 195.5px);
    height: min(24.66vw, 92.5px);
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/thumb-solutions-title-sp.png);
    left: 52%;
  }
}

main.retail .p-case-solutions__header::before,
main.service .p-case-solutions__header::before {
  content: "";
  width: min(17.5vw, 224px);
  height: min(9.84vw, 126px);
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/service/thumb-solutions-title.png);
  bottom: 32px;
  left: 50%;
}
@media only screen and (max-width: 768px) {
  main.retail .p-case-solutions__header::before,
  main.service .p-case-solutions__header::before {
    width: min(41.6vw, 156px);
    height: min(23.46vw, 88px);
  }
}

.p-case-solutions__title {
  max-height: 330px;
  padding: 80px 0 0;
  font-size: min(2.5vw, 32px);
  color: #0097a1;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-case-solutions__title {
    font-size: min(5.33vw, 20px);
    padding: min(16vw, 60px) 0 0;
  }
}

.p-case-solutions__label {
  display: block;
  width: 100%;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  color: #0097a1;
  margin-bottom: 15px;
}
@media only screen and (max-width: 768px) {
  .p-case-solutions__label {
    font-size: 12px;
    margin-bottom: 5px;
  }
}

.p-case-solutions-item {
  width: 100%;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-case-solutions-item {
    padding-top: 50px;
    margin-top: -50px;
  }
}

.p-case-solutions-item__inner {
  max-width: 1024px;
  padding: 100px 0 65px 60px;
  margin: 0 auto;
  border-bottom: solid 1px #e8eaea;
  position: relative;
}
@media only screen and (max-width: 1279px) {
  .p-case-solutions-item__inner {
    padding-left: 80px;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-solutions-item__inner {
    padding: 13.33vw 20px;
  }
}

.p-case-solutions-item-index {
  width: 126px;
  border-left: 2px solid #0097a1;
  background: #f1fafb;
  position: absolute;
  left: 0;
  top: 70px;
  text-align: center;
  padding: 25px 0 50px;
}
@media only screen and (max-width: 1279px) {
  .p-case-solutions-item-index {
    width: 67px;
    padding: 22.5px 0 32px;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-solutions-item-index {
    width: min(17.86vw, 67px);
    min-height: min(58.93vw, 221px);
    top: calc(13.33vw + 50px);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.p-case-solutions-item-index--01::before {
  content: "";
  width: 105px;
  height: 92px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/illust-solution01.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -24px;
  right: -37px;
}
@media only screen and (max-width: 1279px) {
  .p-case-solutions-item-index--01::before {
    width: 52.5px;
    height: 46px;
    bottom: auto;
    right: auto;
    top: -23px;
    left: 50%;
    transform: translateX(-50%);
  }
}

main.retail .p-case-solutions-item-index--01::before {
  width: 90px;
  height: 90px;
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/retail/illust-solution01.png);
  bottom: -30px;
  right: -30px;
}
@media only screen and (max-width: 1279px) {
  main.retail .p-case-solutions-item-index--01::before {
    width: 50px;
    height: 50px;
    top: -32px;
    bottom: auto;
  }
}

main.service .p-case-solutions-item-index--01::before {
  width: 90px;
  height: 100px;
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/service/illust-solution02.png);
  bottom: -40px;
  right: -30px;
}
@media only screen and (max-width: 1279px) {
  main.service .p-case-solutions-item-index--01::before {
    width: 50px;
    height: 56px;
    top: -40px;
    bottom: auto;
  }
}

.p-case-solutions-item-index--02::before {
  content: "";
  width: 87px;
  height: 102px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/illust-solution02.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -15px;
  right: -48px;
}
@media only screen and (max-width: 1279px) {
  .p-case-solutions-item-index--02::before {
    width: 36px;
    height: 42.5px;
    bottom: auto;
    right: auto;
    top: -29px;
    left: 50%;
    transform: translateX(-50%);
  }
}

main.retail .p-case-solutions-item-index--02::before {
  width: 90px;
  height: 100px;
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/retail/illust-solution02.png);
  bottom: -30px;
  right: -30px;
}
@media only screen and (max-width: 1279px) {
  main.retail .p-case-solutions-item-index--02::before {
    width: 50px;
    height: 56px;
    top: -40px;
    bottom: auto;
  }
}

main.service .p-case-solutions-item-index--02::before {
  width: 90px;
  height: 101px;
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/service/illust-solution01.png);
  bottom: -30px;
  right: -30px;
}
@media only screen and (max-width: 1279px) {
  main.service .p-case-solutions-item-index--02::before {
    width: 50px;
    height: 56px;
    top: -40px;
    bottom: auto;
  }
}

.p-case-solutions-item-index--03::before {
  content: "";
  width: 86px;
  height: 89px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/illust-solution03.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -20px;
  right: -16px;
}
@media only screen and (max-width: 1279px) {
  .p-case-solutions-item-index--03::before {
    width: 43px;
    height: 44.5px;
    bottom: auto;
    right: auto;
    top: -33px;
    left: 50%;
    transform: translateX(-50%);
  }
}

main.retail .p-case-solutions-item-index--03::before {
  width: 90px;
  height: 108px;
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/retail/illust-solution03.png);
  bottom: -30px;
  right: -30px;
}
@media only screen and (max-width: 1279px) {
  main.retail .p-case-solutions-item-index--03::before {
    width: 46px;
    height: 55px;
    top: -45px;
    bottom: auto;
  }
}

main.service .p-case-solutions-item-index--03::before {
  width: 90px;
  height: 94px;
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/service/illust-solution03.png);
  bottom: -30px;
  right: -30px;
}
@media only screen and (max-width: 1279px) {
  main.service .p-case-solutions-item-index--03::before {
    width: 50px;
    height: 52px;
    top: -43px;
    bottom: auto;
  }
}

.p-case-solutions-item-index--04::before {
  content: "";
  width: 90px;
  height: 90px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/illust-solution03.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -20px;
  right: -16px;
}
@media only screen and (max-width: 1279px) {
  .p-case-solutions-item-index--04::before {
    width: 43px;
    height: 44.5px;
    bottom: auto;
    right: auto;
    top: -33px;
    left: 50%;
    transform: translateX(-50%);
  }
}

main.retail .p-case-solutions-item-index--04::before {
  content: "";
  width: 90px;
  height: 99px;
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/retail/illust-solution04.png);
  bottom: -30px;
  right: -30px;
}
@media only screen and (max-width: 1279px) {
  main.retail .p-case-solutions-item-index--04::before {
    width: 50px;
    height: 50px;
    top: -40px;
    bottom: auto;
  }
}

main.service .p-case-solutions-item-index--04::before {
  width: 90px;
  height: 95px;
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/service/illust-solution04.png);
  bottom: -30px;
  right: -30px;
}
@media only screen and (max-width: 1279px) {
  main.service .p-case-solutions-item-index--04::before {
    width: 50px;
    height: 53px;
    top: -43px;
    bottom: auto;
  }
}

.p-case-solutions-item-index__label {
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  color: #0097a1;
  line-height: 1;
}
@media only screen and (max-width: 1279px) {
  .p-case-solutions-item-index__label {
    font-size: 10px;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 0;
  }
}

.p-case-solutions-item-index__no {
  font-size: 40px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  color: #0097a1;
  line-height: 1;
  margin-top: -8px;
}
@media only screen and (max-width: 1279px) {
  .p-case-solutions-item-index__no {
    font-size: 30px;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 0;
    margin-top: -3px;
  }
}

.p-case-solutions-item-index__title {
  font-size: 14px;
  font-weight: bold;
  writing-mode: vertical-rl;
  display: inline-block;
  margin-top: 10px;
}
.p-case-solutions-item-index__title .txt-combine {
  text-combine-upright: all;
  -webkit-text-combine: horizontal;
}
@media only screen and (max-width: 1279px) {
  .p-case-solutions-item-index__title {
    font-size: min(3.2vw, 12px);
  }
}

.p-case-solutions-item__label {
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  color: #0097a1;
  display: block;
  position: relative;
  margin-bottom: 15px;
  line-height: 2.5;
}
.p-case-solutions-item__label::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background: #0097a1;
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 1279px) {
  .p-case-solutions-item__label {
    margin-left: 40px;
  }
}

@media only screen and (max-width: 768px) {
  .p-case-solutions-item__label--sp {
    font-size: 10px;
    margin-left: 0;
    margin-bottom: 0;
  }
  .p-case-solutions-item__label--sp::before {
    width: 15px;
    height: 1px;
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.p-case-solutions-item__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.p-case-solutions-item__body {
  width: 46.88%;
}
@media only screen and (max-width: 768px) {
  .p-case-solutions-item__body {
    order: 2;
    width: 100%;
    margin-top: 6.66vw;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.p-case-solutions-item__title {
  font-size: min(2.18vw, 28px);
  font-weight: bold;
  line-height: 1.5;
  margin-top: -10px;
}
.p-case-solutions-item__title .txt-highlight {
  color: #0097a1;
}
@media only screen and (max-width: 768px) {
  .p-case-solutions-item__title {
    margin-top: 0;
    font-size: 18px;
    line-height: 2;
  }
}

.p-case-solutions-item__txt {
  margin-top: 25px;
  font-size: 14px;
  letter-spacing: 0;
}
@media only screen and (max-width: 768px) {
  .p-case-solutions-item__txt {
    margin-top: 13px;
  }
}

.p-case-solutions-item__link {
  padding-top: 35px;
}
@media only screen and (max-width: 768px) {
  .p-case-solutions-item__link {
    padding-top: 25px;
  }
}
.p-case-solutions-item__link a {
  font-weight: bold;
  font-size: 16px;
}
@media only screen and (max-width: 768px) {
  .p-case-solutions-item__link a {
    font-size: min(4.26vw, 16px);
    letter-spacing: 0;
    margin-left: -0.4em;
    white-space: nowrap;
  }
}
.p-case-solutions-item__link a i {
  margin-right: 10px;
  transition: transform 0.4s;
}
@media only screen and (max-width: 768px) {
  .p-case-solutions-item__link a i {
    margin-right: 8px;
  }
}
.p-case-solutions-item__link a:hover .c-icon-arrow-right {
  transform: translateX(5px);
}
.p-case-solutions-item__link a:hover .c-icon-arrow-bottom-large {
  transform: translateY(5px);
}

.p-case-solutions-item__thumb {
  width: 46.88%;
}
@media only screen and (max-width: 768px) {
  .p-case-solutions-item__thumb {
    order: 1;
    width: 100%;
    text-align: right;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-solutions-item__thumb img {
    display: inline-block;
    width: calc(100% - min(17.86vw, 67px));
  }
}

.p-case-solutions-item__content--reverse .p-case-solutions-item__body {
  order: 2;
}
.p-case-solutions-item__content--reverse .p-case-solutions-item__thumb {
  order: 1;
}

/*------------------------------------------------------
# p-case-about
-------------------------------------------------------*/
.p-case-about {
  display: flex;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
}

.p-case-about__thumb--left {
  width: calc((100% - 512px) / 2);
}
@media only screen and (max-width: 768px) {
  .p-case-about__thumb--left {
    width: 100%;
  }
}
.p-case-about__thumb--left::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/thumb-about01.jpg) no-repeat center top;
  background-size: cover;
}
@media only screen and (max-width: 768px) {
  .p-case-about__thumb--left::before {
    height: 84.4vw;
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/thumb-about-sp.jpg);
  }
}

main.retail .p-case-about__thumb--left::before {
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/retail/thumb-about01.jpg);
}
@media only screen and (max-width: 768px) {
  main.retail .p-case-about__thumb--left::before {
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/retail/thumb-about-sp.jpg);
  }
}

main.retail .p-case-about__thumb--right::before {
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/retail/thumb-about02.jpg);
}

main.service .p-case-about__thumb--left::before {
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/service/thumb-about01.jpg);
}
@media only screen and (max-width: 768px) {
  main.service .p-case-about__thumb--left::before {
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/service/thumb-about-sp.jpg);
  }
}

main.service .p-case-about__thumb--right::before {
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/service/thumb-about02.jpg);
}

.p-case-about__thumb--right {
  width: calc((100% - 512px) / 2);
}
.p-case-about__thumb--right::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/thumb-about02.jpg) no-repeat center top;
  background-size: cover;
}
@media only screen and (max-width: 768px) {
  .p-case-about__thumb--right::before {
    content: none;
  }
}

.p-case-about__body {
  max-width: 512px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 80px;
  background: #f1fafb;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-case-about__body {
    max-width: 100%;
    background: #fff;
    padding-bottom: 50px;
  }
}

.p-case-about__title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  padding-top: 110px;
}
@media only screen and (max-width: 768px) {
  .p-case-about__title {
    font-size: min(4.8vw, 18px);
    line-height: 1.8;
    padding-top: min(10.66vw, 40px);
  }
}
.p-case-about__title .txt-highlight {
  font-size: 36px;
  font-weight: bold;
  color: #0097a1;
}
@media only screen and (max-width: 768px) {
  .p-case-about__title .txt-highlight {
    font-size: min(6.4vw, 24px);
  }
}

.p-case-about__label {
  text-align: center;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  color: #0097a1;
  margin: 15px 0;
}
@media only screen and (max-width: 768px) {
  .p-case-about__label {
    font-size: 10px;
  }
}

.p-case-about__txt {
  padding: 0 40px;
  font-size: 14px;
  letter-spacing: 0;
}
@media only screen and (max-width: 768px) {
  .p-case-about__txt {
    padding: 0 20px;
  }
}

.p-case-about__link {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
}
@media only screen and (max-width: 768px) {
  .p-case-about__link {
    margin-top: 35px;
  }
}
.p-case-about__link i {
  margin-right: 10px;
  transition: transform 0.4s;
}
.p-case-about__link a:hover i {
  transform: translateX(5px);
}

/*------------------------------------------------------
# p-case-purpose
-------------------------------------------------------*/
.p-case-purpose {
  padding: 115px 0 0;
  position: relative;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/bg-line.png) no-repeat;
  background-size: 425px 325px;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose {
    padding: 88px 0 0;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/bg-line-sp.png) no-repeat;
    background-size: 66.93vw 58.8vw;
  }
}

.p-case-purpose__inner {
  max-width: 1044px;
  z-index: 3;
}

@media only screen and (max-width: 768px) {
  .p-case-purpose__inner--02 {
    background: #f1fafb;
    padding-top: 50px;
    padding-bottom: 40px;
  }
}

.p-case-purpose__title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 60px;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose__title {
    font-size: min(5.33vw, 20px);
    letter-spacing: 0;
    white-space: nowrap;
    margin-bottom: 30px;
  }
}
.p-case-purpose__title .txt-highlight {
  display: inline-block;
  font-size: 48px;
  color: #0097a1;
  margin-right: 10px;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose__title .txt-highlight {
    font-size: min(7.46vw, 28px);
    display: block;
    margin-bottom: -10px;
  }
}

.p-case-purpose__label {
  display: block;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  color: #0097a1;
  line-height: 1;
  margin-bottom: 5px;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose__label {
    font-size: 12px;
    margin-bottom: 0;
  }
}

@media print, screen and (min-width: 769px) {
  .p-case-purpose-item-wrap {
    width: 1196px;
    height: 1083px;
    margin: 0 auto;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/bg-construct.png) no-repeat center bottom;
    background-size: 1136px;
    position: relative;
  }
}
@media only screen and (max-width: 1196px) and (min-width: 769px) {
  .p-case-purpose-item-wrap {
    width: 100%;
    height: 0;
    padding-bottom: 90.55%;
    background-size: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item-wrap {
    height: auto;
    padding-bottom: 0;
  }
}

@media print, screen and (min-width: 769px) {
  main.retail .p-case-purpose-item-wrap {
    width: 100%;
    max-width: 1224px;
    height: auto;
    margin: 0 auto;
    background: none;
  }
}
@media only screen and (max-width: 1196px) and (min-width: 769px) {
  main.retail .p-case-purpose-item-wrap {
    width: 100%;
    height: auto;
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 768px) {
  main.retail .p-case-purpose-item-wrap {
    height: auto;
    padding-bottom: 0;
  }
}

@media print, screen and (min-width: 769px) {
  main.service .p-case-purpose-item-wrap {
    width: 100%;
    max-width: 1220px;
    height: auto;
    margin: 0 auto;
    background: none;
  }
}
@media only screen and (max-width: 1196px) and (min-width: 769px) {
  main.service .p-case-purpose-item-wrap {
    width: 100%;
    height: auto;
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 768px) {
  main.service .p-case-purpose-item-wrap {
    height: auto;
    padding-bottom: 0;
  }
}

.p-case-purpose-item {
  position: absolute;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item {
    position: static;
    background: #dceff1;
    padding: 40px 20px 42px;
    border-bottom: solid 1px #b2d3d6;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item:first-child {
    background: none;
    position: relative;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item:first-child::before {
    content: "";
    display: block;
    width: 100vw;
    height: 28.53vw;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/bg-construct-item-top-sp.png) no-repeat center top;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 34vw;
    z-index: -1;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item:first-child::after {
    content: "";
    display: block;
    width: 100vw;
    height: calc(100% - 62vw);
    background: #dceff1;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item:last-child {
    position: relative;
    padding-bottom: calc(45.06vw + 40px);
    border-bottom: none;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item:last-child::after {
    content: "";
    display: block;
    width: 100vw;
    height: 45.06vw;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/bg-construct-item-bottom-sp.png) no-repeat center top;
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}

.p-case-purpose-item__content {
  display: flex;
  background: #fff;
  box-shadow: 7px 7px 10px rgba(186, 186, 186, 0.4);
  border: solid 4px #0097a1;
  border-radius: 10px;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item__content {
    border: solid 2px #0097a1;
    border-radius: 5px;
  }
}

.p-case-purpose-item__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: solid 2px #0097a1;
  width: 128px;
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 1196px) and (min-width: 769px) {
  .p-case-purpose-item__thumb {
    width: min(10vw, 128px);
  }
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item__thumb {
    width: 26.66vw;
    border-right: solid 1px #0097a1;
  }
}
@media only screen and (max-width: 1196px) and (min-width: 769px) {
  .p-case-purpose-item__thumb img {
    width: 75%;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item__thumb img {
    width: 70px;
  }
}

.p-case-purpose-item__image {
  display: none;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item__image {
    display: block;
    text-align: center;
    margin: 0;
    padding: 0;
  }
}

.p-case-purpose-item__body {
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item__body {
    width: calc(100% - 26.66vw);
  }
}

.p-case-purpose-item__label {
  background: #dceff1;
  height: min(3.9vw, 50px);
  line-height: min(3.9vw, 50px);
  font-size: min(1.25vw, 16px);
  font-weight: bold;
}
.p-case-purpose-item__label::before {
  content: "";
  width: 14px;
  height: 20px;
  display: inline-block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/icon-light.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item__label {
    height: min(13.33vw, 50px);
    line-height: min(13.33vw, 50px);
    font-size: min(4.26vw, 16px);
  }
}

.p-case-purpose-item__name {
  height: min(4.45vw, 57px);
  line-height: min(4.45vw, 57px);
  font-size: min(1.87vw, 24px);
  font-weight: bold;
  color: #0097a1;
  padding: 0 min(4.68vw, 60px);
  transition: opacity 0.4s;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item__name {
    height: min(15.2vw, 57px);
    line-height: min(15.2vw, 57px);
    font-size: 20px;
    padding: 0;
  }
}

.p-case-purpose-item__more {
  height: min(3.9vw, 50px);
  line-height: min(3.9vw, 50px);
  background: linear-gradient(45deg, #00a2ad, #008d97);
  font-size: min(1.25vw, 16px);
  font-weight: bold;
  color: #fff;
}
.p-case-purpose-item__more i {
  margin-right: 11px;
  transition: all 0.4s;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item__more {
    height: min(13.33vw, 50px);
    line-height: min(13.33vw, 50px);
    font-size: min(4.26vw, 16px);
  }
}

.p-case-purpose-item__link {
  display: block;
}
.p-case-purpose-item__link:hover .p-case-purpose-item__name {
  opacity: 0.7;
}
.p-case-purpose-item__link:hover .p-case-purpose-item__more i {
  transform: translateX(5px);
}

@media print, screen and (min-width: 769px) {
  .p-case-purpose-item--pocket2 {
    left: 50%;
    top: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item--pocket2 .p-case-purpose-item__name {
    font-size: 17px;
  }
}
@media only screen and (max-width: 375px) {
  .p-case-purpose-item--pocket2 .p-case-purpose-item__name {
    font-size: 4.5vw;
  }
}

@media print, screen and (min-width: 769px) {
  .p-case-purpose-item--entrance2 {
    right: 30px;
    top: 200px;
  }
}
@media only screen and (max-width: 1196px) and (min-width: 769px) {
  .p-case-purpose-item--entrance2 {
    right: 0;
    top: 18.46%;
  }
}

@media print, screen and (min-width: 769px) {
  .p-case-purpose-item--doboreko {
    left: 160px;
    top: 60px;
  }
}
@media only screen and (max-width: 1196px) and (min-width: 769px) {
  .p-case-purpose-item--doboreko {
    left: 14.77%;
    top: 5.54%;
  }
}
.p-case-purpose-item--doboreko .p-case-purpose-item__image img {
  width: 276.5px;
  margin: 0 auto;
}

@media print, screen and (min-width: 769px) {
  .p-case-purpose-item--crane {
    right: -30px;
    top: 585px;
  }
}
@media only screen and (max-width: 1196px) and (min-width: 769px) {
  .p-case-purpose-item--crane {
    right: 0;
    top: 51%;
  }
}
@media print, screen and (min-width: 769px) {
  .p-case-purpose-item--crane .p-case-purpose-item__thumb img {
    width: auto;
    height: 103px;
  }
}
@media only screen and (max-width: 1196px) and (min-width: 769px) {
  .p-case-purpose-item--crane .p-case-purpose-item__thumb img {
    width: auto;
    height: min(8.12vw, 104px);
  }
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item--crane .p-case-purpose-item__thumb img {
    width: 46.5px;
  }
}

@media print, screen and (min-width: 769px) {
  .p-case-purpose-item--safiego {
    left: 0;
    top: 313px;
  }
}
@media only screen and (max-width: 1196px) and (min-width: 769px) {
  .p-case-purpose-item--safiego {
    left: 0;
    top: 28.9%;
  }
}
@media print, screen and (min-width: 769px) {
  .p-case-purpose-item--safiego .p-case-purpose-item__name {
    padding: 0 50px;
  }
}
.p-case-purpose-item--safiego .p-case-purpose-item__thumb {
  align-items: flex-end;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-item--safiego .p-case-purpose-item__thumb img {
    width: 76px;
  }
}

.p-case-purpose-phase {
  position: relative;
  background: #f1fafb;
  padding: 135px 0 140px;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-phase {
    padding: 50px 0;
  }
}

.p-case-purpose-phase__title {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.7;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-phase__title {
    font-size: min(4.8vw, 18px);
    text-align: center;
    line-height: 2;
  }
}

.p-case-purpose-phase__label-wrap {
  margin-top: 40px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-phase__label-wrap {
    position: absolute;
    width: 1px;
    height: calc(100% - 155px);
    left: 20px;
    top: 100px;
  }
}
.p-case-purpose-phase__label-wrap::before {
  content: "";
  display: inline-block;
  width: calc(100% - 65px);
  height: 1px;
  background: #e8eaea;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-phase__label-wrap::before {
    width: 1px;
    height: calc(100% - 40px);
    right: auto;
    left: 0;
    top: 40px;
    transform: translateY(0);
  }
}
.p-case-purpose-phase__label-wrap::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e8eaea;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-phase__label-wrap::after {
    right: auto;
    top: auto;
    left: -3px;
    bottom: 0;
    transform: translateY(0);
  }
}

.p-case-purpose-phase__label {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  position: relative;
  line-height: 1;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-phase__label {
    position: static;
    font-size: 10px;
    writing-mode: vertical-rl;
    transform: rotate(-180deg) translateX(50%);
  }
}

.p-case-purpose-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-list {
    justify-content: flex-end;
    margin-top: 40px;
  }
}

.p-case-purpose-list__item {
  width: 18.45%;
  margin-top: 5px;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-list__item {
    width: calc(100% - 20px);
    margin-bottom: 20px;
    padding: 20px 20px 10px;
    background: #fff;
  }
}

.p-case-purpose-list__label {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  color: #0097a1;
}

@media only screen and (max-width: 768px) {
  .p-case-purpose-list__label--sp {
    display: block !important;
    font-size: 10px;
    color: #000;
  }
  .p-case-purpose-list__label--sp span {
    display: inline-block;
    font-size: 16px;
    margin-left: 3px;
  }
}

.p-case-purpose-list__content {
  background: #fff;
  height: 100%;
  border-radius: 6px;
  position: relative;
}

@media only screen and (max-width: 768px) {
  .p-case-purpose-list__thumb {
    width: 29.33vw;
    border-radius: 4px;
    overflow: hidden;
  }
}
.p-case-purpose-list__thumb img {
  width: 100%;
}

.p-case-purpose-list__body {
  padding: 25px 15px 0;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-list__body {
    border-top: solid 1px #e8eaea;
    padding: 0;
    margin-top: 15px;
  }
}

.p-case-purpose-list__title {
  font-size: 18px;
  line-height: 1.5;
  font-weight: bold;
  border-bottom: solid 1px #e8eaea;
  padding-bottom: 15px;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-list__title {
    font-size: 16px;
    color: #0097a1;
    position: absolute;
    left: 34.66vw;
    top: 24%;
    transform: translateY(-50%);
    border-bottom: none;
    padding-bottom: 0;
  }
}

.p-case-purpose-list__read {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  margin-top: 15px;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-list__read {
    margin-top: 10px;
  }
}

.p-case-purpose-list__txt {
  font-size: 12px;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-list__txt {
    font-size: 14px;
  }
}

.p-case-purpose-list__read + .p-case-purpose-list__txt {
  margin-top: 5px;
}

.p-case-purpose-list__title + .p-case-purpose-list__txt {
  margin-top: 15px;
}
@media only screen and (max-width: 768px) {
  .p-case-purpose-list__title + .p-case-purpose-list__txt {
    margin-top: 10px;
  }
}

/*------------------------------------------------------
# p-case-steps
-------------------------------------------------------*/
.p-case-steps {
  padding: 160px 0 120px;
}
@media only screen and (max-width: 768px) {
  .p-case-steps {
    padding: min(21.33vw, 80px) 0;
  }
}

.p-case-steps__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.p-case-steps__title {
  width: 38.76%;
  font-size: min(2.5vw, 32px);
  font-weight: bold;
  line-height: 1.5;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-case-steps__title {
    width: 100%;
    font-size: 20px;
  }
}
.p-case-steps__title::before {
  content: "";
  display: inline-block;
  width: min(19.21vw, 246px);
  height: min(11.09vw, 142px);
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/illust-steps.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: min(11.71vw, 150px);
}
@media only screen and (max-width: 768px) {
  .p-case-steps__title::before {
    width: 123px;
    height: 71px;
    left: 50%;
    top: auto;
    bottom: -76px;
    transform: translateX(-50%);
  }
}

.p-case-steps__label {
  display: block;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  color: #0097a1;
  margin-bottom: 15px;
}
@media only screen and (max-width: 768px) {
  .p-case-steps__label {
    font-size: 12px;
    margin-bottom: 10px;
  }
}

.p-case-steps-list {
  width: 56.38%;
  margin-right: 4.84%;
  border-bottom: solid 1px #e8eaea;
  margin-top: 50px;
}
@media only screen and (max-width: 1279px) {
  .p-case-steps-list {
    width: 60%;
    margin-right: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-steps-list {
    width: 100%;
    border: solid 10px #f8f8f8;
    margin-top: 87.5px;
  }
}

.p-case-steps-list__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 40px 0;
  border-top: solid 1px #e8eaea;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-case-steps-list__item:first-child {
    border-top: none;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-steps-list__item {
    padding: 20px 22px 25px;
  }
}

.p-case-steps-list__body {
  width: 68.75%;
}
@media only screen and (max-width: 768px) {
  .p-case-steps-list__body {
    width: 100%;
    order: 2;
  }
}

.p-case-steps-list__header {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .p-case-steps-list__header {
    width: 100%;
  }
}

.p-case-steps-list__no {
  color: #0097a1;
  display: flex;
  align-items: center;
  width: min(9.37vw, 120px);
  margin-right: min(1.56vw, 20px);
}
@media only screen and (max-width: 1279px) {
  .p-case-steps-list__no {
    width: 12vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-steps-list__no {
    width: 80px;
    margin-right: 0;
  }
}

.p-case-steps-list__label {
  display: inline-block;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  position: relative;
  line-height: 1;
  margin-right: min(0.78vw, 10px);
  margin-top: -27px;
}
@media only screen and (max-width: 768px) {
  .p-case-steps-list__label {
    font-size: 10px;
    margin-right: 10px;
  }
}
.p-case-steps-list__label::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background: #0097a1;
  position: absolute;
  left: 0;
  top: 22px;
}
@media only screen and (max-width: 768px) {
  .p-case-steps-list__label::after {
    font-size: 10px;
    width: 23.5px;
  }
}

.p-case-steps-list__circle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: min(5.85vw, 75px);
  height: min(5.85vw, 75px);
  border-radius: 50%;
  border: solid 1px #0097a1;
  font-size: min(3.12vw, 40px);
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
  text-indent: -5px;
  position: relative;
  line-height: 1;
}
@media only screen and (max-width: 768px) {
  .p-case-steps-list__circle {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
}

.p-case-steps-list__title {
  font-size: 23px;
  font-weight: bold;
  line-height: 1.5;
}
@media only screen and (max-width: 768px) {
  .p-case-steps-list__title {
    font-size: 18px;
    width: calc(100% - 80px);
  }
}

.p-case-steps-list__txt {
  width: 69.31%;
  margin-left: min(11.32vw, 145px);
  font-size: 16px;
  line-height: 1.75;
  margin-top: 15px;
  letter-spacing: 0;
}
@media only screen and (max-width: 1279px) {
  .p-case-steps-list__txt {
    margin-left: 13.5vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-steps-list__txt {
    font-size: 14px;
    margin-top: 10px;
    width: 100%;
    margin-left: 0;
  }
}

.p-case-steps-list__thumb {
  width: 27.03%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .p-case-steps-list__thumb {
    width: 100%;
    order: 1;
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 768px) and (max-width: 768px) {
  .p-case-steps-list__thumb img {
    width: min(30.66vw, 115px);
  }
}

.p-case-steps-list__thumb--step01 {
  margin: -20px 0;
}
@media only screen and (max-width: 768px) {
  .p-case-steps-list__thumb--step01 {
    margin: 0 0 25px;
  }
}

@media only screen and (max-width: 768px) {
  .p-case-steps-list__thumb--step04 img {
    width: 20.66vw;
    margin-left: 13.33vw;
  }
}

/*------------------------------------------------------
# p-case-contact
-------------------------------------------------------*/
.p-case-contact {
  position: relative;
  background: rgb(0, 162, 173) url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/bg-contact.jpg) no-repeat center center;
  background-size: cover;
}
@media only screen and (max-width: 768px) {
  .p-case-contact {
    background: rgb(0, 162, 173) url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/case/bg-contact-sp.jpg) no-repeat top center;
    background-size: 100%;
  }
}

.p-case-contact__inner {
  display: flex;
  justify-content: flex-end;
}

.p-case-contact__body {
  max-width: 480px;
  width: 100%;
  padding: 80px 0;
}
@media only screen and (max-width: 768px) {
  .p-case-contact__body {
    max-width: none;
    padding: 100vw 0 21.33vw;
  }
}

.p-case-contact__title {
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 25px;
}
@media only screen and (max-width: 768px) {
  .p-case-contact__title {
    font-size: 20px;
  }
}

.p-case-contact__label {
  display: block;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0;
}
@media only screen and (max-width: 768px) {
  .p-case-contact__label {
    font-size: 12px;
  }
}

.p-case-contact__btn {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .p-case-contact__btn {
    width: 100%;
    margin: 0 auto;
  }
}
.p-case-contact__btn + .p-case-contact__btn {
  margin-top: 30px;
}
@media only screen and (max-width: 768px) {
  .p-case-contact__btn + .p-case-contact__btn {
    margin-top: 20px;
  }
}
.p-case-contact__btn a {
  padding: 22px 0;
  font-size: 20px;
  background: #fff;
  color: #0097a1;
}
@media only screen and (max-width: 768px) {
  .p-case-contact__btn a {
    padding: 15px 0;
    font-size: 16px;
  }
}
.p-case-contact__btn a:hover i {
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/common/icon-arrow-white.svg) no-repeat;
  background-size: contain;
}
.p-case-contact__btn a i {
  width: 30px;
  height: 30px;
}
@media only screen and (max-width: 768px) {
  .p-case-contact__btn a i {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
}

/*------------------------------------------------------
# p-case-study
-------------------------------------------------------*/
.p-case-study {
  background: #f1fafb;
  padding: 154px 0 122px;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .p-case-study {
    padding: min(20vw, 75px) 0 min(21.33vw, 80px);
  }
}

.p-case-study__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}
.p-case-study__header::before {
  content: "CASE STUDY";
  font-size: min(15.62vw, 200px);
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: #fff;
  line-height: 0.9;
  display: inline-block;
  position: absolute;
  left: -15px;
  top: 52%;
  transform: translateY(-50%);
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .p-case-study__header::before {
    font-size: min(21.33vw, 80px);
    left: -30px;
    top: 50px;
    transform: translateY(0);
  }
}

.p-case-study__title {
  font-size: 32px;
  font-weight: bold;
  line-height: 1.5;
}
@media only screen and (max-width: 768px) {
  .p-case-study__title {
    font-size: 20px;
  }
}

.p-case-study__link {
  font-weight: bold;
  font-size: 16px;
}
.p-case-study__link i {
  margin-right: 10px;
  transition: transform 0.4s;
}
.p-case-study__link a:hover i {
  transform: translateX(5px);
}

@media only screen and (max-width: 768px) {
  .p-case-study__link--sp {
    width: 100%;
    margin-top: 25px;
    text-align: right;
  }
}

.p-case-study-list {
  width: 100vw;
  margin-top: 25px;
  background: #fff;
  padding: 40px 40px 40px 80px;
  position: relative;
  left: 50%;
  transform: translateX(-390px);
}
@media only screen and (max-width: 1279px) {
  .p-case-study-list {
    width: 90vw;
    left: 10vw;
    transform: translateX(0);
  }
}
@media only screen and (max-width: 768px) {
  .p-case-study-list {
    margin-top: 50px;
    padding: 0 15px;
    width: calc(100vw - 15px);
    left: 0;
  }
}

.p-case-study-list__item a {
  max-width: 815px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0;
}
@media only screen and (max-width: 768px) {
  .p-case-study-list__item a {
    padding: 30px 0;
  }
}
.p-case-study-list__item + .p-case-study-list__item {
  border-top: solid 1px #e8eaea;
}

.p-case-study-list__thumb {
  width: 34.35%;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .p-case-study-list__thumb {
    width: 36%;
  }
}
.p-case-study-list__thumb img {
  transition: transform 0.4s;
}

.p-case-study-list__body {
  width: 60.73%;
}
@media only screen and (max-width: 768px) {
  .p-case-study-list__body {
    width: 59.09%;
  }
}

.p-case-study-list__title {
  font-size: 20px;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .p-case-study-list__title {
    font-size: 14px;
    line-height: 1.7;
  }
}

.p-case-study-list__name {
  font-size: 14px;
  font-weight: bold;
  margin-top: 12px;
}
@media only screen and (max-width: 768px) {
  .p-case-study-list__name {
    font-size: 10px;
    margin-top: 7px;
  }
}

.p-case-study-list__item a:hover img {
  transform: scale(1.1);
}

/*------------------------------------------------------
# p-case-learn
-------------------------------------------------------*/
.p-case-learn {
  padding: min(13.67vw, 175px) 0 min(11.71vw, 150px);
}
@media only screen and (max-width: 768px) {
  .p-case-learn {
    padding: min(18.66vw, 70px) 0 min(26.66vw, 100px);
  }
}

.p-case-learn__inner {
  position: relative;
}

.p-case-learn__title {
  font-size: 32px;
  font-weight: bold;
  padding-bottom: min(2.73vw, 35px);
  position: relative;
  line-height: 1.5;
}
@media only screen and (max-width: 768px) {
  .p-case-learn__title {
    font-size: 20px;
    padding-bottom: min(12.66vw, 47.5px);
  }
}
.p-case-learn__title::before {
  content: "LEARN";
  font-size: min(15.62vw, 200px);
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  white-space: nowrap;
  color: #f8f8f8;
  line-height: 0.78;
  display: inline-block;
  position: absolute;
  right: -127px;
  bottom: -10px;
  z-index: -1;
}
@media only screen and (max-width: 1279px) {
  .p-case-learn__title::before {
    right: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-case-learn__title::before {
    font-size: min(21.33vw, 80px);
    right: auto;
    left: -15px;
    bottom: -5px;
  }
}

.p-case-learn-list-wrap {
  border-top: solid 1px #e8eaea;
  border-bottom: solid 1px #e8eaea;
}
@media only screen and (max-width: 768px) {
  .p-case-learn-list-wrap {
    border-bottom: none;
  }
}

.p-case-learn-list {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (max-width: 768px) {
  .p-case-learn-list {
    padding: 0;
  }
}

.p-case-learn-list__item {
  width: 33.31%;
  border-right: solid 1px #e8eaea;
}
@media only screen and (max-width: 768px) {
  .p-case-learn-list__item {
    width: 100%;
    border-right: none;
    border-bottom: solid 1px #e8eaea;
    padding: 0;
  }
}
.p-case-learn-list__item:first-child {
  border-left: solid 1px #e8eaea;
}
@media only screen and (max-width: 768px) {
  .p-case-learn-list__item:first-child {
    border-left: none;
  }
}
.p-case-learn-list__item a {
  display: block;
  height: 100%;
  padding: 50px 8.82% 42px 8.82%;
}
@media only screen and (max-width: 768px) {
  .p-case-learn-list__item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }
}

.p-case-learn-list__thumb {
  margin: 0 0 20px;
  padding: 0;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .p-case-learn-list__thumb {
    width: 35.07%;
    margin-bottom: 0;
    padding: 30px 0;
  }
}
.p-case-learn-list__thumb img {
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 0.4s;
}

.p-case-learn-list__title {
  font-size: 16px;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .p-case-learn-list__title {
    width: 60.44%;
    font-size: 14px;
    margin-top: -5px;
    line-height: 1.7;
    padding: 15px 0;
  }
}
.p-case-learn-list__title i {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  transform: translateX(0);
  transition: transform 0.4s;
}
@media only screen and (max-width: 768px) {
  .p-case-learn-list__title i {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    margin-top: -3px;
  }
}

.p-case-learn-list__item a:hover {
  color: #0097a1;
  background: #f8f8f8;
}
.p-case-learn-list__item a:hover .p-case-learn-list__title i {
  transform: translateX(5px);
}
@media only screen and (max-width: 768px) {
  .p-case-learn-list__item a:hover .p-case-learn-list__title i {
    transform: translateX(0.66vw);
  }
}
.p-case-learn-list__item a:hover .p-case-learn-list__thumb img {
  transform: scale(1.1);
}

/*------------------------------------------------------
# p-lp-kv
-------------------------------------------------------*/
.p-lp-kv {
  width: 100%;
  position: relative;
  z-index: 1;
  padding-top: 168px;
  padding-bottom: 298px;
  border-top: solid 1px #eee;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-kv {
    padding-top: min(6.51vw, 100px);
    padding-bottom: min(9.77vw, 150px);
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-kv {
    padding-top: 65px;
    padding-bottom: 140px;
  }
}
.p-lp-kv::after {
  content: "";
  display: block;
  width: 81.96%;
  height: 592px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/bg-kv.png) no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -2;
}
@media only screen and (max-width: 768px) {
  .p-lp-kv::after {
    width: 100%;
    height: 70.53vw;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/bg-kv-sp.png) no-repeat;
    background-size: cover;
    bottom: -40px;
  }
}

@media only screen and (min-width: 1650px) {
  .p-lp-kv::after {
    background-size: contain;
  }
}
.p-lp-kv__inner {
  display: flex;
  width: 100%;
  max-width: 1408px;
  margin: 0 auto;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-kv__inner {
    margin-left: 3.9vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-kv__inner {
    display: block;
    margin-left: 0;
  }
}

.p-lp-kv__title {
  font-size: min(7.16vw, 110px);
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -0.1em;
}
@media only screen and (max-width: 768px) {
  .p-lp-kv__title {
    font-size: min(12vw, 50px);
    white-space: nowrap;
  }
}
.p-lp-kv__title span:not(.is-font-palt) {
  display: block;
  background-image: linear-gradient(99deg, #6EC5A7 0%, #37BCB0 50%, #0486A4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: normal;
}
.p-lp-kv__title .is-font-palt {
  font-feature-settings: "palt";
  letter-spacing: 0.01em;
}
@media only screen and (max-width: 768px) {
  .p-lp-kv__title .u-visible-sp {
    display: inline-block;
  }
}

.p-lp-kv__left {
  width: auto;
}
@media only screen and (max-width: 768px) {
  .p-lp-kv__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 16px);
    margin: 0 auto;
  }
}
@media only screen and (max-width: 414px) {
  .p-lp-kv__left {
    display: block;
  }
}

.p-lp-kv__right {
  width: 835px;
  position: absolute;
  left: calc(50% + 35px);
  top: 35px;
  z-index: -1;
}
@media only screen and (min-width: 1536px) {
  .p-lp-kv__right {
    top: 104px;
  }
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-kv__right {
    width: 54.36vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-kv__right {
    width: 100%;
    max-width: 414px;
    margin: 0 auto;
    padding-bottom: 28px;
    position: relative;
    top: 0;
    left: 0;
  }
}

.p-lp-kv__read {
  margin-top: 24px;
  margin-bottom: 64px;
  font-size: 36px;
  font-size: min(2.34vw, 36px);
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 1.8px;
  text-align: left;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-kv__read {
    font-size: 30px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-kv__read {
    font-size: 18px;
    margin-top: 16px;
    margin-bottom: 24px;
  }
}
.p-lp-kv__read span {
  vertical-align: bottom;
}

.p-lp-kv__buttons {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .p-lp-kv__buttons {
    max-width: 100%;
  }
}
.p-lp-kv__buttons .c-lp-button + .c-lp-button {
  margin-top: 16px;
}
@media only screen and (max-width: 768px) {
  .p-lp-kv__buttons .c-lp-button + .c-lp-button {
    margin-top: 0;
    margin-left: 8px;
  }
}
.p-lp-kv__buttons .c-lp-button {
  max-width: 385px;
}
@media only screen and (max-width: 768px) {
  .p-lp-kv__buttons .c-lp-button {
    padding: 15px 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-kv__buttons {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 60px;
    height: 80px;
    padding: 16px 8px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 -8px 8px 0 rgba(0, 0, 0, 0.15);
    background-color: rgba(255, 255, 255, 0.9);
  }
}

.p-lp-kv__note {
  display: flex;
  margin-top: -20px;
  font-size: 12px;
  line-height: 1.5;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-kv__note {
    font-size: 10px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-kv__note {
    margin: -10px 5px;
    font-size: 11px;
  }
}

main.logistics .p-lp-kv {
  width: 100%;
  position: relative;
  z-index: 1;
  padding-top: 104px;
  padding-bottom: 290px;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  main.logistics .p-lp-kv {
    padding-top: min(6.51vw, 100px);
    padding-bottom: min(9.77vw, 150px);
  }
}
@media only screen and (max-width: 768px) {
  main.logistics .p-lp-kv {
    padding-top: 50px;
    padding-bottom: 140px;
  }
}
main.logistics .p-lp-kv::after {
  content: "";
  display: block;
  width: 954px;
  height: 524px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/bg-kv.png) no-repeat;
  background-size: contain;
  bottom: 5px;
}
@media only screen and (max-width: 768px) {
  main.logistics .p-lp-kv::after {
    width: 100%;
    height: 70.53vw;
    background-size: cover;
  }
}
main.logistics .p-lp-kv__title {
  font-size: min(4.42vw, 68px);
  letter-spacing: -0.05em;
}
@media only screen and (max-width: 768px) {
  main.logistics .p-lp-kv__title {
    font-size: min(8.45vw, 35px);
  }
}
main.logistics .p-lp-kv__title span:not(.is-font-palt) {
  font-size: 88px;
  font-size: min(5.7vw, 88px);
  line-height: 1.2;
  display: inline-block;
}
@media only screen and (max-width: 768px) {
  main.logistics .p-lp-kv__title span:not(.is-font-palt) {
    font-size: min(10.62vw, 44px);
  }
}
main.logistics .p-lp-kv__read {
  font-size: 29px;
}
@media only screen and (max-width: 768px) {
  main.logistics .p-lp-kv__read {
    font-size: 18px;
  }
}
main.logistics .p-lp-kv__right {
  padding-top: 64px;
  width: 933px;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  main.logistics .p-lp-kv__right {
    width: 54.36vw;
  }
}
@media only screen and (max-width: 768px) {
  main.logistics .p-lp-kv__right {
    width: 100%;
    max-width: 414px;
    padding-top: 0;
  }
}

main.house-construction .p-lp-kv {
  width: 100%;
  position: relative;
  z-index: 1;
  padding-top: 104px;
  padding-bottom: 178px;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  main.house-construction .p-lp-kv {
    padding-top: min(6.51vw, 100px);
    padding-bottom: min(9.77vw, 150px);
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-kv {
    padding-top: 50px;
    padding-bottom: 140px;
  }
}
main.house-construction .p-lp-kv::after {
  content: "";
  display: block;
  width: 1536px;
  height: 521px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/house/bg-kv.png) no-repeat;
  background-size: contain;
  bottom: 0;
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-kv::after {
    width: 100%;
    aspect-ratio: 828/737;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/house/bg-kv-sp.png) no-repeat center bottom;
    background-size: cover;
    bottom: 20px;
  }
}
main.house-construction .p-lp-kv__title {
  font-size: min(4.42vw, 68px);
  letter-spacing: -0.05em;
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-kv__title {
    font-size: min(8.45vw, 35px);
  }
}
main.house-construction .p-lp-kv__title span:not(.is-font-palt) {
  font-size: min(5.21vw, 80px);
  line-height: 1.2;
  display: inline-block;
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-kv__title span:not(.is-font-palt) {
    font-size: min(12.07vw, 50px);
  }
}
main.house-construction .p-lp-kv__read {
  font-size: 29px;
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-kv__read {
    font-size: min(4.34vw, 18px);
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-kv__left {
    align-items: flex-start;
    padding: 0 15px;
    width: 100%;
    max-width: 414px;
  }
}
main.house-construction .p-lp-kv__right {
  padding-top: 64px;
  width: 933px;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  main.house-construction .p-lp-kv__right {
    width: 54.36vw;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-kv__right {
    width: 100%;
    max-width: 414px;
    padding-top: 0;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-kv__buttons {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
  }
}

/*------------------------------------------------------
# p-lp-connect
-------------------------------------------------------*/
.p-lp-connect {
  letter-spacing: 0;
  padding-bottom: 126px;
  padding-bottom: min(8.2vw, 126px);
}
@media only screen and (max-width: 768px) {
  .p-lp-connect {
    padding-bottom: 105px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-connect .c-lp-header__title {
    margin-left: -24px;
    margin-right: -24px;
  }
}

.p-lp-connect__content {
  position: relative;
  margin-top: 40px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-connect__content {
    display: flex;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-connect__content {
    display: flex;
    flex-direction: column;
  }
}

.p-lp-connect__thumb {
  width: min(63.47vw, 975px);
  padding-top: 38px;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-connect__thumb {
    width: 55vw;
    padding-top: 80px;
  }
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-connect__thumb {
    width: 50%;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-connect__thumb {
    width: calc(100vw - 5px);
    margin-left: -20px;
    padding-top: 0;
    order: 2;
  }
}
.p-lp-connect__thumb img {
  position: relative;
  left: -120px;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-connect__thumb img {
    left: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-connect__thumb img {
    left: 0;
  }
}

.p-lp-connect__body {
  width: 546px;
  position: absolute;
  top: 0;
  right: 30px;
}
@media only screen and (min-width: 1536px) {
  .p-lp-connect__body {
    right: 0;
  }
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-connect__body {
    width: 50%;
    position: static;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-connect__body {
    width: 100%;
    position: static;
    order: 1;
  }
}

.p-lp-connect__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  margin-bottom: 40px;
  white-space: nowrap;
}
@media only screen and (max-width: 1279px) {
  .p-lp-connect__text {
    font-size: 16px;
    white-space: normal;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-connect__text {
    font-size: 16px;
    margin-bottom: 24px;
  }
}

@media only screen and (max-width: 768px) {
  .p-lp-connect__list {
    margin-bottom: 40px;
  }
}
.p-lp-connect__list li {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  vertical-align: middle;
}
@media only screen and (max-width: 1279px) {
  .p-lp-connect__list li {
    font-size: 16px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-connect__list li {
    font-size: 16px;
  }
}
.p-lp-connect__list li::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/icon-check.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 8px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-connect__list li::before {
    width: 26px;
    height: 25px;
    background-size: contain;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-connect__list li::before {
    width: 28px;
    height: 28px;
    background-size: contain;
  }
}
.p-lp-connect__list li:last-child {
  margin-bottom: 0;
}

.p-lp-connect__note {
  font-size: 12px;
  margin-left: -100px;
  margin-top: 20px;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-connect__note {
    margin-left: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-connect__note {
    margin-left: 0;
    text-align: center;
    padding: 0 20px 0 10px;
    line-height: 1.4;
  }
}

/*------------------------------------------------------
# p-lp-intro
-------------------------------------------------------*/
.p-lp-intro {
  letter-spacing: 0;
  padding-top: 58px;
  padding-bottom: 0;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-lp-intro {
    padding-bottom: 0;
  }
}
.p-lp-intro::before {
  content: "";
  display: block;
  width: min(52.63vw, 808px);
  height: min(42.41vw, 651px);
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/bg-digitization.png) no-repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  top: -235px;
  z-index: -1;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-intro::before {
    top: -120px;
    width: 40vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-intro::before {
    top: 0;
    width: 54.8vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-intro .c-lp-header__title {
    margin-left: -24px;
    margin-right: -24px;
    text-align: left;
  }
}

.p-lp-intro__content {
  position: relative;
  margin-top: 40px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-intro__content {
    display: flex;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-intro__content {
    display: flex;
    flex-direction: column;
  }
}

.p-lp-intro__thumb {
  width: min(51.53vw, 791px);
  padding-top: 38px;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-intro__thumb {
    width: 55vw;
    padding-top: 80px;
  }
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-intro__thumb {
    width: 50%;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-intro__thumb {
    width: calc(100vw - 5px);
    margin-left: -20px;
    padding-top: 0;
    order: 2;
  }
}
.p-lp-intro__thumb img {
  position: relative;
  left: -120px;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-intro__thumb img {
    left: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-intro__thumb img {
    left: 0;
  }
}

.p-lp-intro__body {
  width: 546px;
  position: absolute;
  top: 0;
  right: 30px;
}
@media only screen and (min-width: 1536px) {
  .p-lp-intro__body {
    right: 0;
  }
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-intro__body {
    width: 50%;
    position: static;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-intro__body {
    width: 100%;
    position: static;
    order: 1;
  }
}

.p-lp-intro__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  margin-bottom: 40px;
}
@media only screen and (max-width: 1279px) {
  .p-lp-intro__text {
    font-size: 16px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-intro__text {
    font-size: 16px;
    margin-bottom: 24px;
  }
}

@media only screen and (max-width: 768px) {
  .p-lp-intro__list {
    margin-bottom: 40px;
  }
}
.p-lp-intro__list li {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  vertical-align: middle;
}
@media only screen and (max-width: 1279px) {
  .p-lp-intro__list li {
    font-size: 16px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-intro__list li {
    font-size: 16px;
  }
}
.p-lp-intro__list li::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/icon-check.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 8px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-intro__list li::before {
    width: 26px;
    height: 25px;
    background-size: contain;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-intro__list li::before {
    width: 28px;
    height: 28px;
    background-size: contain;
  }
}
.p-lp-intro__list li:last-child {
  margin-bottom: 0;
}

.p-lp-intro__cameras {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 48px;
}
@media only screen and (max-width: 768px) {
  .p-lp-intro__cameras {
    margin-top: -20px;
    padding-top: 0;
    padding-bottom: 20px;
  }
}
.p-lp-intro__cameras img {
  max-width: 414px;
}
@media only screen and (max-width: 768px) {
  .p-lp-intro__cameras img {
    width: 80%;
    max-width: 400px;
  }
}

.p-lp-intro__note {
  font-size: 12px;
  margin-left: -100px;
  margin-top: 20px;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-intro__note {
    margin-left: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-intro__note {
    margin-left: 0;
    text-align: center;
    padding: 0 20px 0 10px;
    line-height: 1.4;
  }
}

main.house-construction .p-lp-intro {
  padding-top: min(8.99vw, 138px);
  padding-bottom: min(11.79vw, 181px);
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-intro {
    padding-top: 0;
  }
}
main.house-construction .p-lp-intro::before {
  content: none;
}
main.house-construction .p-lp-intro__list {
  margin-bottom: 30px;
}
main.house-construction .p-lp-intro__content {
  margin-top: min(5.3vw, 82px);
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-intro__content {
    margin-top: 40px;
    position: relative;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-intro__thumb {
    padding-bottom: 148px;
  }
}
main.house-construction .p-lp-intro__cameras {
  justify-content: flex-start;
  padding-top: 0;
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-intro__cameras {
    width: 261px;
    margin: 0 auto;
    padding-bottom: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
main.house-construction .p-lp-intro__cameras img {
  max-width: 442px;
  width: 100%;
}

/*------------------------------------------------------
# p-lp-clearly
-------------------------------------------------------*/
.p-lp-clearly {
  letter-spacing: 0;
  padding-bottom: min(10.94vw, 168px);
}
@media only screen and (max-width: 768px) {
  .p-lp-clearly {
    padding-bottom: 105px;
  }
}
.p-lp-clearly .l-lp-inner {
  padding-top: min(4.69vw, 72px);
}
@media only screen and (max-width: 768px) {
  .p-lp-clearly .l-lp-inner {
    padding-top: 40px;
  }
}
.p-lp-clearly .c-lp-header {
  margin-bottom: min(4.16vw, 64px);
}
@media only screen and (max-width: 768px) {
  .p-lp-clearly .c-lp-header {
    margin-bottom: 40px;
  }
}

.p-lp-clearly__item + .p-lp-clearly__item {
  margin-top: min(6.77vw, 104px);
}
@media only screen and (max-width: 768px) {
  .p-lp-clearly__item + .p-lp-clearly__item {
    margin-top: 64px;
  }
}

.p-lp-clearly__caption {
  text-align: center;
  margin-bottom: 40px;
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.045em;
}
@media only screen and (max-width: 768px) {
  .p-lp-clearly__caption {
    font-size: 21px;
    margin-bottom: 24px;
  }
}

.p-lp-clearly__movie {
  width: 992px;
  margin: 0 auto;
  position: relative;
}

.p-lp-clearly__movie.hs-responsive-embed-wrapper {
  max-width: none!important;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-clearly__movie {
    width: 100%;
    max-width: 750px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-clearly__movie {
    width: 100%;
    max-width: 366px;
  }
}
@media only screen and (max-width: 414px) {
  .p-lp-clearly__movie {
    width: 100%;
    max-width: 305px;
  }
}
.p-lp-clearly__movie iframe {
  border-radius: 40px;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 768px) {
  .p-lp-clearly__movie iframe {
    border-radius: 16px;
    box-shadow: 0 0 8.9px 0 rgba(0, 0, 0, 0.2);
  }
}

.p-lp-clearly__note {
  font-size: 13px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  margin-top: 20px;
  line-height: 1.4;
}

/*------------------------------------------------------
# p-lp-benefit
-------------------------------------------------------*/
.p-lp-benefit {
  letter-spacing: 0;
  padding-top: min(10.94vw, 168px);
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/bg-benefit.png) no-repeat right top;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit {
    padding-top: 64px;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/bg-benefit-sp.png) no-repeat right top;
  }
}
.p-lp-benefit.is-bg-left {
  background: none;
  position: relative;
}
.p-lp-benefit.is-bg-left::before {
  content: "";
  width: 352px;
  height: 504px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/bg-benefit-left.png) no-repeat;
  position: absolute;
  left: 0;
  top: -70px;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit.is-bg-left::before {
    width: 153px;
    height: 219px;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/bg-benefit-left-sp.png) no-repeat;
    top: -10px;
  }
}
.p-lp-benefit.is-bg-wave {
  background: none;
  position: relative;
}
.p-lp-benefit.is-bg-wave::before {
  content: "";
  width: 450px;
  aspect-ratio: 75/61;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/house/bg-benefit-left.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit.is-bg-wave::before {
    width: 37.5%;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit.is-bg-wave::before {
    width: 46.61vw;
    aspect-ratio: 386/357;
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/house/bg-benefit-left-sp.png);
  }
}
.p-lp-benefit.is-bg-wave::after {
  content: "";
  width: 690px;
  aspect-ratio: 115/172;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/house/bg-benefit-right.png) no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit.is-bg-wave::after {
    width: 40%;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit.is-bg-wave::after {
    width: 79.71vw;
    aspect-ratio: 165/247;
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/house/bg-benefit-right-sp.png);
  }
}
.p-lp-benefit.is-bg-no {
  background: none;
  padding-bottom: min(6.77vw, 104px);
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit.is-bg-no {
    margin-top: 0;
  }
}
.p-lp-benefit .c-lp-header {
  margin-bottom: min(10.94vw, 168px);
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit .c-lp-header {
    margin-bottom: 80px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit .c-lp-header {
    margin-bottom: 64px;
  }
}
.p-lp-benefit + .p-lp-benefit {
  padding-bottom: min(10.94vw, 168px);
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit + .p-lp-benefit {
    padding-bottom: 64px;
  }
}
.p-lp-benefit .is-font-palt {
  font-feature-settings: "palt";
}

.p-lp-benefit__item {
  position: relative;
  overflow: hidden;
}
.p-lp-benefit__item .l-lp-inner {
  position: static;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__item .l-lp-inner {
    gap: 0 40px;
    justify-content: space-between;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__item .l-lp-inner {
    display: flex;
    flex-direction: column;
  }
}
.p-lp-benefit__item + .p-lp-benefit__item {
  margin-top: min(6.77vw, 104px);
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__item + .p-lp-benefit__item {
    margin-top: 64px;
  }
}

.p-lp-benefit__content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 460px;
  min-height: 680px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__content {
    min-height: 500px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__content {
    width: 100%;
    min-height: auto;
    order: 2;
  }
}
.p-lp-benefit__content.is-w524 {
  width: 524px;
  margin-left: -64px;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-benefit__content.is-w524 {
    margin-left: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__content.is-w524 {
    width: 100%;
    margin-left: 0;
  }
}

.p-lp-benefit__title {
  font-size: 40px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 2px;
  color: #fff;
  white-space: nowrap;
  margin-bottom: 32px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__title {
    font-size: 32px;
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__title {
    font-size: min(5.79vw, 24px);
    margin-bottom: 16px;
  }
}
.p-lp-benefit__title span {
  display: inline-block;
  padding: 6px 20px 10px;
  background-image: linear-gradient(109deg, #6ec5a7 0%, #37bcb0 48%, #0486a4 99%);
  margin-bottom: 8px;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__title span {
    padding: 6px min(2.89vw, 12px) 8px;
  }
}

.p-lp-benefit__grad-title {
  font-size: min(3.12vw, 48px);
  font-weight: bold;
  line-height: 1.4;
  white-space: nowrap;
  margin-bottom: 40px;
  letter-spacing: -0.5px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__grad-title {
    font-size: 32px;
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__grad-title {
    font-size: min(5.79vw, 24px);
    margin-bottom: 16px;
    white-space: normal;
  }
}
.p-lp-benefit__grad-title span {
  background-image: linear-gradient(99deg, #6EC5A7 0%, #37BCB0 50%, #0486A4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p-lp-benefit__grad-title small {
  font-size: 45%;
  vertical-align: super;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__grad-title small {
    font-size: 60%;
  }
}
.p-lp-benefit__grad-title .is-negative-indent {
  display: inline-block;
  text-indent: -0.6em;
}
.p-lp-benefit__grad-title .is-palt {
  font-feature-settings: "palt";
}
.p-lp-benefit__grad-title.is-large {
  font-size: min(3.64vw, 56px);
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__grad-title.is-large {
    font-size: min(7vw, 29px);
  }
}
@media only screen and (min-width: 1250px) {
  .p-lp-benefit__grad-title.is-pc-small {
    font-size: min(3.12vw, 45px);
  }
}

.p-lp-benefit__comment {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  color: #fff;
  background: #008C95;
  padding: 16px 24px 16px 121px;
  margin-bottom: 47px;
  border-radius: 8px;
  position: relative;
  align-self: flex-start;
}
@media only screen and (min-width: 1250px) {
  .p-lp-benefit__comment {
    white-space: nowrap;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__comment {
    font-size: 15px;
    line-height: 1.4;
    align-self: normal;
    padding: 12px 16px 12px 75px;
    margin-bottom: 25px;
  }
}
.p-lp-benefit__comment::before {
  content: "";
  display: inline-block;
  width: 41px;
  height: 35px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/icon-benefit-comment.png) no-repeat;
  background-size: 100% auto;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 41px);
  transform: translateX(50%);
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__comment::before {
    transform: translateX(50%) scale(0.7);
  }
}

.p-lp-benefit__comment-illust01,
.p-lp-benefit__comment-illust02,
.p-lp-benefit__comment-illust03 {
  display: inline-block;
  width: 89px;
  height: 94px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/illust-benefit01.svg) no-repeat;
  background-size: contain;
  position: absolute;
  left: 16px;
  bottom: 0;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__comment-illust01,
  .p-lp-benefit__comment-illust02,
  .p-lp-benefit__comment-illust03 {
    width: 44px;
    height: 47px;
  }
}

.p-lp-benefit__comment-illust02 {
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/illust-benefit02.svg);
}

.p-lp-benefit__comment-illust03 {
  background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/illust-benefit03.svg);
}

.p-lp-benefit__read {
  font-size: 36px;
  font-weight: bold;
  line-height: 1.6;
  white-space: nowrap;
  margin-bottom: 24px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__read {
    font-size: 24px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__read {
    font-size: 21px;
    margin-bottom: 16px;
    white-space: normal;
  }
}

.p-lp-benefit__thumb {
  width: 52.34%;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 40px 0 0 40px;
  overflow: hidden;
}
@media only screen and (min-width: 1250px) {
  .p-lp-benefit__thumb.is-small {
    width: 45%;
  }
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__thumb {
    position: relative;
    right: -10px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__thumb {
    width: calc(100% + 24px);
    position: relative;
    border-radius: 16px 0px 0px 16px;
    order: 1;
    margin-bottom: 40px;
    right: -12px;
  }
}
.p-lp-benefit__thumb img {
  width: 100%;
  height: 680px;
  object-fit: cover;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__thumb img {
    height: 500px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__thumb img {
    height: auto;
  }
}
.p-lp-benefit__thumb img.is-contain {
  object-fit: contain;
}

.p-lp-benefit__text {
  font-size: 18px;
  line-height: 2;
  font-weight: 500;
  font-feature-settings: "palt";
  letter-spacing: 0.03em;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__text {
    font-size: 16px;
  }
}
.p-lp-benefit__text p + p {
  margin-top: 14px;
}

.p-lp-benefit__note {
  font-size: 16px;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__note {
    font-size: 14px;
  }
}

.p-lp-benefit__item.is-reverse .l-lp-inner {
  justify-content: flex-end;
}
.p-lp-benefit__item.is-reverse .p-lp-benefit__thumb {
  order: 1;
  right: auto;
  left: 0;
  border-radius: 0 40px 40px 0;
}
@media only screen and (max-width: 1279px) {
  .p-lp-benefit__item.is-reverse .p-lp-benefit__thumb {
    left: -10px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__item.is-reverse .p-lp-benefit__thumb {
    border-radius: 0 16px 16px 0;
    right: auto;
    left: -12px;
  }
}
.p-lp-benefit__item.is-reverse .p-lp-benefit__content {
  order: 2;
}
.p-lp-benefit__item.is-reverse .p-lp-benefit__content.is-w524 {
  margin-right: -64px;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-benefit__item.is-reverse .p-lp-benefit__content.is-w524 {
    margin-right: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__item.is-reverse .p-lp-benefit__content.is-w524 {
    margin-right: 0;
  }
}

.p-lp-benefit__item.is-bg-blue {
  background: #E4F6F7;
  padding: min(6.77vw, 104px) 0;
}
.p-lp-benefit__item.is-bg-blue .p-lp-benefit__thumb {
  margin-top: min(6.77vw, 104px);
}

.p-lp-benefit__item.is-center .l-lp-inner {
  flex-direction: column;
}
.p-lp-benefit__item.is-center .p-lp-benefit__content {
  width: 600px;
  min-height: auto;
  margin-bottom: min(6.77vw, 104px);
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__item.is-center .p-lp-benefit__content {
    width: 100%;
    margin-bottom: 0;
  }
}
.p-lp-benefit__item.is-center .p-lp-benefit__thumb {
  position: static;
  width: 100%;
  border-radius: 40px;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__item.is-center .p-lp-benefit__thumb {
    border-radius: 0;
    width: calc(100% + 48px);
    border-radius: 0;
  }
}

.p-lp-benefit__point-wrap {
  max-width: 989px;
  margin: min(6.77vw, 104px) auto 0;
  display: flex;
  gap: 0 4%;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__point-wrap {
    padding: 0 10px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__point-wrap {
    margin-top: 30px;
    padding: 0 24px;
    flex-wrap: wrap;
    gap: 20px 0;
  }
}

.p-lp-benefit__point {
  width: 30.73%;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__point {
    width: 100%;
  }
}

.p-lp-benefit__point-thumb {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__point-thumb {
    border-radius: 8px;
    margin-bottom: 5px;
  }
}
.p-lp-benefit__point-thumb img {
  width: 100%;
}

.p-lp-benefit__point-text {
  font-size: 18px;
  line-height: 1.6;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__point-text {
    font-size: 16px;
  }
}

.p-lp-benefit__also {
  max-width: 992px;
  margin: min(6.77vw, 104px) auto 0;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__also {
    padding: 0 10px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also {
    padding: 0 24px;
    margin-top: 32px;
  }
}

.p-lp-benefit__also-title {
  font-size: min(4vw, 36px);
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 40px;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-title {
    font-size: min(4.3vw, 18px);
    margin-bottom: 16px;
  }
}
.p-lp-benefit__also-title span {
  display: inline-block;
  background-image: linear-gradient(99deg, #6EC5A7 0%, #37BCB0 50%, #0486A4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p-lp-benefit__also-title strong {
  font-size: 80px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__also-title strong {
    font-size: 64px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-title strong {
    font-size: min(7vw, 40px);
  }
}
.p-lp-benefit__also-title.is-center {
  text-align: center;
}

.p-lp-benefit__also-content {
  border-radius: 24px;
  border: solid 3px #008c95;
  background: #fff;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-content {
    border-radius: 12px;
    border-width: 2px;
  }
}
.p-lp-benefit__also-content figure {
  padding: 40px min(6.77vw, 104px) 0;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-content figure {
    padding: 24px 24px 0;
  }
}

.p-lp-benefit__wms-text {
  display: flex;
  justify-content: center;
  padding: 20px min(6.77vw, 104px) 40px;
  text-align: center;
  gap: 0 190px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__wms-text {
    gap: 0 150px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__wms-text {
    justify-content: space-between;
    gap: 0 20px;
    padding: 15px 24px;
  }
}
.p-lp-benefit__wms-text p {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
  color: #008C95;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__wms-text p {
    font-size: 18px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__wms-text p {
    font-size: min(3.73vw, 14px);
    width: 50%;
  }
}

.p-lp-benefit__also-button {
  display: flex;
  align-items: center;
  width: 784px;
  height: 144px;
  margin: 0 auto 64px;
  padding-left: 72px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/bg-benefit-button.png) no-repeat right center;
  background-size: cover;
  font-size: 27px;
  font-weight: bold;
  letter-spacing: 1.35px;
  border-radius: 16px;
  border: solid 1px #fff;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__also-button {
    width: 85%;
    height: 120px;
    padding-left: 50px;
    font-size: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-button {
    width: calc(100% - 24px);
    height: 80px;
    font-size: min(4.26vw, 16px);
    letter-spacing: 0;
    border-radius: 8px;
    padding-left: 16px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
  }
}
.p-lp-benefit__also-button .icon-arrow {
  display: inline-block;
  position: absolute;
  width: 40px;
  height: 40px;
  background: #fff;
  right: 0;
  bottom: 0;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-button .icon-arrow {
    transform: scale(0.6);
    transform-origin: right bottom;
  }
}
.p-lp-benefit__also-button .icon-arrow::before {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  flex-grow: 0;
  border-right: solid 2px #008c95;
  border-top: solid 2px #008c95;
  position: absolute;
  left: calc(50% - 3px);
  top: 50%;
  transform: translate(-50%, -50%) rotate(-315deg);
}
.p-lp-benefit__also-button:hover {
  opacity: 0.8;
}

.p-lp-benefit__also.is-2column {
  position: relative;
}
.p-lp-benefit__also.is-2column .p-lp-benefit__also-content {
  display: flex;
  padding-right: 43px;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also.is-2column .p-lp-benefit__also-content {
    padding-right: 15px;
  }
}
.p-lp-benefit__also.is-2column .p-lp-benefit__also-body {
  max-width: 615px;
  margin-left: 40px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__also.is-2column .p-lp-benefit__also-body {
    max-width: 65%;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also.is-2column .p-lp-benefit__also-body {
    width: 70%;
    margin-left: 3%;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also.is-2column .p-lp-benefit__also-thumb {
    width: 27%;
  }
}
.p-lp-benefit__also.is-2column .p-lp-benefit__also-title {
  padding-top: 15px;
}

.p-lp-benefit__also-text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-text {
    font-size: 14px;
  }
}

.p-lp-benefit__also-button02 {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 27px;
  margin-top: 35px;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-button02 {
    justify-content: flex-start;
  }
}
.p-lp-benefit__also-button02 .c-lp-button.is-white {
  max-width: 260px;
  padding: 8px 16px 8px 24px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  border: solid 1px #008c95;
  box-shadow: 2.1px 4.2px 8.5px 0 rgba(0, 0, 0, 0.1);
  text-align: left;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-button02 .c-lp-button.is-white {
    max-width: 200px;
    padding: 6px 16px;
    font-size: 12px;
  }
}
.p-lp-benefit__also-button02 .c-lp-button.is-white::before {
  width: 7px;
  height: 7px;
  border-width: 1px;
  right: 17px;
  top: 47%;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-button02 .c-lp-button.is-white::before {
    right: 10px;
  }
}
.p-lp-benefit__also-button02 .c-lp-button.is-white:hover {
  box-shadow: none;
}
.p-lp-benefit__also-button02 .c-lp-button.is-white:hover::before {
  right: 12px;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-button02 .c-lp-button.is-white:hover::before {
    right: 9px;
  }
}

.p-lp-benefit__also-camera {
  display: inline-block;
  width: 199px;
  position: absolute;
  left: -18px;
  top: -18px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-benefit__also-camera {
    width: 150px;
    left: -5px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-camera {
    width: 80px;
    left: 10px;
    top: -15px;
  }
}

.p-lp-benefit__also-logos {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 1.91%;
  padding: 30px;
  border-radius: 20px;
  border: solid 1px #ddd;
  background: #fff;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-logos {
    border-radius: 10px;
    padding: 15px 24px;
    gap: 8px 1.93%;
  }
}

.p-lp-benefit__also-logo {
  width: 23%;
}
@media only screen and (max-width: 768px) {
  .p-lp-benefit__also-logo {
    width: 40%;
  }
}
.p-lp-benefit__also-logo img {
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

main.house-construction .p-lp-benefit {
  margin-bottom: min(10.94vw, 168px);
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  main.house-construction .p-lp-benefit {
    margin-bottom: 80px;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-benefit {
    margin-bottom: 83px;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-benefit .c-lp-header {
    margin-bottom: 53px;
  }
}
main.house-construction .p-lp-benefit .p-lp-benefit__item {
  overflow: visible;
}

/*------------------------------------------------------
# p-lp-future
-------------------------------------------------------*/
.p-lp-future {
  letter-spacing: 0;
  padding-top: min(10.94vw, 168px);
  padding-bottom: min(10.94vw, 168px);
}
@media only screen and (max-width: 768px) {
  .p-lp-future {
    padding-top: 104px;
    padding-bottom: 64px;
  }
}

.p-lp-future__content {
  margin-top: 48px;
  position: relative;
}

.p-lp-future__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  position: absolute;
  left: 0;
  top: 0;
}
@media only screen and (max-width: 768px) {
  .p-lp-future__text {
    font-size: 16px;
    position: static;
  }
}

@media only screen and (max-width: 768px) {
  .p-lp-future__figure {
    margin: 0 -24px;
  }
}

/*------------------------------------------------------
# p-lp-safie-one
-------------------------------------------------------*/
.p-lp-safie-one {
  letter-spacing: 0;
  padding-top: min(10.94vw, 168px);
  padding-bottom: min(6.77vw, 104px);
}
@media only screen and (max-width: 768px) {
  .p-lp-safie-one {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}
.p-lp-safie-one .c-lp-header__title {
  text-align: center;
}

.p-lp-safie-one__thumb {
  width: 100%;
  max-width: 992px;
  margin: 64px auto;
  border-radius: 40px;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .p-lp-safie-one__thumb {
    margin: 40px auto;
    border-radius: 17px;
  }
}

.p-lp-safie-one__title {
  font-size: 48px;
  line-height: 1.4;
  margin-bottom: 24px;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .p-lp-safie-one__title {
    font-size: min(5.7vw, 24px);
    margin: 0 -24px 18px;
  }
}

.p-lp-safie-one__text {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}
@media only screen and (max-width: 768px) {
  .p-lp-safie-one__text {
    font-size: 16px;
    margin-bottom: 24px;
    text-align: left;
  }
}

.p-lp-safie-one__button {
  max-width: 440px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .p-lp-safie-one__button {
    max-width: 318px;
  }
}

/*------------------------------------------------------
# p-lp-company
-------------------------------------------------------*/
.p-lp-company {
  letter-spacing: 0;
  padding-bottom: min(6.77vw, 104px);
}
@media only screen and (max-width: 768px) {
  .p-lp-company {
    padding-bottom: 64px;
  }
}
.p-lp-company .wp-block-image {
  margin: 0;
}

@media only screen and (max-width: 768px) {
  main.logistics .p-lp-company {
    padding-bottom: 0;
  }
}

main.house-construction .p-lp-company {
  padding-top: min(10.94vw, 168px);
  padding-bottom: 0;
}

.p-lp-company__logo-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 1.91%;
}
@media only screen and (max-width: 768px) {
  .p-lp-company__logo-wrap {
    gap: 8px 1.93%;
    justify-content: center !important;
    margin-bottom: 0;
  }
}
.p-lp-company__logo-wrap .p-lp-company__logo,
.p-lp-company__logo-wrap figure {
  width: 18.41%;
}
@media only screen and (max-width: 768px) {
  .p-lp-company__logo-wrap .p-lp-company__logo,
  .p-lp-company__logo-wrap figure {
    width: 31.69%;
  }
}
.p-lp-company__logo-wrap.is-6-column {
  gap: 24px 2%;
  justify-content: center;
  margin-bottom: 0;
}
@media only screen and (max-width: 768px) {
  .p-lp-company__logo-wrap.is-6-column {
    justify-content: flex-start;
  }
}
.p-lp-company__logo-wrap.is-6-column .p-lp-company__logo,
.p-lp-company__logo-wrap.is-6-column figure {
  width: 15%;
  margin-right: 0 !important;
}
@media only screen and (max-width: 768px) {
  .p-lp-company__logo-wrap.is-6-column .p-lp-company__logo,
  .p-lp-company__logo-wrap.is-6-column figure {
    width: 31.69%;
  }
}

.p-lp-company__note {
  font-size: 12px;
  text-align: center;
  margin-top: 16px;
}
@media only screen and (max-width: 768px) {
  .p-lp-company__note {
    font-size: 10px;
  }
}

main.house-construction .p-lp-company__logo-wrap.is-6-column .p-lp-company__logo, .p-lp-company__logo-wrap.is-6-column figure {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/*------------------------------------------------------
# p-lp-record
-------------------------------------------------------*/
.p-lp-record {
  letter-spacing: 0;
  padding-bottom: min(10.94vw, 168px);
}
@media only screen and (max-width: 768px) {
  .p-lp-record {
    padding-bottom: 64px;
  }
}

.p-lp-record__item-wrap {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .p-lp-record__item-wrap {
    flex-direction: column;
  }
}

.p-lp-record__item {
  width: 100%;
  max-width: 495px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-lp-record__item {
    max-width: 350px;
    width: 80%;
    margin: 0 auto;
    flex-direction: column;
  }
}
.p-lp-record__item:first-child {
  border-right: solid 1px #ddd;
}
@media only screen and (max-width: 768px) {
  .p-lp-record__item:first-child {
    border-right: none;
    border-bottom: solid 1px #ddd;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
}
.p-lp-record__item:first-child .p-lp-record__note {
  bottom: 13px;
  right: 50px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-record__item:first-child .p-lp-record__note {
    bottom: 10px;
  }
}
.p-lp-record__item:last-child {
  max-width: 530px;
}
@media only screen and (max-width: 768px) {
  .p-lp-record__item:last-child {
    max-width: 350px;
  }
}

.p-lp-record__label {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  color: #000;
  margin-right: 24px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-record__label {
    font-size: 1.8vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-record__label {
    font-size: 3.73vw;
    margin-right: 0;
  }
}

.p-lp-record__detail {
  background-image: linear-gradient(99deg, #6EC5A7 0%, #37BCB0 50%, #0486A4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.p-lp-record__detail .is-digit {
  font-family: "Roboto", sans-serif;
  font-size: 112px;
  font-weight: bold;
  line-height: 1.6;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-record__detail .is-digit {
    font-size: 9.18vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-record__detail .is-digit {
    font-size: 14vw;
    line-height: 1.1;
  }
}
.p-lp-record__detail .is-digit-small {
  font-family: "Roboto", sans-serif;
  font-size: 64px;
  font-weight: bold;
  line-height: 1.6;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-record__detail .is-digit-small {
    font-size: 5.24vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-record__detail .is-digit-small {
    font-size: 8.6vw;
  }
}
.p-lp-record__detail .detail-digit-01 {
  width: 94px;
  display: inline-block;
  margin-left: 9px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-record__detail .detail-digit-01 {
    transform: scale(0.8);
    transform-origin: left bottom;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-record__detail .detail-digit-01 {
    width: 47px;
    margin-left: 5px;
  }
}
.p-lp-record__detail .detail-digit-02 {
  width: 44px;
  display: inline-block;
  margin-left: 9px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-record__detail .detail-digit-02 {
    transform: scale(0.8);
    transform-origin: left bottom;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-record__detail .detail-digit-02 {
    width: 22px;
    margin-left: 5px;
  }
}

.p-lp-record__note {
  display: block;
  position: absolute;
  right: 5px;
  bottom: -5px;
  font-size: 12px;
  line-height: 1.6;
  -webkit-text-fill-color: #000;
  white-space: nowrap;
  text-align: right;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-record__note {
    bottom: -10px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-record__note {
    font-size: 10px;
    white-space: normal;
    position: static;
    text-align: left;
  }
}

.p-lp-record__item-note {
  text-align: center;
  font-size: 12px;
  margin-top: 50px;
}
@media only screen and (max-width: 768px) {
  .p-lp-record__item-note {
    margin-top: 30px;
    text-align: left;
  }
}

/*------------------------------------------------------
# p-lp-install-record
-------------------------------------------------------*/
.p-lp-install-record {
  padding-top: min(6.51vw, 100px);
  padding-bottom: min(3.84vw, 59px);
}
@media only screen and (max-width: 768px) {
  .p-lp-install-record {
    padding-top: 30px;
    padding-bottom: 40px;
  }
}
.p-lp-install-record .l-lp-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-lp-install-record__title {
  font-size: min(3.12vw, 48px);
  font-weight: bold;
  margin-right: 40px;
}
@media only screen and (max-width: 768px) {
  .p-lp-install-record__title {
    font-size: min(5.79vw, 24px);
    margin-right: min(4.83vw, 20px);
  }
}

.p-lp-install-record__badge {
  width: 28.41%;
}
@media only screen and (max-width: 768px) {
  .p-lp-install-record__badge {
    width: 38.64vw;
  }
}

/*------------------------------------------------------
# p-lp-customer
-------------------------------------------------------*/
.p-lp-customer {
  letter-spacing: 0;
  padding-bottom: min(10.94vw, 168px);
}
@media only screen and (max-width: 768px) {
  .p-lp-customer {
    padding-bottom: 64px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-customer .l-lp-inner {
    padding-top: 32px;
  }
}
.p-lp-customer.is-bg-white .l-lp-inner {
  padding-top: min(10.94vw, 168px);
}

.p-lp-customer__item-wrap {
  margin-top: 40px;
  display: flex;
  gap: 0 3.41%;
}
@media only screen and (max-width: 768px) {
  .p-lp-customer__item-wrap {
    flex-direction: column;
    gap: 24px 0;
    align-items: center;
  }
}

.p-lp-customer__item {
  display: flex;
  flex-direction: column;
  width: 31.08%;
  border-radius: 24px;
  box-shadow: 0 0 25.4px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  overflow: hidden;
  padding: 0 40px 40px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-customer__item {
    padding: 0 20px 40px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-customer__item {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 500px;
    width: 100%;
    padding: 24px;
    border-radius: 16px;
  }
}

.p-lp-customer__thumb {
  display: block;
  width: calc(100% + 80px);
  margin-left: -40px;
  margin-bottom: 40px;
  overflow: hidden;
}
.p-lp-customer__thumb.wp-block-image {
  display: block;
  width: calc(100% + 80px);
  margin-left: -40px !important;
  margin-bottom: 40px;
  overflow: hidden;
}
.p-lp-customer__thumb img {
  transition: all 0.4s;
}
.p-lp-customer__thumb img:hover {
  transform: scale(1.1);
}
@media only screen and (max-width: 768px) {
  .p-lp-customer__thumb {
    width: 128px;
    height: 85px;
    margin-left: 0;
    margin-bottom: 0;
  }
}

.p-lp-customer__title {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.6;
  margin: 0 0 16px;
}
.p-lp-customer__title kbd {
  font-family: "Noto Sans JP", sans-serif;
}
.p-lp-customer__title span, .p-lp-customer__title em {
  font-size: 19px;
  font-style: normal;
}
@media only screen and (max-width: 768px) {
  .p-lp-customer__title span, .p-lp-customer__title em {
    font-size: 12px;
  }
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-customer__title {
    font-size: 18px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-customer__title {
    display: flex;
    align-items: center;
    width: calc(100% - 144px);
    margin-left: 16px;
    margin-bottom: 0;
    font-size: 16px;
  }
}

.p-lp-customer__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-customer__text {
    font-size: 16px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-customer__text {
    width: 100%;
    font-size: 14px;
    margin-top: 16px;
  }
}

.p-lp-customer__button {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .p-lp-customer__button {
    width: 100%;
  }
}
.p-lp-customer__button .c-lp-button {
  max-width: 245px;
  padding: 8px 16px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  border: solid 1px #008c95;
  box-shadow: 2.1px 4.2px 8.5px 0 rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 768px) {
  .p-lp-customer__button .c-lp-button {
    max-width: 238px;
    padding: 6px 16px;
    font-size: 12px;
  }
}
.p-lp-customer__button .c-lp-button::before {
  width: 7px;
  height: 7px;
  border-width: 1px;
  right: 17px;
  top: 47%;
}
@media only screen and (max-width: 768px) {
  .p-lp-customer__button .c-lp-button::before {
    right: 10px;
  }
}
.p-lp-customer__button .c-lp-button:hover {
  box-shadow: none;
}
.p-lp-customer__button .c-lp-button:hover::before {
  right: 12px;
}
@media only screen and (max-width: 768px) {
  .p-lp-customer__button .c-lp-button:hover::before {
    right: 9px;
  }
}

.p-lp-customer__item .is-style-c-lp-button.is-white {
  display: flex;
  justify-content: center;
}
.p-lp-customer__item .is-style-c-lp-button.is-white a, .p-lp-customer__item .is-style-c-lp-button.is-white .wp-block-button__link {
  max-width: 245px;
  padding: 8px 16px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  border: solid 1px #008c95;
  box-shadow: 2.1px 4.2px 8.5px 0 rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 768px) {
  .p-lp-customer__item .is-style-c-lp-button.is-white a, .p-lp-customer__item .is-style-c-lp-button.is-white .wp-block-button__link {
    max-width: 238px;
    padding: 6px 16px;
    font-size: 12px;
  }
}
.p-lp-customer__item .is-style-c-lp-button.is-white a::before, .p-lp-customer__item .is-style-c-lp-button.is-white .wp-block-button__link::before {
  width: 7px;
  height: 7px;
  border-width: 1px;
  right: 17px;
  top: 47%;
}
@media only screen and (max-width: 768px) {
  .p-lp-customer__item .is-style-c-lp-button.is-white a::before, .p-lp-customer__item .is-style-c-lp-button.is-white .wp-block-button__link::before {
    right: 10px;
  }
}
.p-lp-customer__item .is-style-c-lp-button.is-white a:hover, .p-lp-customer__item .is-style-c-lp-button.is-white .wp-block-button__link:hover {
  box-shadow: none;
}
.p-lp-customer__item .is-style-c-lp-button.is-white a:hover::before, .p-lp-customer__item .is-style-c-lp-button.is-white .wp-block-button__link:hover::before {
  right: 12px;
}
@media only screen and (max-width: 768px) {
  .p-lp-customer__item .is-style-c-lp-button.is-white a:hover::before, .p-lp-customer__item .is-style-c-lp-button.is-white .wp-block-button__link:hover::before {
    right: 9px;
  }
}

.p-lp-customer__item .wp-block-buttons {
  margin: auto 0 0 !important;
}

/*------------------------------------------------------
# p-lp-flow
-------------------------------------------------------*/
.p-lp-flow {
  letter-spacing: 0;
  padding-top: min(8.33vw, 128px);
  padding-bottom: min(10.94vw, 168px);
}
@media only screen and (max-width: 768px) {
  .p-lp-flow {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

.p-lp-customer.is-bg-white + .p-lp-flow {
  padding-top: 0;
}
@media only screen and (max-width: 768px) {
  .p-lp-customer.is-bg-white + .p-lp-flow {
    padding-top: 0;
  }
}

.p-lp-flow__read {
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  text-align: center;
  margin-top: 40px;
}
@media only screen and (max-width: 768px) {
  .p-lp-flow__read {
    font-size: 16px;
    font-size: min(3.86vw, 16px);
    margin-top: 16px;
    margin-left: -24px;
    margin-right: -24px;
    letter-spacing: -0.05em;
  }
}

.p-lp-flow__item-wrap {
  display: flex;
  gap: 0 40px;
  margin-top: min(5.47vw, 84px);
  position: relative;
}
@media only screen and (max-width: 1279px) {
  .p-lp-flow__item-wrap {
    max-width: 900px;
    flex-direction: column;
    margin: 58px auto 0;
    gap: 48px 0;
  }
}
.p-lp-flow__item-wrap::after {
  content: "";
  display: inline-block;
  width: 100vw;
  height: 4px;
  background-image: linear-gradient(to right, #f4fffc -2%, #c9ffe5 44%, #82eade 67%, #00bac1 89%, #0093b8 108%);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50vw) translateY(-50%);
  z-index: -1;
}
@media only screen and (max-width: 1279px) {
  .p-lp-flow__item-wrap::after {
    width: 6px;
    height: 100%;
    background-image: linear-gradient(to bottom, #c9ffe5 1%, #82eade 33%, #00bac1 64%, #0093b8 100%);
    left: 60px;
    top: 0;
    transform: translateX(0) translateY(0);
  }
}

.p-lp-flow__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 235px;
  padding: 44px 16px 63px;
  border-radius: 24px;
  background-color: #fff;
  position: relative;
  -webkit-filter: drop-shadow(0px 0 12px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(0px 0 12px rgba(0, 0, 0, 0.1));
}
@media only screen and (max-width: 1279px) {
  .p-lp-flow__item {
    width: 100%;
    flex-direction: row;
    padding: 24px;
    border-radius: 16px;
  }
}
.p-lp-flow__item::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 29px solid #ffffff;
  border-right: 0;
  position: absolute;
  z-index: -1;
  right: -29px;
  top: 72px;
}
@media only screen and (max-width: 1279px) {
  .p-lp-flow__item::before {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -25px;
    transform: translateX(-50%) rotate(90deg);
  }
}
.p-lp-flow__item:last-child::before {
  content: none;
}

.p-lp-flow__number {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  border-radius: 79px;
  background-color: #008c95;
  color: #fff;
  font-size: 21px;
  font-weight: bold;
  font-family: "Roboto", sans-serif;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 1279px) {
  .p-lp-flow__number {
    width: 36px;
    height: 36px;
    font-size: 19px;
    left: 62px;
  }
}

.p-lp-flow__icon {
  margin: 0 0 10px;
}
@media only screen and (max-width: 1279px) {
  .p-lp-flow__icon {
    width: 80px;
    margin: 0 25px 0 0;
  }
}
.p-lp-flow__icon.wp-block-image {
  margin: 0 0 10px !important;
}
@media only screen and (max-width: 1279px) {
  .p-lp-flow__icon.wp-block-image {
    width: 80px;
    margin: 0 25px 0 0 !important;
  }
}

@media only screen and (max-width: 1279px) {
  .p-lp-flow__body {
    width: calc(100% - 105px);
  }
}

.p-lp-flow__title {
  font-size: 21px;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  color: #008c95;
  margin-bottom: 16px;
}
@media only screen and (max-width: 1279px) {
  .p-lp-flow__title {
    font-size: 18px;
    text-align: left;
    margin-bottom: 12px;
  }
}

.p-lp-flow__text {
  font-size: 14px;
  font-weight: bold;
  line-height: 2;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 768px) {
  .p-lp-flow__text {
    letter-spacing: 0;
  }
}

main.house-construction .p-lp-flow {
  padding-top: 64px;
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-flow {
    padding-top: 0;
  }
}

/*------------------------------------------------------
# p-lp-tips
-------------------------------------------------------*/
.p-lp-tips {
  letter-spacing: 0;
  padding-bottom: min(13.26vw, 55px);
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-lp-tips {
    padding-bottom: min(13.26vw, 55px);
  }
}
.p-lp-tips .c-lp-header__title {
  font-size: 56px;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .p-lp-tips .c-lp-header__title {
    font-size: 28px;
  }
}
.p-lp-tips .l-lp-inner {
  padding-top: 32px;
}
@media only screen and (max-width: 768px) {
  .p-lp-tips .l-lp-inner {
    padding-top: 0;
  }
}

.p-lp-tips__item-wrap {
  margin-top: 40px;
  display: flex;
  gap: 0 3.33%;
}
@media only screen and (max-width: 768px) {
  .p-lp-tips__item-wrap {
    flex-direction: column;
    gap: 24px 0;
  }
}

.p-lp-tips__item {
  display: flex;
  flex-direction: column;
  width: 31.08%;
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-tips__item {
    padding: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-tips__item {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    padding: 24px;
    margin: 0 auto;
  }
}

.p-lp-tips__thumb {
  display: block;
  overflow: hidden;
}
.p-lp-tips__thumb img {
  transition: all 0.4s;
}
.p-lp-tips__thumb img:hover {
  transform: scale(1.1);
}

.p-lp-tips__title {
  margin-top: 24px;
  font-size: 21px;
  font-weight: bold;
  line-height: 1.6;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-tips__title {
    font-size: 18px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-tips__title {
    font-size: 18px;
  }
}

.p-lp-tips__button {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: 24px;
}
@media only screen and (max-width: 768px) {
  .p-lp-tips__button {
    padding-top: 16px;
  }
}
.p-lp-tips__button .c-lp-button.is-white {
  max-width: 245px;
  padding: 8px 16px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  border: solid 1px #008c95;
  box-shadow: 2.1px 4.2px 8.5px 0 rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 768px) {
  .p-lp-tips__button .c-lp-button.is-white {
    max-width: 238px;
    padding: 6px 16px;
    font-size: 12px;
  }
}
.p-lp-tips__button .c-lp-button.is-white::before {
  width: 7px;
  height: 7px;
  border-width: 1px;
  right: 17px;
  top: 47%;
}
@media only screen and (max-width: 768px) {
  .p-lp-tips__button .c-lp-button.is-white::before {
    right: 10px;
  }
}
.p-lp-tips__button .c-lp-button.is-white:hover {
  box-shadow: none;
}
.p-lp-tips__button .c-lp-button.is-white:hover::before {
  right: 12px;
}
@media only screen and (max-width: 768px) {
  .p-lp-tips__button .c-lp-button.is-white:hover::before {
    right: 9px;
  }
}

.p-lp-tips__item .is-style-c-lp-button.is-white {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
@media only screen and (max-width: 768px) {
  .p-lp-tips__item .is-style-c-lp-button.is-white {
    margin-top: 16px;
  }
}
.p-lp-tips__item .is-style-c-lp-button.is-white a, .p-lp-tips__item .is-style-c-lp-button.is-white .wp-block-button__link {
  max-width: 245px;
  padding: 8px 16px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  border: solid 1px #008c95;
  box-shadow: 2.1px 4.2px 8.5px 0 rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 768px) {
  .p-lp-tips__item .is-style-c-lp-button.is-white a, .p-lp-tips__item .is-style-c-lp-button.is-white .wp-block-button__link {
    max-width: 238px;
    padding: 6px 16px;
    font-size: 12px;
  }
}
.p-lp-tips__item .is-style-c-lp-button.is-white a::before, .p-lp-tips__item .is-style-c-lp-button.is-white .wp-block-button__link::before {
  width: 7px;
  height: 7px;
  border-width: 1px;
  right: 17px;
  top: 47%;
}
@media only screen and (max-width: 768px) {
  .p-lp-tips__item .is-style-c-lp-button.is-white a::before, .p-lp-tips__item .is-style-c-lp-button.is-white .wp-block-button__link::before {
    right: 10px;
  }
}
.p-lp-tips__item .is-style-c-lp-button.is-white a:hover, .p-lp-tips__item .is-style-c-lp-button.is-white .wp-block-button__link:hover {
  box-shadow: none;
}
.p-lp-tips__item .is-style-c-lp-button.is-white a:hover::before, .p-lp-tips__item .is-style-c-lp-button.is-white .wp-block-button__link:hover::before {
  right: 12px;
}
@media only screen and (max-width: 768px) {
  .p-lp-tips__item .is-style-c-lp-button.is-white a:hover::before, .p-lp-tips__item .is-style-c-lp-button.is-white .wp-block-button__link:hover::before {
    right: 9px;
  }
}

.p-lp-tips__item .wp-block-buttons {
  margin-bottom: 0 !important;
}

.p-lp-tips__note {
  padding-top: 84px;
  text-align: center;
  font-size: 15px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-tips__note {
    padding: min(5.47vw, 84px) 10px 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-tips__note {
    font-size: 14px;
    padding: min(5.47vw, 84px) 24px 0;
  }
}
.p-lp-tips__note + .p-lp-tips__note {
  padding-top: 5px;
}
@media only screen and (max-width: 768px) {
  .p-lp-tips__note + .p-lp-tips__note {
    padding-top: 10px;
  }
}

/*------------------------------------------------------
# p-lp-series
-------------------------------------------------------*/
.p-lp-series {
  letter-spacing: 0;
  padding-top: min(10.94vw, 168px);
  padding-bottom: min(10.94vw, 168px);
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-lp-series {
    padding-bottom: 0;
  }
}
.p-lp-series::before {
  content: "";
  display: block;
  width: min(52.63vw, 808px);
  aspect-ratio: 404/197;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/bg-safie-series.png) no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-series::before {
    width: 40vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-series::before {
    top: 0;
    width: 54.8vw;
    height: min(30vw, 150px);
  }
}
.p-lp-series .c-lp-header__title {
  text-align: center;
}
.p-lp-series.is-bg-blue {
  background: #E4F6F7;
}
.p-lp-series.is-bg-wave {
  width: 100%;
  z-index: 1;
}
.p-lp-series.is-bg-wave::before {
  content: "";
  display: block;
  width: min(44.95%, 690px);
  aspect-ratio: 690/751;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/house/bg-safie-series-right.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: auto;
  right: 0;
  top: 0;
}
@media only screen and (max-width: 768px) {
  .p-lp-series.is-bg-wave::before {
    width: 71.25vw;
    height: 90.09vw;
    spect-ratio: 295/373;
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/house/bg-safie-series-right-sp.png);
    background-size: contain;
    background-position: right top;
  }
}
.p-lp-series.is-bg-wave::after {
  content: "";
  display: block;
  width: min(33.15%, 509px);
  aspect-ratio: 509/597;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/house/bg-safie-series-left.png) no-repeat;
  background-size: contain;
  position: absolute;
  left: auto;
  left: 0;
  bottom: 0;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .p-lp-series.is-bg-wave::after {
    content: none;
  }
}

.p-lp-series__item-wrap {
  margin-top: 59px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 3.33%;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-series__item-wrap {
    gap: 0 1.5%;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-series__item-wrap {
    margin-top: 32px;
    gap: 20px 0;
  }
}

.p-lp-series__item {
  width: 31.08%;
  border: solid 1px #ddd;
  border-radius: 20px;
  box-shadow: none;
  background: #fff;
  transform: translateY(0);
  transition: all 0.4s;
}
.p-lp-series__item:hover {
  box-shadow: 0 0 16px 6px hsla(0, 0%, 60%, 0.3);
  transform: translateY(-2%);
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-series__item {
    width: 32.3%;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-series__item {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
  }
}

.p-lp-series__thumb {
  height: 210px;
  background-color: #eee;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  position: relative;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-series__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-series__thumb {
    height: 35.71vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-series__thumb img {
    width: auto;
    height: 100%;
  }
}

.p-lp-series__body {
  padding: 25px 30px 30px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 210px);
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-series__body {
    padding: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-series__body {
    padding: 20px;
  }
}

.p-lp-series__name {
  font-size: 18px;
  font-weight: bold;
}

.p-lp-series__price {
  color: #f00066;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  margin: 8px 0 25px;
}
@media only screen and (max-width: 768px) {
  .p-lp-series__price {
    margin: 5px 0 15px;
  }
}

.p-lp-series__rental {
  font-size: 12px;
  font-weight: bold;
  margin: 8px 0 25px;
}
@media only screen and (max-width: 768px) {
  .p-lp-series__rental {
    margin: 5px 0 15px;
  }
}

.p-lp-series__text {
  font-size: 14px;
}

.p-lp-series__types {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin-top: auto;
  padding-top: 15px;
}
@media only screen and (max-width: 768px) {
  .p-lp-series__types {
    gap: 7px 2%;
    margin-top: 0;
  }
}

.p-lp-series__type {
  width: 53px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-series__type {
    width: 18.2%;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-series__type {
    width: 18.2%;
  }
}

.p-lp-series__type-name {
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  margin-top: 5px;
}

.p-lp-series__netis {
  align-items: center;
  background: #f00066;
  border-radius: 100%;
  color: #fff;
  display: flex;
  width: 80px;
  height: 80px;
  justify-content: center;
  left: -10px;
  line-height: 1.5;
  position: absolute;
  text-align: center;
  top: -10px;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .p-lp-series__netis {
    width: 60px;
    height: 60px;
  }
}
.p-lp-series__netis span {
  font-size: 18px;
}
@media only screen and (max-width: 768px) {
  .p-lp-series__netis span {
    font-size: 14px;
  }
}

.p-lp-series__netis-inner {
  font-size: 12px;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .p-lp-series__netis-inner {
    font-size: 10px;
  }
}

.p-lp-series__note {
  display: flex;
  font-size: 12px;
  margin-top: 5px;
}

.p-lp-series__read {
  font-size: 36px;
  line-height: 1.4;
  font-weight: bold;
  text-align: center;
  margin: 64px auto 40px;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 768px) {
  .p-lp-series__read {
    font-size: 22px;
    margin: 32px auto 20px;
  }
}
.p-lp-series__read span {
  background-image: linear-gradient(99deg, #6EC5A7 0%, #37BCB0 50%, #0486A4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.p-lp-series__button {
  display: flex;
  justify-content: center;
}
.p-lp-series__button .c-lp-button {
  max-width: 440px;
}

.p-lp-series__cv {
  max-width: 989px;
  margin: 104px auto;
  background-image: linear-gradient(320deg, #06748c, #36bab0 100%);
  border-radius: 24px;
  padding: 40px 50px 56px;
}
@media only screen and (max-width: 768px) {
  .p-lp-series__cv {
    border-radius: 12px;
    margin: 48px auto;
    padding: 30px 24px;
  }
}

.p-lp-series__cv-body {
  max-width: 698px;
  margin: 0 auto;
  padding-left: 142px;
  position: relative;
  color: #fff;
}
@media only screen and (max-width: 768px) {
  .p-lp-series__cv-body {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.p-lp-series__cv-body::before {
  display: inline-block;
  content: "";
  width: 102px;
  height: 102px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/icon-headset.svg) no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
}
@media only screen and (max-width: 768px) {
  .p-lp-series__cv-body::before {
    content: none;
  }
}

.p-lp-series__cv-title {
  font-size: 36px;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 8px;
}
@media only screen and (max-width: 768px) {
  .p-lp-series__cv-title {
    font-size: min(5.86vw, 24px);
    margin-bottom: 5px;
    padding-left: 50px;
    position: relative;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-series__cv-title::before {
    display: inline-block;
    content: "";
    width: 40px;
    height: 40px;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/icon-headset.svg) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
  }
}

.p-lp-series__cv-text {
  font-size: 21px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.05em;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-series__cv-text {
    white-space: normal;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-series__cv-text {
    font-size: 16px;
    white-space: normal;
  }
}

.p-lp-series__cv-button {
  width: 100%;
  margin-top: 45px;
}
@media only screen and (max-width: 768px) {
  .p-lp-series__cv-button {
    margin-top: 20px;
  }
}
.p-lp-series__cv-button .c-lp-button {
  max-width: 440px;
}
@media only screen and (max-width: 768px) {
  .p-lp-series__cv-button .c-lp-button {
    margin: 0 auto;
  }
}

.p-lp-series.is-bg-blue .p-lp-series__cv {
  margin-bottom: 0;
}

main.house-construction .p-lp-series {
  padding-top: min(8.33vw, 128px);
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-series {
    padding-top: 70px;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-series .p-lp-series__item-wrap {
    margin-top: 60px;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-series .p-lp-series__button .c-lp-button {
    max-width: 318px;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-series .p-lp-series__cv {
    border-radius: 0;
    margin: 40px -24px 0;
    padding: 40px 11.59vw;
    position: relative;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-series .p-lp-series__cv::before {
    content: "";
    display: block;
    width: 59.66vw;
    height: 76.32vw;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/house/bg-safie-series-left-sp.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    top: -70.53vw;
    z-index: -1;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-series .p-lp-series__cv-body {
    padding-left: 80px;
    align-items: flex-start;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-series .p-lp-series__cv-body::before {
    display: inline-block;
    content: "";
    width: 64px;
    height: 64px;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/icon-headset.svg) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-series .p-lp-series__cv-title {
    font-size: min(5.07vw, 21px);
    padding-left: 0;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-series .p-lp-series__cv-title::before {
    content: none;
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-series .p-lp-series__cv-button {
    width: 100vw;
    position: relative;
    left: calc(50% - 40px);
    transform: translateX(-50%);
  }
}
@media only screen and (max-width: 768px) {
  main.house-construction .p-lp-series .p-lp-series__cv-button .c-lp-button {
    max-width: 318px;
  }
}

/*------------------------------------------------------
# p-lp-operation
-------------------------------------------------------*/
.p-lp-operation {
  letter-spacing: 0;
  padding-top: 53px;
  padding-bottom: min(93.81vw, 144px);
  position: relative;
  background: #E4F6F7;
}
@media only screen and (max-width: 768px) {
  .p-lp-operation {
    padding-bottom: 32px;
  }
}
.p-lp-operation .c-lp-header__title {
  text-align: center;
}

.p-lp-operation__inner {
  max-width: 1428px !important;
}

@media only screen and (max-width: 768px) {
  .p-lp-operation__dx {
    overflow-x: scroll;
    margin-right: -24px;
    padding-right: 20px;
    padding-bottom: 10px;
  }
}

.p-lp-operation__dx-inner {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-lp-operation__dx-inner {
    width: 650px;
  }
}

.p-lp-operation__dx-title {
  text-align: center;
  font-size: 36px;
  line-height: 1.6;
  letter-spacing: 1.8px;
  font-weight: bold;
  margin-bottom: -29px;
  margin-top: 64px;
}
@media only screen and (max-width: 768px) {
  .p-lp-operation__dx-title {
    font-size: 20px;
    margin-top: 24px;
    margin-bottom: 0;
  }
}

.p-lp-operation__figure {
  width: 100%;
  max-width: 1352px;
  margin-left: 16px;
  margin-right: 40px;
  padding-top: 30px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-operation__figure {
    margin-left: 0;
    padding-top: 85px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-operation__figure {
    margin-left: 0;
    padding-top: 60px;
  }
}

.p-lp-operation__list {
  display: inline-block;
  background: rgba(0, 140, 149, 0.9);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
  padding: 38px;
  border-radius: 8px;
  position: relative;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-operation__list {
    padding: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-operation__list {
    padding: 16px;
    border-radius: 8px;
  }
}
.p-lp-operation__list.is-left {
  position: absolute;
  left: 0;
  top: 20px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-operation__list.is-left {
    top: -20px;
  }
}
.p-lp-operation__list.is-left::before {
  content: "";
  display: block;
  width: 63px;
  height: 84px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/icon-camera01.png) no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: -45px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-operation__list.is-left::before {
    transform: scale(0.6);
    top: -50px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-operation__list.is-left::before {
    transform: scale(0.5);
    transform-origin: left;
  }
}
.p-lp-operation__list.is-right {
  position: absolute;
  right: 0;
  bottom: 162px;
  padding: 30px 47px 40px 30px;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .p-lp-operation__list.is-right {
    bottom: 50px;
  }
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-operation__list.is-right {
    padding: 20px;
    bottom: 0;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-operation__list.is-right {
    padding: 16px;
    bottom: 0;
  }
}
.p-lp-operation__list.is-right::before {
  content: "";
  display: block;
  width: 55px;
  height: 66px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/logistics/icon-camera02.png) no-repeat;
  background-size: cover;
  position: absolute;
  right: 30px;
  top: -24px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-operation__list.is-right::before {
    transform: scale(0.6);
    top: -30px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-operation__list.is-right::before {
    transform: scale(0.5);
    transform-origin: right;
    top: -30px;
    right: 20px;
  }
}
.p-lp-operation__list li {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 16px;
  padding-left: 14px;
  position: relative;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-operation__list li {
    font-size: 15px;
    margin-bottom: 8px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-operation__list li {
    font-size: 12px;
    margin-bottom: 4px;
    padding-left: 8px;
  }
}
.p-lp-operation__list li span {
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  padding-top: 8px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-operation__list li span {
    font-size: 12px;
    padding-top: 5px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-operation__list li span {
    font-size: 11px;
    padding-top: 3px;
  }
}
.p-lp-operation__list li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 0;
  top: 8px;
}
@media only screen and (max-width: 768px) {
  .p-lp-operation__list li::before {
    width: 4px;
    height: 4px;
    top: 5px;
  }
}
.p-lp-operation__list li:last-child {
  margin-bottom: 0;
}

/*------------------------------------------------------
# p-lp-collaboration
-------------------------------------------------------*/
.p-lp-collaboration {
  letter-spacing: 0;
  padding-top: min(5.21vw, 80px);
  padding-bottom: min(8.2vw, 126px);
  position: relative;
}
@media only screen and (max-width: 768px) {
  .p-lp-collaboration {
    padding-top: 32px;
    padding-bottom: 64px;
  }
}
.p-lp-collaboration .c-lp-header__title {
  font-size: min(3.12vw, 48px);
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
  .p-lp-collaboration .c-lp-header__title {
    font-size: 28px;
    text-align: center;
  }
}

.p-lp-collaboration__item-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 1.91%;
  margin-top: 40px;
}
@media only screen and (max-width: 768px) {
  .p-lp-collaboration__item-wrap {
    gap: 8px 1.93%;
    margin-top: 20px;
  }
}

.p-lp-collaboration__item {
  width: 18.41%;
}
@media only screen and (max-width: 768px) {
  .p-lp-collaboration__item {
    width: 31.69%;
  }
}
.p-lp-collaboration__item img {
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

/*------------------------------------------------------
# p-lp-progress
-------------------------------------------------------*/
.p-lp-progress {
  letter-spacing: 0;
  padding-bottom: min(11.92vw, 183px);
}
@media only screen and (max-width: 768px) {
  .p-lp-progress {
    padding-top: 64px;
  }
}
.p-lp-progress .l-lp-inner {
  padding-top: 35px;
}
@media only screen and (max-width: 768px) {
  .p-lp-progress .c-lp-header__title {
    font-size: 44px;
    font-size: min(10.62vw, 44px);
    text-align: center;
  }
}

.p-lp-progress__read {
  font-size: 64px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 35px;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__read {
    font-size: 30px;
    margin-bottom: 13px;
  }
}
.p-lp-progress__read span {
  display: inline-block;
  font-size: 56px;
  line-height: 1;
  color: #008C95;
  padding: 0 32px 5px;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__read span {
    font-size: 26px;
    padding: 0 15px 3px;
  }
}
.p-lp-progress__read span::before {
  content: "";
  display: block;
  width: 102px;
  height: 102px;
  border-radius: 50%;
  background: #fff;
  border: solid 2px #008C95;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__read span::before {
    width: 47px;
    height: 47px;
  }
}

.p-lp-progress__figure {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin: 64px calc(50% - 50vw) 0;
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__figure {
    margin-top: 24px;
  }
}

.p-lp-progress__figure-illust {
  display: block;
  max-width: 1535px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__figure-illust {
    max-width: 500px;
  }
}

.p-lp-progress__step-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
  z-index: 2;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-progress__step-wrap {
    gap: 0 12px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__step-wrap {
    max-width: 366px;
    margin: -78px auto 0;
    flex-wrap: wrap;
    gap: 15px min(3.1vw, 18px);
    position: relative;
    left: 0;
    transform: translateX(0);
  }
}

.p-lp-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 248px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 124px;
  border: solid 3px #008C95;
  overflow: hidden;
  box-shadow: 9px 9px 25px rgba(0, 0, 0, 0.15);
  padding-top: 30px;
  transition: all 0.4s;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-progress__step {
    width: 20%;
    padding-top: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__step {
    width: min(42.02vw, 174px);
    padding-top: 20px;
  }
}
.p-lp-progress__step:hover {
  box-shadow: none;
}
.p-lp-progress__step:hover .p-lp-progress__arrow img {
  transform: translateY(2px);
}

.p-lp-progress__step-num {
  font-size: 20px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #008C95;
  text-align: center;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-bottom: 10px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-progress__step-num {
    font-size: 14px;
    margin-bottom: 5px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__step-num {
    font-size: min(3.38vw, 14px);
    margin-bottom: 6px;
  }
}
.p-lp-progress__step-num span {
  display: block;
  font-size: 40px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-progress__step-num span {
    font-size: 3.3vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__step-num span {
    font-size: min(6.76vw, 28px);
  }
}

.p-lp-progress__step-text {
  font-size: 18px;
  font-weight: bold;
  color: #008C95;
  text-align: center;
  line-height: 1.4;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-progress__step-text {
    font-size: 1.4vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__step-text {
    font-size: min(3.14vw, 13px);
  }
}
.p-lp-progress__step-text.is-small {
  font-size: 16px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-progress__step-text.is-small {
    font-size: 1.3vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__step-text.is-small {
    font-size: min(3.14vw, 13px);
  }
}
.p-lp-progress__step-text span {
  display: block;
  font-size: 24px;
  line-height: 1;
  padding-top: 6px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-progress__step-text span {
    font-size: 1.96vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__step-text span {
    font-size: min(4.1vw, 17px);
  }
}

.p-lp-progress__arrow {
  display: flex;
  width: 100%;
  height: 41px;
  justify-content: center;
  align-items: center;
  background: #008C95;
  margin-top: auto;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-progress__arrow {
    height: 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__arrow {
    height: 27px;
  }
}
.p-lp-progress__arrow img {
  transition: all 0.4s;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-progress__arrow img {
    transform: scale(0.8);
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-progress__arrow img {
    width: min(4.4vw, 20px);
  }
}

/*------------------------------------------------------
# p-lp-reason
-------------------------------------------------------*/
.p-lp-reason {
  letter-spacing: 0;
  position: relative;
  z-index: 1;
  padding-bottom: min(10.94vw, 168px);
}
.p-lp-reason::after {
  content: "";
  display: block;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/house/bg-reason.png) no-repeat;
  background-size: 100%;
  width: 100%;
  aspect-ratio: 1536/1045;
  position: absolute;
  top: 0;
  z-index: -1;
}
@media only screen and (max-width: 768px) {
  .p-lp-reason::after {
    background-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/house/bg-reason-sp.png);
  }
}
.p-lp-reason .l-lp-inner {
  padding-top: min(4.69vw, 72px);
}
@media only screen and (max-width: 768px) {
  .p-lp-reason .l-lp-inner {
    padding-top: 0;
  }
}

.p-lp-reason__item-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: min(6.77vw, 104px);
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-reason__item-wrap {
    gap: 40px 2.6%;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-reason__item-wrap {
    gap: 20px 0;
  }
}

.p-lp-reason__item {
  width: 31.08%;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}
@media only screen and (max-width: 768px) {
  .p-lp-reason__item {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    padding: 24px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 768px) {
  .p-lp-reason__thumb {
    width: 128px;
    height: 85px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-reason__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.p-lp-reason__body {
  padding: 24px 40px;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-reason__body {
    padding: 16px 24px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-reason__body {
    display: contents;
  }
}

.p-lp-reason__title {
  font-size: 22px;
  font-weight: bold;
  color: #008C95;
  line-height: 1.6;
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-reason__title {
    font-size: 18px;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-reason__title {
    width: calc(100% - 143px);
    margin-left: 15px;
    font-size: 16px;
  }
}

.p-lp-reason__text {
  margin-top: 8px;
  font-size: 18px;
  line-height: 2;
  font-feature-settings: "palt";
}
@media only screen and (max-width: 1220px) and (min-width: 769px) {
  .p-lp-reason__text {
    font-size: 16px;
    line-height: 1.6;
  }
}
@media only screen and (max-width: 768px) {
  .p-lp-reason__text {
    width: 100%;
    margin-top: 16px;
    font-size: 14px;
  }
}

/*------------------------------------------------------
# u-visible
-------------------------------------------------------*/
.u-visible-sp {
  display: none;
}
@media only screen and (max-width: 768px) {
  .u-visible-sp {
    display: block;
  }
}

.u-visible-pc {
  display: block;
}
@media only screen and (max-width: 768px) {
  .u-visible-pc {
    display: none;
  }
}

.u-visible-tb-s {
  display: block;
}
@media only screen and (max-width: 950px) {
  .u-visible-tb-s {
    display: none;
  }
}

.u-visible-pc-flex {
  display: flex;
}
@media only screen and (max-width: 768px) {
  .u-visible-pc-flex {
    display: none;
  }
}

.u-visible-sp-flex {
  display: none;
}
@media only screen and (max-width: 768px) {
  .u-visible-sp-flex {
    display: flex;
  }
}

.u-display-none {
  display: none !important;
}

/*------------------------------------------------------
# u-lp-bg-grad
-------------------------------------------------------*/
.u-lp-bg-grad {
  width: 100%;
  padding-top: 96px;
  position: relative;
  background-image: linear-gradient(320deg, #36bab0, #06748c 100%);
  -webkit-mask-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/mask-circle-top.svg);
  mask-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/mask-circle-top.svg);
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  mask-position: center top;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .u-lp-bg-grad {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 768px) {
  .u-lp-bg-grad {
    padding-top: 64px;
    -webkit-mask-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/mask-circle-top-sp.svg);
    mask-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/mask-circle-top-sp.svg);
  }
}
.u-lp-bg-grad.is-white {
  background: #fff;
}
.u-lp-bg-grad.is-sp-lg {
  -webkit-mask-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/mask-circle-top-lg-sp.svg);
  mask-image: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/mask-circle-top-lg-sp.svg);
}

/*------------------------------------------------------
# u-lp-bg-blue
-------------------------------------------------------*/
.u-lp-bg-blue {
  width: 100%;
  padding-top: 120px;
  position: relative;
  background: #e4f6f7;
}
@media only screen and (max-width: 768px) {
  .u-lp-bg-blue {
    padding-top: 32.5px;
  }
}
.u-lp-bg-blue::before {
  content: "";
  display: block;
  width: 100%;
  height: 120px;
  background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/bg-blue-top.png) no-repeat center top;
  background-size: 100% 120px;
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (max-width: 1535px) and (min-width: 769px) {
  .u-lp-bg-blue::before {
    height: 6.62vw;
    background-size: 100% 6.62vw;
  }
}
@media only screen and (max-width: 768px) {
  .u-lp-bg-blue::before {
    height: 32.5px;
    background: url(https://22314159.fs1.hubspotusercontent-na1.net/hubfs/22314159/safie-corp/campaign/on-site-dx/img/lp/bg-blue-top-sp.png) no-repeat center top;
    background-size: 100% 32.5px;
  }
}

/**
 * Swiper 9.3.1
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: May 10, 2023
 */
@font-face {
    font-family: swiper-icons;
    src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

.swiper,swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,.swiper-wrapper {
    transform: translate3d(0px,0,0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide,swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform,height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top {
    transform-style: preserve-3d
}

.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0,0,0,.15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-vertical.swiper-css-mode>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-centered>.swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999
}

.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop:always}

.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start:var(--swiper-centered-offset-before)}

.swiper-centered.swiper-horizontal>.swiper-wrapper: :before {
    height:100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start:var(--swiper-centered-offset-before)}

.swiper-centered.swiper-vertical>.swiper-wrapper: :before {
    width:100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color,var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next,.swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset,50%);
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color,var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev {
    display: none!important
}

.swiper-button-next:after,.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none!important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev,.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset,10px);
    right: auto
}

.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after {
    content: 'prev'
}

.swiper-button-next,.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset,10px);
    left: auto
}

.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after {
    content: 'next'
}

.swiper-button-lock {
    display: none
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled {
    display: none!important
}

.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom,8px);
    top: var(--swiper-pagination-top,auto);
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));
    height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius,50%);
    background: var(--swiper-pagination-bullet-inactive-color,#000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none!important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color,var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets {
    right: var(--swiper-pagination-right,8px);
    left: var(--swiper-pagination-left,auto);
    top: 50%;
    transform: translate3d(0px,-50%,0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap,6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform,.2s top
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap,4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform,.2s left
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,:host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform,.2s right
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color,inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color,var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size,4px);
    left: 0;
    top: 0
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar {
    width: var(--swiper-pagination-progressbar-size,4px);
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: var(--swiper-scrollbar-border-radius,10px);
    position: relative;
    -ms-touch-action: none;
    background: var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))
}

.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none!important
}

.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset,1%);
    bottom: var(--swiper-scrollbar-bottom,4px);
    top: var(--swiper-scrollbar-top,auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size,4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))
}

.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar {
    position: absolute;
    left: var(--swiper-scrollbar-left,auto);
    right: var(--swiper-scrollbar-right,4px);
    top: var(--swiper-scrollbar-sides-offset,1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size,4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));
    border-radius: var(--swiper-scrollbar-border-radius,10px);
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move;
    touch-action: none
}

.swiper .swiper-notification,swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid>.swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: '';
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px)
}

.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform,opacity,height
}

.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}