@charset "UTF-8";
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td,
small,
button,
time,
figure {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

li,
dd {
  list-style-type: none;
}

header,
footer,
nav,
section,
article,
main,
aside,
figure,
figcaption {
  display: block;
}

img {
  border: none;
  vertical-align: bottom;
}

.swiper-button-prev,
.swiper-button-next,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
  margin: 0;
  padding: 0;
}

@-webkit-keyframes float {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
}

@keyframes float {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
}
.js-float {
  -webkit-animation: float 5s ease-in-out infinite;
          animation: float 5s ease-in-out infinite;
}

.js-fade-up {
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity 0.8s ease-out, -webkit-transform 0.8s ease-out;
  transition: opacity 0.8s ease-out, -webkit-transform 0.8s ease-out;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out, -webkit-transform 0.8s ease-out;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.js-fade-up.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* ページタイトル単体フェード */
.js-page-title {
  opacity: 0;
  -webkit-transform: translateY(16px);
          transform: translateY(16px);
  -webkit-transition: opacity 0.8s ease, -webkit-transform 0.8s ease;
  transition: opacity 0.8s ease, -webkit-transform 0.8s ease;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition: opacity 0.8s ease, transform 0.8s ease, -webkit-transform 0.8s ease;
}
.js-page-title.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* ページタイトル文字単位フェード */
.js-page-title-split {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.js-page-title-split.is-visible {
  opacity: 1;
}
.js-page-title-split .char {
  opacity: 0;
  -webkit-transform: translateY(16px);
          transform: translateY(16px);
  display: inline-block;
  -webkit-transition: opacity 0.8s ease, -webkit-transform 0.8s ease;
  transition: opacity 0.8s ease, -webkit-transform 0.8s ease;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition: opacity 0.8s ease, transform 0.8s ease, -webkit-transform 0.8s ease;
}
.js-page-title-split.is-visible .char {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.c-cat-tag a,
.p-page-works__category-item a,
.p-page-news-detail__contact-button,
.c-button--submit,
.c-button .c-more-button {
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.c-cat-tag a.is-animating,
.p-page-works__category-item a.is-animating,
.p-page-news-detail__contact-button.is-animating,
.c-button--submit.is-animating,
.c-button .c-more-button.is-animating {
  -webkit-animation: squish 0.4s ease forwards;
          animation: squish 0.4s ease forwards;
}

@-webkit-keyframes squish {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.92);
            transform: scale(0.92);
  }
  80% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes squish {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.92);
            transform: scale(0.92);
  }
  80% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@media screen and (max-width: 1219px) and (min-width: 768px) {
  html {
    font-size: calc(16 / 1220 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: calc(16 / 375 * 100vw);
  }
}

body {
  font-family: "Zen Kaku Gothic New", serif;
  color: #2a424b;
  font-size: max(14px, 1rem);
  background-color: #fffbf9;
  font-weight: 500;
  line-height: 1.4375;
}
@media not screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
}
body.js-show {
  overflow: hidden;
}
body.is-leaving {
  opacity: 0;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}
body.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body.is-front-page.loaded .l-loading {
  display: none;
}
body.is-front-page.loaded .p-main-content {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
  transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
  transition: opacity 1.2s ease, transform 1.2s ease;
  transition: opacity 1.2s ease, transform 1.2s ease, -webkit-transform 1.2s ease;
  position: relative;
  z-index: 1;
}

a {
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: inherit;
}
@media (hover: hover) {
  a:hover {
    cursor: pointer;
  }
}

picture,
img,
a,
span {
  display: inline-block;
}

video,
img,
svg {
  width: 100%;
  height: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: transparent;
  background: none;
  border: none;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
}

@media (min-width: 768px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
.l-main {
  padding-top: 91px;
}
@media not screen and (min-width: 768px) {
  .l-main {
    padding-top: 3.875rem;
  }
}

.l-inner {
  max-width: 1220px;
  width: 100%;
  padding-inline: 2.5rem;
  margin-inline: auto;
}
@media not screen and (min-width: 768px) {
  .l-inner {
    padding-inline: 1.25rem;
  }
}

.l-inner__narrow {
  max-width: 800px;
}
@media not screen and (min-width: 768px) {
  .l-inner__narrow {
    padding-inline: 20px;
    max-width: 335px;
  }
}

.l-section {
  padding-block: 3.75rem;
}
@media not screen and (min-width: 768px) {
  .l-section {
    padding-block: 3.125rem;
  }
}

.l-link__transition-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0; /* 初期は透明 */
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 999;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.l-link__transition-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.l-link__transition-overlay:not(.is-visible) {
  opacity: 0;
  pointer-events: none;
}

.l-page-header {
  width: 100%;
  height: 14.125rem;
  aspect-ratio: 1440/226;
}
@media not screen and (min-width: 768px) {
  .l-page-header {
    height: 142px;
    aspect-ratio: 375/225;
  }
}

.l-page-header__inner {
  max-width: 1280px;
  position: relative;
}

.l-page-main {
  padding-block: 3.125rem 9.75rem;
}
@media not screen and (min-width: 768px) {
  .l-page-main {
    padding-block: 50px 181px;
  }
}
.l-page-main.l-page-main--works {
  padding-block: 3.25rem 13.125rem;
}
@media not screen and (min-width: 768px) {
  .l-page-main.l-page-main--works {
    padding-block: 50px 150px;
  }
}
.l-page-main.l-page-main--works-detail {
  padding-block: 3.3125rem 9.75rem;
}
@media not screen and (min-width: 768px) {
  .l-page-main.l-page-main--works-detail {
    padding-block: 61px 181px;
  }
}
.l-page-main.l-page-main--flow {
  padding-block: 3.875rem 11.25rem;
}
@media not screen and (min-width: 768px) {
  .l-page-main.l-page-main--flow {
    padding-block: 50px 151px;
  }
}

.l-page-main__head-inner {
  max-width: 1356px;
}
.l-page-main--works .l-page-main__head-inner {
  max-width: 1360px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 3.75rem;
}
@media not screen and (min-width: 768px) {
  .l-page-main--works .l-page-main__head-inner {
    gap: 71px;
  }
}
.l-page-main--works-detail .l-page-main__head-inner {
  max-width: 1360px;
  padding-inline: 42px;
}
@media not screen and (min-width: 768px) {
  .l-page-main--works-detail .l-page-main__head-inner {
    padding-inline: 20px;
  }
}
.l-page-main--flow .l-page-main__head-inner {
  max-width: 1338px;
}

.l-page-news__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.l-page-news__layout.l-page-news-detail__layout {
  padding-bottom: 17.8125rem;
}
@media not screen and (min-width: 768px) {
  .l-page-news__layout.l-page-news-detail__layout {
    padding-bottom: 0;
  }
}

.c-section-tittle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.625rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
@media not screen and (min-width: 768px) {
  .c-section-tittle {
    gap: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.c-section-tittle.is-visible .c-section-tittle--en span {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.c-section-tittle.is-visible .c-section-tittle--ja::before {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.c-section-tittle--en {
  color: #9ebfb8;
  font-family: "sofia-pro-soft", sans-serif;
  font-size: clamp(56px, 50.3661971831px + 1.5023474178vw, 72px);
  line-height: 1.22222;
  font-weight: 400;
}
@media not screen and (min-width: 768px) {
  .c-section-tittle--en {
    line-height: 1.3392857143;
  }
}
.c-section-tittle--en span {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: opacity 0.4s ease-out, -webkit-transform 0.4s ease-out;
  transition: opacity 0.4s ease-out, -webkit-transform 0.4s ease-out;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
}

.c-section-tittle--ja {
  color: #2a424b;
  font-weight: 500;
  line-height: 1.4375;
  padding-bottom: 1.3125rem;
  position: relative;
  overflow: hidden;
}
@media not screen and (min-width: 768px) {
  .c-section-tittle--ja {
    padding-bottom: 0;
  }
}
.c-section-tittle--ja::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* セクション背景と同じ色に */
  background: #fffbf9;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 0.6s ease-out;
  transition: -webkit-transform 0.6s ease-out;
  transition: transform 0.6s ease-out;
  transition: transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
  z-index: 1;
}

.c-button {
  border-radius: 5px;
  border: 1px solid #2a424b;
  background-color: #fff;
  color: #2a424b;
  font-weight: 500;
  line-height: 1.4375;
  padding-inline: 1.875rem;
  padding-block: 0.625rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  outline: none;
  font-size: 16px;
  position: relative;
}
@media not screen and (min-width: 768px) {
  .c-button {
    padding-inline: 20px;
    padding-block: 10px;
  }
}
.c-button::after {
  content: "";
  position: absolute;
  background-color: #2a424b;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
@media (any-hover: hover) {
  .c-button:hover {
    color: #fff;
  }
  .c-button:hover::after {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
.c-button.c-button--reverse {
  background-color: #2a424b;
  color: #fff;
  overflow: hidden;
}
.c-button.c-button--reverse::after {
  background-color: #fff;
}
@media (any-hover: hover) {
  .c-button.c-button--reverse:hover {
    color: #2a424b;
  }
}

.c-more-button__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media not screen and (min-width: 768px) {
  .c-more-button__wrapper {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.c-more-button {
  border-radius: 5px;
  border: 1px solid #2a424b;
  background-color: #fff;
  color: #2a424b;
  font-weight: 500;
  line-height: 1.4375;
  padding-inline: 1.125rem 1.0625rem;
  gap: 3.9375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1;
  -webkit-transform-origin: center;
          transform-origin: center;
  position: relative;
}
@media not screen and (min-width: 768px) {
  .c-more-button {
    padding-inline: 23px 17px;
    gap: 28px;
  }
}
.c-more-button::after {
  content: "";
  position: absolute;
  background-color: #2a424b;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
@media (any-hover: hover) {
  .c-more-button:hover {
    color: #fff;
  }
  .c-more-button:hover::after {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  .c-more-button:hover .c-more-button--color {
    stroke: #fff;
  }
}
.c-more-button svg {
  width: 0.5625rem;
  height: 0.5625rem;
}
@media not screen and (min-width: 768px) {
  .c-more-button svg {
    width: 9px;
    height: 9px;
  }
}

.c-more-button--color {
  stroke: #2a424b;
}

.c-buttons--square {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3.4375rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media not screen and (min-width: 768px) {
  .c-buttons--square {
    gap: 20px;
  }
}

.c-button--square {
  border-radius: 10px;
  background-color: #9ebfb8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 8.875rem;
  height: 2.75rem;
  padding: 0.625rem 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  line-height: 1.5;
  white-space: nowrap;
}
@media not screen and (min-width: 768px) {
  .c-button--square {
    width: 142px;
    height: 44px;
    padding: 10px 16px;
  }
}

.c-breadcrumb {
  font-weight: 400;
  line-height: 1.4375;
  letter-spacing: 0.08rem;
  width: 100%;
}
@media not screen and (min-width: 768px) {
  .c-breadcrumb {
    letter-spacing: 1.28px;
  }
}
.c-breadcrumb span {
  display: inline;
}
.c-breadcrumb span a {
  position: relative;
}
.c-breadcrumb span a::before {
  background: #2a424b;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media (any-hover: hover) {
  .c-breadcrumb span a:hover::before {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

.c-breadcrumb__separator {
  width: 0.8125rem;
  height: 0.8125rem;
  background-image: url("../img/grommet-icons_next.svg");
  background-size: contain;
  background-repeat: no-repeat;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-inline: 0.25rem;
  display: inline-block;
}
@media not screen and (min-width: 768px) {
  .c-breadcrumb__separator {
    width: 13px;
    height: 13px;
  }
}

.c-cat-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.6875rem;
}
@media not screen and (min-width: 768px) {
  .c-cat-tags {
    gap: 7px;
  }
}

.c-cat-tag {
  border-radius: 2px;
  border: 1px solid currentColor;
  color: #9ebfb8;
  font-size: max(12px, 0.875rem);
  font-weight: 700;
  line-height: 1.4285714286;
  letter-spacing: 0.07rem;
  padding-block: 0.0625rem;
  padding-inline: 0.4375rem;
  white-space: nowrap;
  -webkit-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s;
}
@media not screen and (min-width: 768px) {
  .c-cat-tag {
    letter-spacing: 1.12px;
    padding-block: 1px;
    padding-inline: 9px;
    font-size: 14px;
  }
}
.c-cat-tag.c-cat-tag--type2 {
  color: #2a424b;
  font-weight: 500;
}

.c-top-button {
  position: absolute;
  right: 5rem;
  bottom: 7.25rem;
  z-index: 103;
  -webkit-transition: opacity 0.6s ease-out, -webkit-transform 0.4s ease-out;
  transition: opacity 0.6s ease-out, -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out, opacity 0.6s ease-out;
  transition: transform 0.4s ease-out, opacity 0.6s ease-out, -webkit-transform 0.4s ease-out;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  will-change: transform, opacity;
}
@media not screen and (min-width: 768px) {
  .c-top-button {
    display: none;
  }
}
.c-top-button.is-flying {
  position: fixed;
  bottom: 19.1875rem;
}
.c-top-button:hover .c-top-button__img-wrapper, .c-top-button.is-hovered .c-top-button__img-wrapper {
  width: 5.75rem;
  height: 12.4375rem;
}
.c-top-button:hover .c-top-button__ballon-string--before,
.c-top-button:hover .c-top-button__cat--before, .c-top-button.is-hovered .c-top-button__ballon-string--before,
.c-top-button.is-hovered .c-top-button__cat--before {
  opacity: 0;
}
.c-top-button:hover .c-top-button__ballon-string--after,
.c-top-button:hover .c-top-button__cat--after, .c-top-button.is-hovered .c-top-button__ballon-string--after,
.c-top-button.is-hovered .c-top-button__cat--after {
  opacity: 1;
}
.c-top-button:hover .c-top-button__cat-hand, .c-top-button.is-hovered .c-top-button__cat-hand {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation: none;
          animation: none;
}

.c-top-button__img-wrapper {
  position: relative;
  width: 5.75rem;
  height: 7.8125rem;
}
@media not screen and (min-width: 768px) {
  .c-top-button__img-wrapper {
    width: 92px;
    height: 125px;
  }
}

.c-top-button__ballon-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.5rem;
  height: 3.1875rem;
}
@media not screen and (min-width: 768px) {
  .c-top-button__ballon-top {
    width: 40px;
    height: 51px;
  }
}

.c-top-button__ballon-string--before {
  position: absolute;
  width: 2.375rem;
  height: 4.875rem;
  bottom: 0.0625rem;
  right: 0.875rem;
}
@media not screen and (min-width: 768px) {
  .c-top-button__ballon-string--before {
    width: 38px;
    height: 78px;
    bottom: 1px;
    right: 14px;
  }
}

.c-top-button__ballon-string--after {
  position: absolute;
  width: 1.375rem;
  height: 5.875rem;
  top: 3.1875rem;
  right: 1.0625rem;
  opacity: 0;
}
@media not screen and (min-width: 768px) {
  .c-top-button__ballon-string--after {
    width: 22px;
    height: 94px;
    top: 51px;
    right: 17px;
  }
}

.c-top-button__cat--before {
  position: absolute;
  width: 3.375rem;
  height: 4.75rem;
  left: 0;
  bottom: 0;
}
@media not screen and (min-width: 768px) {
  .c-top-button__cat--before {
    width: 54px;
    height: 76px;
    left: 0px;
    bottom: 0px;
  }
}
.c-top-button__cat--before .c-top-button__cat-body {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.25rem;
  height: 4.125rem;
}
@media not screen and (min-width: 768px) {
  .c-top-button__cat--before .c-top-button__cat-body {
    width: 52px;
    height: 66px;
  }
}
.c-top-button__cat--before .c-top-button__cat-hand {
  position: absolute;
  width: 1.25rem;
  height: 2.5rem;
  bottom: 2.3125rem;
  left: 1.875rem;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
@media not screen and (min-width: 768px) {
  .c-top-button__cat--before .c-top-button__cat-hand {
    width: 20px;
    height: 40px;
    bottom: 37px;
    left: 30px;
  }
}
.c-top-button__cat--before .c-top-button__cat-hand.animate {
  -webkit-animation: wave 4s ease-in-out infinite;
          animation: wave 4s ease-in-out infinite;
}
@-webkit-keyframes wave {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes wave {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

.c-top-button__cat--after {
  position: absolute;
  width: 3.25rem;
  height: 6.375rem;
  bottom: 0;
  left: 0.5625rem;
  opacity: 0;
}
@media not screen and (min-width: 768px) {
  .c-top-button__cat--after {
    width: 52px;
    height: 102px;
    bottom: 0px;
  }
}

.c-pagination {
  margin-top: 3.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media not screen and (min-width: 768px) {
  .c-pagination {
    margin-top: 80px;
  }
}
.c-pagination ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  padding: 0;
}
.c-pagination li {
  margin-inline: 0.75rem;
}
@media not screen and (min-width: 768px) {
  .c-pagination li {
    margin-inline: 10px;
  }
}
.c-pagination li:first-child {
  margin-left: 0;
}
.c-pagination li:last-child {
  margin-right: 0;
}
.c-pagination li a,
.c-pagination li span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  font-size: 1rem;
  color: #999;
  text-decoration: none;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-family: "sofia-pro-soft", sans-serif;
}
@media not screen and (min-width: 768px) {
  .c-pagination li a,
  .c-pagination li span {
    font-size: 14px;
    gap: 4px;
  }
}
.c-pagination li a i.fa-paw,
.c-pagination li span i.fa-paw {
  font-size: 1.875rem;
}
@media not screen and (min-width: 768px) {
  .c-pagination li a i.fa-paw,
  .c-pagination li span i.fa-paw {
    font-size: 20px;
  }
}
@media (any-hover: hover) {
  .c-pagination li a.paw-link:hover,
  .c-pagination li span.paw-link:hover {
    color: #9ebfb8;
    -webkit-animation: paw-walk 0.4s ease-in-out;
            animation: paw-walk 0.4s ease-in-out;
  }
}
.c-pagination li.is-active span {
  color: #fff;
  background: #9ebfb8;
  border-radius: 6px;
  padding: 0.3125rem 0.5rem;
  -webkit-animation: paw-bounce 0.4s ease-in-out;
          animation: paw-bounce 0.4s ease-in-out;
  font-weight: 600;
}
@media not screen and (min-width: 768px) {
  .c-pagination li.is-active span {
    padding: 5px 8px;
  }
}
.c-pagination li.nav-btn.prev {
  margin-left: 0;
  margin-right: 0.625rem;
}
@media not screen and (min-width: 768px) {
  .c-pagination li.nav-btn.prev {
    margin-right: 5px;
  }
}
.c-pagination li.nav-btn.next {
  margin-right: 0;
  margin-left: 0.625rem;
}
@media not screen and (min-width: 768px) {
  .c-pagination li.nav-btn.next {
    margin-left: 5px;
  }
}
.c-pagination li.nav-btn a {
  font-size: 1.5625rem;
  color: #999;
  -webkit-transition: color 0.4s ease;
  transition: color 0.4s ease;
}
.c-pagination li.nav-btn a i.fas {
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
@media (any-hover: hover) {
  .c-pagination li.nav-btn a:hover {
    color: #9ebfb8;
  }
  .c-pagination li.nav-btn a:hover i.fas {
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
  }
}
@media (any-hover: hover) {
  .c-pagination li.nav-btn.prev a:hover i.fas {
    -webkit-animation-name: arrow-nudge-left;
            animation-name: arrow-nudge-left;
  }
}
@media (any-hover: hover) {
  .c-pagination li.nav-btn.next a:hover i.fas {
    -webkit-animation-name: arrow-nudge-right;
            animation-name: arrow-nudge-right;
  }
}

@-webkit-keyframes paw-bounce {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
  30% {
    -webkit-transform: scale(1.2) translateY(-2px);
            transform: scale(1.2) translateY(-2px);
  }
  60% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
  100% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
}

@keyframes paw-bounce {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
  30% {
    -webkit-transform: scale(1.2) translateY(-2px);
            transform: scale(1.2) translateY(-2px);
  }
  60% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
  100% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
}
@-webkit-keyframes paw-walk {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(0.125rem, -0.125rem);
            transform: translate(0.125rem, -0.125rem);
  }
  60% {
    -webkit-transform: translate(0.25rem, 0);
            transform: translate(0.25rem, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes paw-walk {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  30% {
    -webkit-transform: translate(0.125rem, -0.125rem);
            transform: translate(0.125rem, -0.125rem);
  }
  60% {
    -webkit-transform: translate(0.25rem, 0);
            transform: translate(0.25rem, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes arrow-nudge-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-5px);
            transform: translateX(-5px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes arrow-nudge-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-5px);
            transform: translateX(-5px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes arrow-nudge-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes arrow-nudge-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.p-page-header {
  background-color: #b5c0c1;
}

.p-page-header__head {
  border-radius: 10px;
  background: #fff;
  width: 21.0625rem;
  height: 4.9375rem;
  position: absolute;
  top: 5.1875rem;
  left: 2.4375rem;
}
@media not screen and (min-width: 768px) {
  .p-page-header__head {
    width: clamp(182px, 33.7219387755px + 39.5408163265vw, 337px);
    height: auto;
    aspect-ratio: 182/42;
    border-radius: 5.401px;
    top: calc(88.568877551px + -0.0841836735 * 100vw);
    left: 1.25rem;
  }
}

.p-page-header__head-decoration--head,
.p-page-header__head-decoration--bottom {
  position: relative;
}
.p-page-header__head-decoration--head::before, .p-page-header__head-decoration--head::after,
.p-page-header__head-decoration--bottom::before,
.p-page-header__head-decoration--bottom::after {
  content: "";
  position: absolute;
  width: 0.3125rem;
  height: 0.3125rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-color: #dbbcb5;
  border-radius: 50%;
}
@media not screen and (min-width: 768px) {
  .p-page-header__head-decoration--head::before, .p-page-header__head-decoration--head::after,
  .p-page-header__head-decoration--bottom::before,
  .p-page-header__head-decoration--bottom::after {
    width: 0.125rem;
    height: 0.125rem;
  }
}

.p-page-header__head-decoration--head::before, .p-page-header__head-decoration--head::after {
  top: 0.5625rem;
}
@media not screen and (min-width: 768px) {
  .p-page-header__head-decoration--head::before, .p-page-header__head-decoration--head::after {
    top: 0.25rem;
  }
}
.p-page-header__head-decoration--head::before {
  left: 0.8125rem;
}
@media not screen and (min-width: 768px) {
  .p-page-header__head-decoration--head::before {
    left: 0.4375rem;
  }
}
.p-page-header__head-decoration--head::after {
  right: 0.8125rem;
}
@media not screen and (min-width: 768px) {
  .p-page-header__head-decoration--head::after {
    right: 0.4375rem;
  }
}

.p-page-header__head-decoration--bottom::before, .p-page-header__head-decoration--bottom::after {
  bottom: 0.5625rem;
}
@media not screen and (min-width: 768px) {
  .p-page-header__head-decoration--bottom::before, .p-page-header__head-decoration--bottom::after {
    bottom: 0.25rem;
  }
}
.p-page-header__head-decoration--bottom::before {
  left: 0.8125rem;
}
@media not screen and (min-width: 768px) {
  .p-page-header__head-decoration--bottom::before {
    left: 0.4375rem;
  }
}
.p-page-header__head-decoration--bottom::after {
  right: 0.8125rem;
}
@media not screen and (min-width: 768px) {
  .p-page-header__head-decoration--bottom::after {
    right: 0.4375rem;
  }
}

.p-page-header__title {
  color: #b5c0c1;
  text-align: center;
  font-family: "sofia-pro-soft", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.24rem;
  padding-block: 0.875rem 1rem;
  padding-inline: 1.125rem;
}
@media not screen and (min-width: 768px) {
  .p-page-header__title {
    padding-block: 0.5625rem 0.375rem;
    padding-inline: 0.5625rem;
    font-size: clamp(25.923px, 4.8034209184px + 5.6318877551vw, 48px);
    line-height: 1.0029703352;
    letter-spacing: 0.129625rem;
  }
}
.p-page-header__title.p-page-header__title--works {
  translate: 0.1875rem;
}
@media not screen and (min-width: 768px) {
  .p-page-header__title.p-page-header__title--works {
    translate: 0;
  }
}
.p-page-header__title.p-page-header__title--flow {
  translate: 0.125rem;
}
@media not screen and (min-width: 768px) {
  .p-page-header__title.p-page-header__title--flow {
    translate: 0;
  }
}

.p-page-header__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-page-main__wrapper {
  background-color: #b5c0c1;
}

.p-page-main {
  border-radius: 50px 50px 0px 0px;
  background-color: #fffbf9;
}
@media not screen and (min-width: 768px) {
  .p-page-main {
    border-radius: 20px 20px 0px 0px;
  }
}

.p-news-fv {
  position: absolute;
  bottom: 8.125rem;
  right: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  background-color: #fefefe;
  border: 1px solid #e5e5e5;
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.1);
  max-width: 17.5rem;
  z-index: 10;
  -webkit-transform: perspective(400px) rotateX(2deg) rotateZ(-1.5deg);
          transform: perspective(400px) rotateX(2deg) rotateZ(-1.5deg);
}
@media not screen and (min-width: 768px) {
  .p-news-fv {
    bottom: -4.1875rem;
    padding: 0.375rem 0.75rem;
    max-width: 60%;
    text-align: center;
    overflow: hidden;
  }
}
.p-news-fv::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 0.625rem;
  height: 0.625rem;
  background: #666;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 1px #fff, 0 2px 2px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 0 1px #fff, 0 2px 2px rgba(0, 0, 0, 0.3);
  z-index: 11;
}
@media not screen and (min-width: 768px) {
  .p-news-fv::before {
    top: 0;
    width: 8px;
    height: 8px;
  }
}

.p-news-fv__label {
  font-weight: 600;
  color: #91b1b3;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 1.125rem;
  font-family: "sofia-pro-soft", sans-serif;
  letter-spacing: 0.1em;
  padding-right: 0.625rem;
  position: relative;
}
@media not screen and (min-width: 768px) {
  .p-news-fv__label {
    font-size: 14px;
  }
}
.p-news-fv__label::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  border-radius: 3px;
  background: #e5e6e7;
}
@media not screen and (min-width: 768px) {
  .p-news-fv__label::before {
    display: none;
  }
}

.p-news-fv__marquee {
  overflow: hidden;
  white-space: nowrap;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.p-news-fv__marquee-item {
  display: inline-block;
  -webkit-animation: slideText 15s linear infinite;
          animation: slideText 15s linear infinite;
}

@-webkit-keyframes slideText {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes slideText {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.p-news-fv__article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  gap: 0.625rem;
  font-weight: 600;
  border-bottom: 1px solid #2a424b;
}
@media not screen and (min-width: 768px) {
  .p-news-fv__article {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  .u-sp {
    display: none !important;
  }
}
@media not screen and (min-width: 768px) {
  .u-pc {
    display: none !important;
  }
}
.u-text__center {
  text-align: center !important;
}
@media not screen and (min-width: 768px) {
  .u-text__center--sp {
    text-align: center !important;
  }
}
@media screen and (min-width: 768px) {
  .u-text__center--pc {
    text-align: center !important;
  }
}

.u-text__left {
  text-align: left !important;
}
@media not screen and (min-width: 768px) {
  .u-text__left--sp {
    text-align: left !important;
  }
}
@media screen and (min-width: 768px) {
  .u-text__left--pc {
    text-align: left !important;
  }
}

.u-text__right {
  text-align: right !important;
}
@media not screen and (min-width: 768px) {
  .u-text__right--sp {
    text-align: right !important;
  }
}
@media screen and (min-width: 768px) {
  .u-text__right--pc {
    text-align: right !important;
  }
}

.u-text__nowrap {
  white-space: nowrap;
}
@media not screen and (min-width: 768px) {
  .u-text__nowrap--sp {
    white-space: nowrap;
  }
}
@media screen and (min-width: 768px) {
  .u-text__nowrap--pc {
    white-space: nowrap;
  }
}

.u-pointer__none {
  pointer-events: none !important;
}
@media not screen and (min-width: 768px) {
  .u-pointer__none--sp {
    pointer-events: none !important;
  }
}
@media screen and (min-width: 768px) {
  .u-pointer__none--pc {
    pointer-events: none !important;
  }
}

.hidden-pc {
  display: none;
}
@media not screen and (min-width: 768px) {
  .hidden-pc {
    display: inline-block;
  }
}

.hidden-sp {
  display: inline-block;
}
@media not screen and (min-width: 768px) {
  .hidden-sp {
    display: none;
  }
}

.l-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}
.l-loading.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.p-loading {
  background: #fffbf9;
}

.p-loading__panel {
  font-family: "momochidori", sans-serif;
  font-weight: 500;
  font-size: 3.75rem;
  font-size: clamp(45px, 8.0769230769px + 3.6057692308vw, 60px);
  position: absolute;
  inset: 0;
  background-color: #9ebfb8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: white;
  visibility: hidden;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  padding-inline: 2.5rem;
}
@media not screen and (min-width: 768px) {
  .p-loading__panel {
    font-size: clamp(45px, 39.7183098592px + 1.4084507042vw, 60px);
    line-height: 2;
    padding-inline: 1.25rem;
  }
  .p-loading__panel.hide {
    opacity: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-loading__panel {
    font-size: clamp(45px, 39.7183098592px + 1.4084507042vw, 60px);
  }
}
.p-loading__panel span {
  display: inline-block;
}

.p-loading__door-container {
  width: 163px;
  height: 282px;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
  z-index: 5;
}
.p-loading__door-container.show {
  opacity: 1;
}

.p-loading__door-frame-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.p-loading__door {
  position: absolute;
  inset: 0;
  background: url("../img/animation/door-close.svg") no-repeat center/contain;
  -webkit-transform-origin: right center;
          transform-origin: right center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
  z-index: 2;
}
.p-loading__door.opening {
  -webkit-animation: doorOpen 2.2s ease-in-out forwards;
          animation: doorOpen 2.2s ease-in-out forwards;
}

@-webkit-keyframes doorOpen {
  to {
    -webkit-transform: rotateY(-70deg);
            transform: rotateY(-70deg);
  }
}

@keyframes doorOpen {
  to {
    -webkit-transform: rotateY(-70deg);
            transform: rotateY(-70deg);
  }
}
.p-loading__door-mark-img {
  position: absolute;
  top: -19px;
  right: -6px;
  width: 22px;
  height: 14px;
  opacity: 0;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition: opacity 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease;
  z-index: 4;
}
.p-loading__door-mark-img.show {
  opacity: 1;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-animation: doorMarkBlink 1s infinite;
          animation: doorMarkBlink 1s infinite;
}

@-webkit-keyframes doorMarkBlink {
  50% {
    opacity: 0;
  }
}

@keyframes doorMarkBlink {
  50% {
    opacity: 0;
  }
}
.p-loading-light--flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
  transition: opacity 1s ease, -webkit-transform 1s ease;
  transition: transform 1s ease, opacity 1s ease;
  transition: transform 1s ease, opacity 1s ease, -webkit-transform 1s ease;
  z-index: 3;
  pointer-events: none;
}
.p-loading-light--flash.active {
  -webkit-transform: translate(-50%, -50%) scale(1.5);
          transform: translate(-50%, -50%) scale(1.5);
  opacity: 1;
}

.p-loading--fade-white {
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0;
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
  z-index: 9998;
  pointer-events: none;
}
.p-loading--fade-white.show {
  opacity: 1;
}
.p-loading--fade-white.hide {
  opacity: 0;
}

.l-header {
  height: 91px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  z-index: 100;
  background: url("../img/header-bg.webp") repeat-x left top;
  background-size: 100% 100%;
}
@media not screen and (min-width: 768px) {
  .l-header {
    background: url("../img/sp/header-bg.webp") repeat-x left top;
    background-size: 23.4375rem 3.875rem;
    height: 3.875rem;
  }
}

.l-header__inner {
  height: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-inline: 5rem 4.125rem;
  width: 100%;
}
@media not screen and (min-width: 768px) {
  .l-header__inner {
    padding-inline: 1.25rem;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.p-header__logo {
  color: #2a424b;
  font-family: "sofia-pro-soft", sans-serif;
  font-size: max(18px, 1.5rem);
  line-height: 1.5;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  padding-block: 1.625rem 2.3125rem;
  font-weight: 400;
}
@media not screen and (min-width: 768px) {
  .p-header__logo {
    font-size: clamp(16px, 8.3469387755px + 2.0408163265vw, 24px);
    line-height: 2.25;
    padding-block: 0;
  }
}
@media (any-hover: hover) {
  .p-header__logo:hover {
    opacity: 0.8;
  }
}

.p-header__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.375rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: auto;
}
@media not screen and (min-width: 768px) {
  .p-header__nav {
    display: none;
  }
}

.p-header__list {
  padding-block: 1.8125rem 2.3125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5625rem;
}
.p-header__list li {
  color: #2a424b;
  text-align: right;
  font-family: "sofia-pro-soft", sans-serif;
  font-size: max(16px, 1.25rem);
  line-height: 1.4;
  position: relative;
  font-weight: 400;
}
.p-header__list li::before {
  background: #2a424b;
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media (any-hover: hover) {
  .p-header__list li:hover::before {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

.p-header__btn {
  width: 7.5625rem;
  height: 4.6875rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  padding-block: 0.8125rem 0.0625rem;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
@media (any-hover: hover) {
  .p-header__btn:hover {
    -webkit-animation: bounce 0.6s ease;
            animation: bounce 0.6s ease;
  }
}
.p-header__btn::after {
  content: "";
  position: absolute;
  background: url("../img/header-letter-postmark.webp") no-repeat center center/contain;
  width: 6.25rem;
  height: 3rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  top: 1.25rem;
  left: 0.789375rem;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  70% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  70% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.p-drawer__icon {
  display: none;
}
@media not screen and (min-width: 768px) {
  .p-drawer__icon {
    width: min(32px, 1.875rem);
    height: min(32px, 1.75rem);
    position: relative;
    display: block;
    z-index: 102;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.6s ease;
    transition: -webkit-transform 0.6s ease;
    transition: transform 0.6s ease;
    transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  }
  .p-drawer__icon .p-drawer__icon-dot {
    position: absolute;
    width: min(9px, 0.5rem);
    height: min(9px, 0.5rem);
    background-color: #2a424b;
    border-radius: 2px;
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transition: opacity 0.3s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.3s ease, -webkit-transform 0.5s ease;
    transition: transform 0.5s ease, opacity 0.3s ease;
    transition: transform 0.5s ease, opacity 0.3s ease, -webkit-transform 0.5s ease;
  }
  .p-drawer__icon .p-drawer__icon-dot--1 {
    top: 25%;
    left: 25%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .p-drawer__icon .p-drawer__icon-dot--2 {
    top: 25%;
    left: 75%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .p-drawer__icon .p-drawer__icon-dot--3 {
    top: 75%;
    left: 25%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .p-drawer__icon .p-drawer__icon-dot--4 {
    top: 75%;
    left: 75%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .p-drawer__icon.is-unlock .p-drawer__icon-dot--1 {
    -webkit-transform: translate(-100%, -100%) scale(1.2);
            transform: translate(-100%, -100%) scale(1.2);
  }
  .p-drawer__icon.is-unlock .p-drawer__icon-dot--2 {
    -webkit-transform: translate(50%, -100%) scale(1.2);
            transform: translate(50%, -100%) scale(1.2);
  }
  .p-drawer__icon.is-unlock .p-drawer__icon-dot--3 {
    -webkit-transform: translate(-100%, 50%) scale(1.2);
            transform: translate(-100%, 50%) scale(1.2);
  }
  .p-drawer__icon.is-unlock .p-drawer__icon-dot--4 {
    -webkit-transform: translate(50%, 50%) scale(1.2);
            transform: translate(50%, 50%) scale(1.2);
  }
  .p-drawer__icon.is-checked {
    -webkit-transform: translateX(calc(-100vw + clamp(188px, 28.2423469388px + 42.6020408163vw, 355px))) translateY(-0.5625rem);
            transform: translateX(calc(-100vw + clamp(188px, 28.2423469388px + 42.6020408163vw, 355px))) translateY(-0.5625rem);
  }
  .p-drawer__icon.is-checked .p-drawer__icon-dot--1 {
    top: 50%;
    left: 50%;
    width: 22px;
    height: 2px;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg);
  }
  .p-drawer__icon.is-checked .p-drawer__icon-dot--4 {
    top: 50%;
    left: 50%;
    width: 22px;
    height: 2px;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
            transform: translate(-50%, -50%) rotate(-45deg);
  }
  .p-drawer__icon.is-checked .p-drawer__icon-dot--2,
  .p-drawer__icon.is-checked .p-drawer__icon-dot--3 {
    opacity: 0;
  }
  .p-drawer__icon.is-unchecking {
    -webkit-transition: -webkit-transform 0.6s ease;
    transition: -webkit-transform 0.6s ease;
    transition: transform 0.6s ease;
    transition: transform 0.6s ease, -webkit-transform 0.6s ease;
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}

.p-header__bg {
  background-color: #fffbf9;
  width: 100%;
  height: 91px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
@media not screen and (min-width: 768px) {
  .p-header__bg {
    height: 3.875rem;
  }
}
.p-header__bg.p-header__bg--page {
  background-color: #b5c0c1;
}

.l-drawer {
  display: none;
}
@media not screen and (min-width: 768px) {
  .l-drawer {
    width: 15.25rem;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 101;
    -webkit-transition: none;
    transition: none;
    display: block;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@-webkit-keyframes slideFadeIn {
  from {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideFadeIn {
  from {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
.p-drawer {
  background-color: #fff;
  border-radius: 0px 0px 0px 50px;
}
.p-drawer.is-open {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  -webkit-animation: drawerOpen 0.6s forwards;
          animation: drawerOpen 0.6s forwards;
}
.p-drawer.is-open .p-drawer__list li {
  opacity: 0;
}
.p-drawer.is-open .p-drawer__list li:nth-child(1) {
  -webkit-animation: slideFadeIn 0.6s ease forwards 0.15s;
          animation: slideFadeIn 0.6s ease forwards 0.15s;
}
.p-drawer.is-open .p-drawer__list li:nth-child(2) {
  -webkit-animation: slideFadeIn 0.6s ease forwards 0.3s;
          animation: slideFadeIn 0.6s ease forwards 0.3s;
}
.p-drawer.is-open .p-drawer__list li:nth-child(3) {
  -webkit-animation: slideFadeIn 0.6s ease forwards 0.45s;
          animation: slideFadeIn 0.6s ease forwards 0.45s;
}
.p-drawer.is-open .p-drawer__list li:nth-child(4) {
  -webkit-animation: slideFadeIn 0.6s ease forwards 0.6s;
          animation: slideFadeIn 0.6s ease forwards 0.6s;
}
.p-drawer.is-open .p-drawer__list li:nth-child(5) {
  -webkit-animation: slideFadeIn 0.6s ease forwards 0.75s;
          animation: slideFadeIn 0.6s ease forwards 0.75s;
}
.p-drawer.is-open .p-drawer__list li:nth-child(6) {
  -webkit-animation: slideFadeIn 0.6s ease forwards 0.9s;
          animation: slideFadeIn 0.6s ease forwards 0.9s;
}
.p-drawer.is-open .p-drawer__list li:nth-child(7) {
  -webkit-animation: slideFadeIn 0.6s ease forwards 1.05s;
          animation: slideFadeIn 0.6s ease forwards 1.05s;
}
.p-drawer.is-open .p-drawer__list li:nth-child(8) {
  -webkit-animation: slideFadeIn 0.6s ease forwards 1.2s;
          animation: slideFadeIn 0.6s ease forwards 1.2s;
}
.p-drawer.is-closing {
  -webkit-animation: drawerClose 0.6s forwards;
          animation: drawerClose 0.6s forwards;
}

@-webkit-keyframes drawerOpen {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  20% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes drawerOpen {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  20% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes drawerClose {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes drawerClose {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
.p-drawer__body {
  padding-block: 4.0625rem 1.875rem;
  padding-left: 2.5rem;
}

.p-drawer__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.3125rem;
}
.p-drawer__list a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.p-drawer__list-menu--en {
  color: #2a424b;
  font-family: "sofia-pro-soft", sans-serif;
  font-size: 24px;
  line-height: 1.3333333333;
  font-weight: 400;
}

.p-drawer__list-menu--ja {
  color: #8cbcb5;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4285714286;
}

.p-header-letter__postmark {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 6.25rem;
  height: 6.25rem;
  background: url("../img/header-letter-postmark.webp") no-repeat center center/contain;
}
@media not screen and (min-width: 768px) {
  .p-header-letter__postmark {
    width: 5rem;
  }
}

.l-fv {
  padding-block: 3.0625rem 31.625rem;
  overflow: hidden;
}
@media not screen and (min-width: 768px) {
  .l-fv {
    padding-block: 2.9375rem calc(30.375rem + 33px);
  }
}

#js-main-view {
  opacity: 0; /* 最初は見えない */
  -webkit-transform: scale(1.25);
          transform: scale(1.25); /* 少し拡大された状態 */
  -webkit-transition: opacity 1.2s ease-out, -webkit-transform 1.2s ease-out;
  transition: opacity 1.2s ease-out, -webkit-transform 1.2s ease-out;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out, -webkit-transform 1.2s ease-out;
}
#js-main-view.is-zoom {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.l-fv__inner {
  position: relative;
}

.p-fv__tittle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.p-fv__tittle-main {
  color: #9ebfb8;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #2a424b;
  font-family: "sofia-pro-soft", sans-serif;
  font-weight: 600;
}
.p-fv__tittle-main:nth-child(1) {
  font-size: 3.1506875rem;
  line-height: 0.9918470175;
}
@media not screen and (min-width: 768px) {
  .p-fv__tittle-main:nth-child(1) {
    font-size: 1.8904375rem;
    line-height: 0.9918339009;
  }
}
.p-fv__tittle-main:nth-child(2) {
  font-size: 5.75rem;
  line-height: 1;
  margin-top: 0.1875rem;
  letter-spacing: 0.01875rem;
}
@media not screen and (min-width: 768px) {
  .p-fv__tittle-main:nth-child(2) {
    margin-top: 0;
    font-size: 3.45rem;
    line-height: 0.9963768116;
  }
}

.p-fv__tittle-sub {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.4583333333;
  margin-top: 0.9375rem;
}
@media not screen and (min-width: 768px) {
  .p-fv__tittle-sub {
    font-size: 1rem;
    line-height: 1.4375;
    margin-top: 0.625rem;
  }
}

.p-fv__tittle-main.text-fadeup,
.p-fv__tittle-sub.text-fadeup {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: opacity 0.8s ease, -webkit-transform 0.8s ease;
  transition: opacity 0.8s ease, -webkit-transform 0.8s ease;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition: opacity 0.8s ease, transform 0.8s ease, -webkit-transform 0.8s ease;
  will-change: opacity, transform;
}
.p-fv__tittle-main.text-fadeup.show,
.p-fv__tittle-sub.text-fadeup.show {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.p-fv__shelf {
  width: 19.1875rem;
  position: absolute;
  top: 15.75rem;
  left: 2.5rem;
  -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
          filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
@media not screen and (min-width: 768px) {
  .p-fv__shelf {
    width: 8.625rem;
    top: 13.8125rem;
    left: 1.3125rem;
  }
}

.p-fv__desk-group-wrapper {
  position: absolute;
  top: 14.3125rem;
  right: 15.0625rem;
}
@media not screen and (min-width: 768px) {
  .p-fv__desk-group-wrapper {
    top: 22.6875rem;
    right: 5.875rem;
  }
}

.p-fv__desk-group {
  position: relative;
}

.p-fv__desk {
  width: 27.5rem;
}
@media not screen and (min-width: 768px) {
  .p-fv__desk {
    width: 13.875rem;
  }
}

.p-fv__desk-lamp {
  width: 6.875rem;
  left: 2.5625rem;
  top: 3.5625rem;
  position: absolute;
}
@media not screen and (min-width: 768px) {
  .p-fv__desk-lamp {
    width: 3.5rem;
    left: 1.3125rem;
    top: 1.875rem;
  }
}

.p-fv__desk-note {
  width: 7.25rem;
  left: 9.5rem;
  top: 8.3125rem;
  position: absolute;
}
@media not screen and (min-width: 768px) {
  .p-fv__desk-note {
    width: 3.625rem;
    left: 4.75rem;
    top: 4.1875rem;
  }
}

.p-fv__desk-coffee {
  position: absolute;
  left: 5.875rem;
  bottom: 10.6875rem;
}
@media not screen and (min-width: 768px) {
  .p-fv__desk-coffee {
    left: 3rem;
    bottom: 5.1875rem;
  }
}
.p-fv__desk-coffee svg {
  width: 4.1875rem;
  height: 5.4375rem;
}
@media not screen and (min-width: 768px) {
  .p-fv__desk-coffee svg {
    width: 2.125rem;
    height: 2.6875rem;
  }
}

.p-fv__desk-pen {
  width: 2.5rem;
  position: absolute;
  left: 9.9375rem;
  top: 12.1875rem;
}
@media not screen and (min-width: 768px) {
  .p-fv__desk-pen {
    width: 1.25rem;
    left: 5.0625rem;
    top: 5.75rem;
  }
}

#rolling-pen {
  -webkit-animation: roll 4s ease-in-out infinite;
          animation: roll 4s ease-in-out infinite;
}

@-webkit-keyframes roll {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  25% {
    -webkit-transform: translateX(3px);
            transform: translateX(3px);
  }
  50% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  75% {
    -webkit-transform: translateX(-3px);
            transform: translateX(-3px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes roll {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  25% {
    -webkit-transform: translateX(3px);
            transform: translateX(3px);
  }
  50% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  75% {
    -webkit-transform: translateX(-3px);
            transform: translateX(-3px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
.p-fv__pc {
  width: 11.25rem;
  position: absolute;
  right: 3.9375rem;
  top: -3.375rem;
}
@media not screen and (min-width: 768px) {
  .p-fv__pc {
    width: 5.625rem;
    right: 1.9375rem;
    top: -1.6875rem;
  }
}

.p-fv__sp {
  position: absolute;
  right: 1.5625rem;
  top: 2.75rem;
}
@media not screen and (min-width: 768px) {
  .p-fv__sp {
    right: 0.6875rem;
    top: 0.375rem;
  }
}
.p-fv__sp svg {
  width: 3.375rem;
  height: 3.9375rem;
}
@media not screen and (min-width: 768px) {
  .p-fv__sp svg {
    width: 1.875rem;
    height: 3.9375rem;
  }
}

/* スマホ通知とメッセージの出現アニメーション */
/* 通知（フェードイン・フェードアウト） */
@-webkit-keyframes fadeNotification {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeNotification {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.p-fv__chair {
  width: 12rem;
  top: 20.625rem;
  right: 6.125rem;
  position: absolute;
}
@media not screen and (min-width: 768px) {
  .p-fv__chair {
    width: 6rem;
    top: 26.0625rem;
    right: 1.3125rem;
  }
}

.p-fv__artwork-item--blue {
  width: 3.25rem;
  position: absolute;
  top: 5.625rem;
  right: 9.5625rem;
}
@media not screen and (min-width: 768px) {
  .p-fv__artwork-item--blue {
    width: 1.625rem;
    top: 17.875rem;
    right: 4.6875rem;
  }
}

.p-fv__artwork-item--orange {
  width: 2.875rem;
  position: absolute;
  top: 10.8125rem;
  right: 5rem;
}
@media not screen and (min-width: 768px) {
  .p-fv__artwork-item--orange {
    width: 1.5rem;
    top: 20.375rem;
    right: 2.25rem;
  }
}

.p-fv__socket {
  width: 0.75rem;
  position: absolute;
  top: 29.4375rem;
  right: 0.5rem;
}
@media not screen and (min-width: 768px) {
  .p-fv__socket {
    width: 0.375rem;
    top: 34.1875rem;
    right: 0.8125rem;
  }
}

.l-works {
  padding-block: 0 3.75rem;
  overflow: hidden;
}
@media not screen and (min-width: 768px) {
  .l-works {
    padding-block: 0 33px;
  }
}

.p-works {
  position: relative;
}

.p-works__slider {
  margin-top: 2.5rem;
  margin-right: calc(50% - 50vw);
}
@media not screen and (min-width: 768px) {
  .p-works__slider {
    margin-top: 50px;
  }
}

.p-works__swiper-wrapper {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}

.p-works__swiper-slide {
  width: 23.6875rem;
}
@media not screen and (min-width: 768px) {
  .p-works__swiper-slide {
    width: 310px;
  }
}

.p-works-card {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.9375rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media not screen and (min-width: 768px) {
  .p-works-card {
    gap: 15px;
  }
}
@media (any-hover: hover) {
  .p-works-card:hover .p-works-card__image-container::after {
    opacity: 1;
  }
  .p-works-card:hover .p-works-card__image--top {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  .p-works-card:hover .p-works-card__image--bottom {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .p-works-card:hover .p-works-card__overlay-text {
    opacity: 1;
  }
  .p-works-card:hover .p-works-card__tittle {
    opacity: 0.8;
    font-weight: 700;
  }
  .p-works-card:hover .c-cat-tag {
    background-color: #9ebfb8;
    color: #fff;
  }
}

.p-works-card__image-container {
  overflow: hidden;
  width: 100%;
  height: auto;
  aspect-ratio: 380/230;
  position: relative;
}
.p-works-card__image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* マスクの色と透明度 */
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  z-index: 3;
}
@media not screen and (min-width: 768px) {
  .p-works-card__image-container {
    aspect-ratio: 310/210;
  }
}

.p-works-card__image {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-transition: -webkit-transform 0.5s ease-in;
  transition: -webkit-transform 0.5s ease-in;
  transition: transform 0.5s ease-in;
  transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
}
.p-works-card__image.p-works-card__image--top {
  z-index: 2;
}
.p-works-card__image.p-works-card__image--bottom {
  z-index: 1;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.p-works-card__image img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  border: 1px solid #e1d7d0;
}

.p-works-card__overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  z-index: 4;
  width: 80%;
}

.p-works-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  overflow: hidden;
}
@media not screen and (min-width: 768px) {
  .p-works-card__body {
    gap: 8px;
  }
}

.p-works-card__tittle {
  font-weight: 500;
  line-height: 1.4375;
  letter-spacing: 1.28px;
  -webkit-transition: opacity 0.3s, font-weight 0.3s;
  transition: opacity 0.3s, font-weight 0.3s;
}

/* 位置の設定と外枠 */
.swiper-pagination-progressbar.swiper-pagination-horizontal {
  top: 2.8125rem;
  right: 5.1875rem;
  height: 5px;
  left: auto;
  width: 16.5rem;
  border-radius: 4px;
  background-color: #d9d9d9;
}
@media not screen and (min-width: 768px) {
  .swiper-pagination-progressbar.swiper-pagination-horizontal {
    width: 8.4375rem;
    right: 8.4375rem;
    top: auto;
    bottom: 112px;
    height: 5px;
  }
}

/* activeな部分 */
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: #9ebfb8;
  border-radius: 4px;
}

.p-works__button {
  margin-top: 2.5rem;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-right: 5rem;
  max-width: 1440px;
}
@media not screen and (min-width: 768px) {
  .p-works__button {
    margin-top: 76px;
    padding-right: 0;
    max-width: 100%;
    width: auto;
    margin-right: 25px;
    margin-left: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-works__button {
    margin-top: 1.875rem;
  }
}

.p-works__more {
  padding-block: 0.5rem 0.4375rem;
}
@media not screen and (min-width: 768px) {
  .p-works__more {
    padding-block: 7px;
  }
}

.l-service__inner {
  padding-inline: min(150px, 10.4166666667vw) min(81px, 5.625vw);
  max-width: 1440px;
}
@media not screen and (min-width: 768px) {
  .l-service__inner {
    padding-inline: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-service__inner {
    padding-inline: 2.5rem;
  }
}

.p-service__content {
  margin-block: 2.5rem 3.4375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media not screen and (min-width: 768px) {
  .p-service__content {
    margin-block: 2.5rem 0;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3.75rem;
  }
}

.p-service__image {
  width: clamp(335px, 319.1549295775px + 4.2253521127vw, 380px);
}
@media not screen and (min-width: 768px) {
  .p-service__image {
    margin-inline: auto;
  }
}

.p-service__boxes {
  width: 47.1464019851%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.6875rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: clamp(0px, -41.8461538462px + 4.0865384615vw, 17px);
  margin-left: auto;
}
@media not screen and (min-width: 768px) {
  .p-service__boxes {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.3125rem;
    -ms-flex-item-align: stretch;
        align-self: stretch;
    margin-top: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-service__boxes {
    margin-top: 1.0625rem;
  }
}

.p-service-box {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.p-service-box.is-open .p-service__head-button::before {
  rotate: 0deg;
}
.p-service-box.is-open .p-service__accordion {
  max-height: 1000px;
  opacity: 1;
  margin-top: 1.5625rem;
  padding-block: 2.5rem 3.375rem;
  padding-inline: 3.3125rem 4.8125rem;
}
@media not screen and (min-width: 768px) {
  .p-service-box.is-open .p-service__accordion {
    padding-block: 1.375rem 2.125rem;
    padding-inline: 1.5rem 3.6875rem;
  }
}

.p-service__head {
  padding-block: 1.0625rem 0.9375rem;
  padding-inline: 3.1875rem 3.25rem;
  width: 100%;
  gap: 0.6875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid #9ebfb8;
  background-color: #fff;
}
@media not screen and (min-width: 768px) {
  .p-service__head {
    padding-block: 0.75rem 0.9375rem;
    padding-inline: 1.1875rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media (any-hover: hover) {
  .p-service__head:hover .p-service__head-num,
  .p-service__head:hover .p-service__head-text {
    opacity: 0.8;
    font-weight: 700;
  }
  .p-service__head:hover .p-service__head-button::after {
    opacity: 0.8;
  }
}

.p-service__head-num {
  font-size: max(16px, 1.25rem);
  font-weight: 500;
  line-height: 1.35;
  -webkit-transition: opacity 0.3s, font-weight 0.3s;
  transition: opacity 0.3s, font-weight 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-service__head-num {
    font-size: 16px;
    line-height: 1.6875;
  }
}

.p-service__head-text {
  font-size: max(16px, 1.125rem);
  font-weight: 500;
  line-height: 1.5;
  display: block;
  padding-right: 4.9375rem;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: left;
  -webkit-transition: opacity 0.3s, font-weight 0.3s;
  transition: opacity 0.3s, font-weight 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-service__head-text {
    font-size: 16px;
    line-height: 1.6875;
    padding-right: 3.9375rem;
  }
}

.p-service__head-button {
  position: relative;
}
.p-service__head-button::after, .p-service__head-button::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background: url("../img/toggle-service.svg") no-repeat center center/contain;
  top: 50%;
  translate: 0 -50%;
  right: 0;
}
.p-service__head-button::before {
  rotate: 90deg;
  -webkit-transition: rotate 0.3s ease;
  transition: rotate 0.3s ease;
}
.p-service__head-button::after {
  rotate: 0deg;
}

.p-service__accordion {
  border-radius: 10px;
  border: 1px solid #9ebfb8;
  margin-top: 0;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-block: 0;
  padding-inline: 0;
  -webkit-transition: max-height 0.5s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.4s, padding 0.4s, margin 0.4s;
  transition: max-height 0.5s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.4s, padding 0.4s, margin 0.4s;
}
.p-service__accordion::after {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background: url("../img/toggle-service.svg") no-repeat center center/contain;
  top: 1.5rem;
  right: 2.875rem;
}
@media not screen and (min-width: 768px) {
  .p-service__accordion::after {
    width: 24px;
    height: 24px;
    top: 10px;
    right: 14px;
  }
}

.p-service__accordion-lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.25rem;
}
@media not screen and (min-width: 768px) {
  .p-service__accordion-lists {
    gap: 20px;
  }
}

.p-service__accordion-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.3125rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .p-service__accordion-list {
    gap: 5px;
  }
}

.p-service__accordion-list-tittle {
  font-size: max(16px, 1.125rem);
  line-height: 1.4444444444;
  letter-spacing: 0.09rem;
}
@media not screen and (min-width: 768px) {
  .p-service__accordion-list-tittle {
    font-size: 16px;
    line-height: 1.4375;
    letter-spacing: 1.28px;
  }
}

.p-service__accordion-list-text,
.p-service__accordion-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4285714286;
  letter-spacing: 1.12px;
  display: block;
}
@media not screen and (min-width: 768px) {
  .p-service__accordion-list-text,
  .p-service__accordion-text {
    line-height: 1.78571;
  }
}

@media not screen and (min-width: 768px) {
  .p-skill {
    margin-top: clamp(0px, -45.9183673469px + 12.2448979592vw, 48px);
  }
}

.p-skill__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 1.9375rem;
  gap: 3.5625rem;
}
@media not screen and (min-width: 768px) {
  .p-skill__wrapper {
    margin-top: 2.5rem;
    gap: 3.6875rem;
  }
}

.p-skill__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.25rem 3.5625rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin-bottom: 1.0625rem;
  padding: 0;
  margin-inline: auto;
  max-width: 1200px;
}
@media not screen and (min-width: 768px) {
  .p-skill__items {
    gap: 3.6875rem;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-skill__items {
    width: 100%;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    max-width: none;
    gap: 3.5625rem;
  }
}

.p-skill__item {
  width: clamp(240px, 237.7142857143px + 0.2976190476vw, 242px);
  height: auto;
  aspect-ratio: 1/1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  padding-inline: 1.5rem 1.4375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
  position: relative;
}
@media not screen and (min-width: 768px) {
  .p-skill__item {
    max-width: 302px;
    width: 100%;
    margin-inline: auto;
    aspect-ratio: 302/210;
    padding-inline: 35px 28px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    gap: 17px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-skill__item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 calc(25% - 2rem);
            flex: 1 1 calc(25% - 2rem);
  }
}
.p-skill__item.is-html {
  padding-block: 6rem 3.875rem;
}
@media not screen and (min-width: 768px) {
  .p-skill__item.is-html {
    padding-block: 59px 14px;
  }
}
.p-skill__item.is-html .p-skill__svg {
  color: #D7CCC2;
}
.p-skill__item.is-css {
  padding-block: 6.4375rem 2.25rem;
}
@media not screen and (min-width: 768px) {
  .p-skill__item.is-css {
    padding-block: 52px 19px;
  }
}
.p-skill__item.is-css .p-skill__svg {
  color: #E1B7C0;
}
.p-skill__item.is-js {
  padding-block: 6rem 2.6875rem;
}
@media not screen and (min-width: 768px) {
  .p-skill__item.is-js {
    padding-block: 47px 16px;
  }
}
.p-skill__item.is-js .p-skill__svg {
  color: #91B1B3;
}
.p-skill__item.is-wp {
  padding-block: 6rem 3.9375rem;
}
@media not screen and (min-width: 768px) {
  .p-skill__item.is-wp {
    padding-block: 47px 54px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-skill__item.is-wp {
    padding-block: 4.875rem 3.375rem;
  }
}
.p-skill__item.is-wp .p-skill__svg {
  color: #C9D4BF;
}
.p-skill__item.is-cursor {
  padding-block: 5rem 3.875rem;
}
@media not screen and (min-width: 768px) {
  .p-skill__item.is-cursor {
    padding-block: 47px 14px;
  }
}
.p-skill__item.is-cursor .p-skill__svg {
  color: #CABEE3;
}
.p-skill__item.is-git {
  padding-block: 5rem 3.875rem;
}
@media not screen and (min-width: 768px) {
  .p-skill__item.is-git {
    padding-block: 47px 14px;
  }
}
.p-skill__item.is-git .p-skill__svg {
  color: #F3C29D;
}
.p-skill__item.is-gulp {
  padding-block: 5rem 3.875rem;
}
@media not screen and (min-width: 768px) {
  .p-skill__item.is-gulp {
    padding-block: 47px 14px;
  }
}
.p-skill__item.is-gulp .p-skill__svg {
  color: #F6D5D3;
}

.p-skill__svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
@media not screen and (min-width: 768px) {
  .p-skill__svg {
    width: 100%;
    height: 100%;
  }
  .p-skill__svg path {
    width: 100%;
  }
}
.p-skill__svg.p-skill__svg--pc {
  display: block;
}
@media not screen and (min-width: 768px) {
  .p-skill__svg.p-skill__svg--pc {
    display: none;
  }
}
.p-skill__svg.p-skill__svg--sp {
  display: none;
}
@media not screen and (min-width: 768px) {
  .p-skill__svg.p-skill__svg--sp {
    display: block;
    width: 100%;
    height: auto;
  }
}

.p-skill__item-tittle {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  text-align: center;
  font-size: max(16px, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  position: relative;
  z-index: 1;
}
@media not screen and (min-width: 768px) {
  .p-skill__item-tittle {
    font-size: 20px;
  }
}

.p-skill__item-text {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4285714286;
  position: relative;
  z-index: 1;
}

.l-flow__inner {
  padding-inline: 2.5rem;
}
@media not screen and (min-width: 768px) {
  .l-flow__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3.0625rem;
    padding-inline: 1.25rem;
  }
}

.p-flow__head-text {
  margin-top: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.3125rem;
}
@media not screen and (min-width: 768px) {
  .p-flow__head-text {
    padding-inline: 1rem;
    font-size: clamp(14px, 12.0867346939px + 0.5102040816vw, 16px);
    margin-top: calc(-40px + -61 * (100vw - 375px) / 392);
    line-height: 1.7;
    gap: 5px;
  }
}

.p-flow__estimate-link a {
  position: relative;
  display: inline;
  font-weight: 600;
}
@media not screen and (min-width: 768px) {
  .p-flow__estimate-link a {
    text-decoration: underline;
  }
}
.p-flow__estimate-link a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background-color: #2a424b;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-flow__estimate-link a::after {
    display: none;
  }
}
@media (any-hover: hover) {
  .p-flow__estimate-link a:hover::after {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
  }
}

.p-flow__lists {
  margin-top: 3.75rem;
  padding-top: 1.5625rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2.5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}
@media not screen and (min-width: 768px) {
  .p-flow__lists {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.875rem 0.625rem;
    padding: 0;
    margin-inline: auto;
    max-width: 500px;
    margin-top: calc(0px + -40 * (100vw - 375px) / 392);
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-flow__lists {
    margin-top: 4.5rem;
  }
}
.p-flow__lists::before {
  content: "";
  position: absolute;
  background: url("../img/flow-line.webp") no-repeat center center/contain;
  width: max(71.1875rem, 100%);
  height: auto;
  aspect-ratio: 1139/170;
  top: 0;
  left: 0;
}
@media not screen and (min-width: 768px) {
  .p-flow__lists::before {
    display: none;
  }
}

.p-flow__list {
  width: 7.5rem;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-color: #e3db8a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media not screen and (min-width: 768px) {
  .p-flow__list {
    width: 5rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 0.25rem;
    padding-top: 0.375rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 calc(25% - 0.625rem);
            flex: 0 1 calc(25% - 0.625rem);
  }
  .p-flow__list:nth-child(1), .p-flow__list:nth-child(5) {
    padding-top: 0.25rem;
  }
}

.p-flow__list-num {
  color: #508b82;
  text-align: center;
  font-size: clamp(12px, 10.0867346939px + 0.5102040816vw, 14px);
  line-height: 1.3333333333;
}

.p-flow__list-text {
  text-align: center;
  font-size: max(14px, 1.125rem);
  line-height: 1.38889;
}
@media not screen and (min-width: 768px) {
  .p-flow__list-text {
    font-size: clamp(13px, 10.1301020408px + 0.7653061224vw, 16px);
    line-height: 1.4;
    word-break: keep-all;
  }
}

.p-flow__button {
  margin-top: 3.375rem;
  text-align: right;
}
@media not screen and (min-width: 768px) {
  .p-flow__button {
    margin-top: 0;
    text-align: center;
  }
}

.p-flow__more {
  padding-block: 0.5625rem 0.375rem;
}
@media not screen and (min-width: 768px) {
  .p-flow__more {
    padding-block: 8px 7px;
    padding-inline: 15px 16px;
    gap: 62px;
  }
}

.p-flow__line {
  margin-top: 5rem;
  width: 100%;
  height: 8.625rem;
  background: url("../img/flow-line.webp") no-repeat center center/contain;
}
@media not screen and (min-width: 768px) {
  .p-flow__line {
    display: none;
  }
}

.l-about {
  padding-bottom: 1.25rem;
}
@media not screen and (min-width: 768px) {
  .l-about {
    padding-bottom: 3.125rem;
  }
}

.p-about__content {
  margin-top: -1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media not screen and (min-width: 768px) {
  .p-about__content {
    margin-top: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-item-align: stretch;
        align-self: stretch;
    max-width: 500px;
    margin-inline: auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-about__content {
    max-width: 800px;
    margin-inline: auto;
  }
}

.p-about__image {
  width: clamp(335px, 304.3661971831px + 8.1690140845vw, 422px);
  height: auto;
  aspect-ratio: 422/453;
}
@media not screen and (min-width: 768px) {
  .p-about__image {
    margin-inline: auto;
  }
}

.p-about__profile-wrapper {
  width: 426px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.3125rem;
  padding-top: 5.0625rem;
}
@media not screen and (min-width: 768px) {
  .p-about__profile-wrapper {
    width: 100%;
    gap: 2.3125rem;
    padding-top: 0;
    margin-top: -2px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-about__profile-wrapper {
    width: 41.6666666667vw;
  }
}

@media not screen and (min-width: 768px) {
  .p-about__profile {
    margin-top: clamp(0px, -7.6530612245px + 2.0408163265vw, 8px);
  }
}

.p-about__profile-name {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.4642857143;
  letter-spacing: 2.24px;
}
@media not screen and (min-width: 768px) {
  .p-about__profile-name {
    text-align: center;
    font-size: 28px;
  }
}
.p-about__profile-name span {
  font-size: 1.5rem;
  line-height: 1.52;
}
@media not screen and (min-width: 768px) {
  .p-about__profile-name span {
    font-size: 24px;
  }
}

.p-about__profile-text {
  line-height: 1.4375;
  font-weight: 500;
  letter-spacing: 0.08rem;
}
.p-about__profile-text span {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, rgba(255, 255, 0, 0.5)));
  background: linear-gradient(transparent 60%, rgba(255, 255, 0, 0.5) 60%);
}
.p-about__profile-text:nth-of-type(4) {
  font-size: 14px;
}
.p-about__profile-text:nth-of-type(4) a {
  position: relative;
  padding-left: 1.125rem;
}
@media not screen and (min-width: 768px) {
  .p-about__profile-text:nth-of-type(4) a {
    padding-left: 18px;
  }
}
.p-about__profile-text:nth-of-type(4) a::before {
  background: #2a424b;
  content: "";
  width: calc(100% - 1.125rem);
  height: 1px;
  position: absolute;
  left: 1.125rem;
  bottom: 0.125rem;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-about__profile-text:nth-of-type(4) a::before {
    bottom: 2px;
    left: 18px;
    width: calc(100% - 18px);
  }
}
.p-about__profile-text:nth-of-type(4) a::after {
  content: "";
  position: absolute;
  background: url("../img/about-arrow.svg") no-repeat center center/contain;
  width: 0.9375rem;
  height: 0.9375rem;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media not screen and (min-width: 768px) {
  .p-about__profile-text:nth-of-type(4) a::after {
    width: 15px;
    height: 15px;
  }
}
@media (any-hover: hover) {
  .p-about__profile-text:hover::before {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
  }
}
@media not screen and (min-width: 768px) {
  .p-about__profile-text:nth-of-type(1) {
    text-align: center;
  }
  .p-about__profile-text:nth-of-type(2), .p-about__profile-text:nth-of-type(3) {
    font-size: 14px;
    line-height: 1.4285714286;
    letter-spacing: 1.12px;
  }
}
.p-about__profile-text + .p-about__profile-text {
  margin-top: 1.1875rem;
}
@media not screen and (min-width: 768px) {
  .p-about__profile-text + .p-about__profile-text {
    margin-top: 21px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

@media not screen and (min-width: 768px) {
  .p-message__tittle {
    padding-left: 9px;
  }
}

.p-message__content {
  margin-top: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media not screen and (min-width: 768px) {
  .p-message__content {
    margin-top: 51px;
    gap: 3.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    max-width: 375px;
    margin-inline: auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-message__content {
    max-width: 800px;
    margin-inline: auto;
  }
}

.p-message__image {
  width: clamp(290px, 259.014084507px + 8.2629107981vw, 378px);
}
@media not screen and (min-width: 768px) {
  .p-message__image {
    margin-inline: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-right: 2.875rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-message__image {
    width: clamp(268px, 201.7411764706px + 8.6274509804vw, 290px);
  }
}

.p-message__body {
  width: 43.1578947368%;
  background: url("../img/message/message-frame.svg") no-repeat center center/contain;
  height: auto;
  aspect-ratio: 492/259;
  padding-block: 5rem 4.8125rem;
  padding-inline: 4.3125rem 4.6875rem;
  margin-right: 2.625rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: -0.6875rem;
}
@media not screen and (min-width: 768px) {
  .p-message__body {
    width: min(19.0625rem, 100%);
    aspect-ratio: 305/227;
    padding-block: 1.625rem 1.25rem;
    padding-inline: 1.6875rem 1.0625rem;
    margin-inline: auto;
    background: url("../img/sp/message-main.svg") no-repeat center center/contain;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-message__body {
    width: clamp(400px, 309.6470588235px + 11.7647058824vw, 430px);
    margin-right: 0;
  }
}

.p-message__text {
  letter-spacing: 0.08rem;
  line-height: 1.4375;
}
@media not screen and (min-width: 768px) {
  .p-message__text {
    font-size: 14px;
    line-height: 1.4285714286;
    letter-spacing: 1.12px;
  }
}
.p-message__text + .p-message__text {
  margin-top: 0.8em;
}
.p-message__text a {
  position: relative;
  font-weight: 500;
}
@media not screen and (min-width: 768px) {
  .p-message__text a {
    text-decoration: underline;
    display: inline;
  }
}
.p-message__text a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #2a424b;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-message__text a::after {
    display: none;
  }
}
@media (any-hover: hover) {
  .p-message__text a:hover::after {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
  }
}

.l-news {
  padding-block: 3.0625rem 4.8125rem;
}
@media not screen and (min-width: 768px) {
  .l-news {
    padding-block: 3.125rem 3.875rem;
  }
}

.p-news__content {
  margin-top: 2.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media not screen and (min-width: 768px) {
  .p-news__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 71px;
    gap: 45px;
  }
}

.p-news__image {
  width: 33.1578947368%;
  height: auto;
  aspect-ratio: 378/298;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-block: 1.375rem 1.3125rem;
  padding-inline: 3.0625rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media not screen and (min-width: 768px) {
  .p-news__image {
    width: clamp(228px, 178.2551020408px + 13.2653061224vw, 280px);
    height: auto;
    aspect-ratio: 228/206;
    padding-block: 0;
    padding-inline: 0;
    margin-inline: auto;
  }
}

.p-news__cards {
  width: max(400px, 50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 8px;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  margin-top: 23px;
}
@media not screen and (min-width: 768px) {
  .p-news__cards {
    width: 100%;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 0.5rem;
    margin-top: 23px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-news__cards {
    gap: 15px;
  }
}

.p-news-card__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 16px;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  padding-bottom: 5px;
  border-bottom: 1px solid #c9c9c9;
}
@media not screen and (min-width: 768px) {
  .p-news-card__link {
    padding-bottom: 10px;
    gap: 1rem;
  }
}
@media (any-hover: hover) {
  .p-news-card__link:hover .p-news-card__image img {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  .p-news-card__link:hover .c-cat-tag {
    background-color: #9ebfb8;
    color: #fff;
  }
  .p-news-card__link:hover .p-news-card__date,
  .p-news-card__link:hover .p-news-card__tittle {
    opacity: 0.8;
  }
}

.p-news-card__image {
  width: 6.125rem;
  overflow: hidden;
}
@media not screen and (min-width: 768px) {
  .p-news-card__image {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-news-card__image {
    display: none;
  }
}
.p-news-card__image img {
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.p-news-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 5px;
  width: 80%;
}
@media not screen and (min-width: 768px) {
  .p-news-card__body {
    width: 100%;
    gap: 0.3125rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-news-card__body {
    width: 100%;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    gap: 10px;
  }
}

.p-news-card__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
@media not screen and (min-width: 768px) {
  .p-news-card__meta {
    gap: 1.125rem;
  }
}

.p-news-card__date {
  line-height: 1.4375;
  letter-spacing: 0.08rem;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.p-news-card__cat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-block: 1px;
  padding-inline: 5px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 2px;
  border: 1px solid #9ebfb8;
  color: #9ebfb8;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4285714286;
  letter-spacing: 1.12px;
}
@media not screen and (min-width: 768px) {
  .p-news-card__cat {
    padding-block: 1px;
    padding-inline: 5px;
  }
}

.p-news-card__tittle {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4285714286;
  letter-spacing: 1.12px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-news-card__tittle {
    line-height: clamp(20px, 10.4336734694px + 2.5510204082vw, 30px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-news-card__tittle {
    line-height: 2.1428571429;
  }
}

.p-news__button {
  margin-top: 17px;
  margin-left: auto;
}
@media not screen and (min-width: 768px) {
  .p-news__button {
    margin-inline: auto;
    margin-top: 1.0625rem;
  }
}

.p-news__more {
  padding-block: 0.5rem 0.4375rem;
}
.p-news__more::before {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
@media not screen and (min-width: 768px) {
  .p-news__more {
    padding-block: 8px 7px;
    padding-inline: 17px 18px;
    gap: 62px;
  }
}

.l-contact {
  padding-bottom: 13.75rem;
  position: relative;
}
@media not screen and (min-width: 768px) {
  .l-contact {
    padding-bottom: 3rem;
  }
}

.p-contact-form__content {
  margin-top: 2.5625rem;
  width: 627px;
  margin-inline: auto;
}
@media not screen and (min-width: 768px) {
  .p-contact-form__content {
    margin-top: 48px;
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-contact-form__content {
    width: min(39.1875rem, 100%);
  }
}

.wpcf7-form {
  margin-bottom: 0;
}

.p-contact-form__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.625rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media not screen and (min-width: 768px) {
  .p-contact-form__items {
    gap: 0.5rem;
  }
}

.p-contact-form__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
  width: 100%;
}
@media not screen and (min-width: 768px) {
  .p-contact-form__item {
    gap: 0.0625rem;
  }
}
.p-contact-form__item.p-contact-form__item--radio {
  margin-top: -0.375rem;
  gap: 0.5rem;
}
@media not screen and (min-width: 768px) {
  .p-contact-form__item.p-contact-form__item--radio {
    margin-top: -6px;
    gap: 0.1875rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-contact-form__item.p-contact-form__item--radio {
    gap: 0.1875rem;
  }
}
.p-contact-form__item.p-contact-form__item--textarea {
  margin-top: 0.125rem;
  gap: 0.125rem;
}
@media not screen and (min-width: 768px) {
  .p-contact-form__item.p-contact-form__item--textarea {
    margin-top: 0;
    gap: 0.625rem;
  }
}

.p-contact-form__item-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
}
@media not screen and (min-width: 768px) {
  .p-contact-form__item-head {
    gap: 0.625rem;
  }
}

.p-contact-form__item-label {
  line-height: 2.25;
}

.p-contact-form__item-tag {
  background-color: #9ebfb8;
  border-radius: 2px;
  padding-inline: 0.375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.8333333333;
}
@media not screen and (min-width: 768px) {
  .p-contact-form__item-tag {
    padding-inline: 0.375rem;
  }
}

.p-contact-form__item-input {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-top: 0;
}

.wpcf7-form-control-wrap {
  width: 100%;
}

.p-contact-form__item-text,
.p-contact-form__item-textarea {
  width: 100%;
  border: 1px solid #898989;
  background-color: #fff;
  font-weight: 500;
  line-height: 2.25;
  -webkit-transition: border-color 0.3s, border-width 0.3s;
  transition: border-color 0.3s, border-width 0.3s;
}
.p-contact-form__item-text::-webkit-input-placeholder, .p-contact-form__item-textarea::-webkit-input-placeholder {
  color: #b4b4b4;
}
.p-contact-form__item-text::-moz-placeholder, .p-contact-form__item-textarea::-moz-placeholder {
  color: #b4b4b4;
}
.p-contact-form__item-text:-ms-input-placeholder, .p-contact-form__item-textarea:-ms-input-placeholder {
  color: #b4b4b4;
}
.p-contact-form__item-text::-ms-input-placeholder, .p-contact-form__item-textarea::-ms-input-placeholder {
  color: #b4b4b4;
}
.p-contact-form__item-text::placeholder,
.p-contact-form__item-textarea::placeholder {
  color: #b4b4b4;
}
.p-contact-form__item-text:focus,
.p-contact-form__item-textarea:focus {
  outline: none;
  border-color: #9ebfb8;
}
@media (any-hover: hover) {
  .p-contact-form__item-text:hover,
  .p-contact-form__item-textarea:hover {
    border-color: #9ebfb8;
    border-width: 0.125rem;
  }
}

.p-contact-form__item-text {
  height: 2.5625rem;
  padding-inline: 1.5625rem;
  padding-block: 0.0625rem 0.125rem;
}
@media not screen and (min-width: 768px) {
  .p-contact-form__item-text {
    height: 43px;
    padding-inline: 11px;
    padding-block: 1px 2px;
  }
}

.p-contact-form__item-radios {
  width: 100%;
}

.wpcf7-list-item {
  margin: 0;
}

.p-contact-form__item-radio {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media not screen and (min-width: 768px) {
  .p-contact-form__item-radio {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-contact-form__item-radio {
    grid-template-columns: repeat(1, 1fr);
  }
}

input[type=radio] {
  width: 1px;
  height: 1px;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}
input[type=radio]:checked + .wpcf7-list-item-label::after {
  opacity: 1;
}
input[type=radio]:focus + .wpcf7-list-item-label::before {
  border-color: #9ebfb8;
}
@media (any-hover: hover) {
  input[type=radio]:hover + .wpcf7-list-item-label::before {
    border-color: #9ebfb8;
    border-width: 0.125rem;
  }
}

.wpcf7-list-item-label {
  font-weight: 400;
  line-height: 2.25;
  padding-left: 1.875rem;
  position: relative;
  -webkit-transition: border-color 0.3s, border-width 0.3s;
  transition: border-color 0.3s, border-width 0.3s;
  white-space: nowrap;
}
@media not screen and (min-width: 768px) {
  .wpcf7-list-item-label {
    padding-left: 30px;
  }
}
.wpcf7-list-item-label button {
  position: relative;
  -webkit-transition: font-weight 0.3s;
  transition: font-weight 0.3s;
}
.wpcf7-list-item-label button::before {
  background: #2a424b;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media (any-hover: hover) {
  .wpcf7-list-item-label button:hover {
    font-weight: 500;
  }
  .wpcf7-list-item-label button:hover::before {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
  }
}
.wpcf7-list-item-label::before, .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.wpcf7-list-item-label::before {
  width: 1.25rem;
  height: 1.25rem;
  left: 0;
  border: 1px solid #2a424b;
  background-color: #fff;
  -webkit-transition: border-color 0.3s, border-width 0.3s;
  transition: border-color 0.3s, border-width 0.3s;
}
@media not screen and (min-width: 768px) {
  .wpcf7-list-item-label::before {
    width: 20px;
    height: 20px;
  }
}
.wpcf7-list-item-label::after {
  width: 1.25rem;
  height: 1.25rem;
  background: url("../img/check.svg") no-repeat center center/cover;
  left: 0.0625rem;
  opacity: 0;
}
@media not screen and (min-width: 768px) {
  .wpcf7-list-item-label::after {
    left: 1px;
    width: 20px;
    height: 20px;
  }
}

.p-contact-form__item-textarea {
  padding-block: 1.3125rem;
  padding-inline: 0.5625rem;
  height: 11.1875rem;
  resize: vertical;
}
@media not screen and (min-width: 768px) {
  .p-contact-form__item-textarea {
    padding-block: 30px;
    padding-inline: 19px 16px;
    height: 252px;
    line-height: 1.4375;
  }
}

.p-contact-form__privacy {
  margin-top: -0.0625rem;
}
@media not screen and (min-width: 768px) {
  .p-contact-form__privacy {
    margin-top: 0;
    padding-block: 0.125rem;
    margin-inline: auto;
  }
}

.p-contact-form__privacy-input {
  width: 1px;
  height: 1px;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}
.p-contact-form__privacy-input:checked + .wpcf7-list-item-label::after {
  opacity: 1;
}
.p-contact-form__privacy-input:focus + .wpcf7-list-item-label::before {
  border-color: #9ebfb8;
}
@media (any-hover: hover) {
  .p-contact-form__privacy-input:hover + .wpcf7-list-item-label::before {
    border-color: #9ebfb8;
    border-width: 0.125rem;
  }
}

.wpcf7-turnstile {
  margin-top: 10px;
}
@media not screen and (min-width: 768px) {
  .wpcf7-turnstile {
    margin-inline: auto;
  }
}

.p-contact-form__button {
  margin-top: 1.25rem;
  margin-inline: auto;
}
@media not screen and (min-width: 768px) {
  .p-contact-form__button {
    margin-top: 30px;
  }
}

.p-contact-form__wrapper {
  border-radius: 5px;
  border: 1px solid #2a424b;
  background-color: #fff;
  position: relative;
  z-index: 0;
}
.p-contact-form__wrapper::after {
  content: "";
  position: absolute;
  background-color: #2a424b;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  transition: -webkit-transform 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  transition: transform 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  transition: transform 0.2s cubic-bezier(0.45, 0, 0.55, 1), -webkit-transform 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: 1;
}
@media (any-hover: hover) {
  .p-contact-form__wrapper:hover::after {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  .p-contact-form__wrapper:hover .c-button--submit {
    color: #fff;
    position: relative;
    z-index: 2;
    cursor: pointer;
  }
}

.c-button--submit {
  width: 8.75rem;
  height: 2.5rem;
  color: #2a424b;
  border: 1px solid transparent;
  display: grid;
  place-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  line-height: 1.4375;
  background-color: transparent;
  position: relative;
  z-index: 2;
}
@media not screen and (min-width: 768px) {
  .c-button--submit {
    width: clamp(142px, 98.9515306122px + 11.4795918367vw, 187px);
    height: 42px;
    padding-inline: 32px;
    padding-block: 7px;
  }
}

.wpcf7-spinner {
  position: absolute;
}

.wpcf7-not-valid-tip {
  display: inline-block;
  margin-top: 0.3125rem;
  font-weight: 500;
}

.l-footer {
  padding-block: 2.75rem 1.25rem;
  z-index: 99;
  position: relative;
}
@media not screen and (min-width: 768px) {
  .l-footer {
    padding-block: clamp(32px, 80px - 6.4vw, 48px) clamp(20px, 52px - 3.2vw, 28px);
  }
}
.l-footer.l-footer--page-works {
  margin-top: -3.125rem;
}
@media not screen and (min-width: 768px) {
  .l-footer.l-footer--page-works {
    margin-top: -20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-footer.l-footer--page-works {
    margin-top: calc(-35.8823529412px + -0.0392156863 * 100vw);
  }
}

.p-footer {
  border-radius: 50px 50px 0px 0px;
  background-color: #b5c0c1;
}
@media not screen and (min-width: 768px) {
  .p-footer {
    border-radius: 20px 20px 0px 0px;
  }
}

.l-footer__inner {
  max-width: 1280px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3.9375rem;
}
@media not screen and (min-width: 768px) {
  .l-footer__inner {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.5625rem;
  }
}

.p-footer__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media not screen and (min-width: 768px) {
  .p-footer__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 35px;
  }
}

.p-footer__logo {
  color: #fff;
  font-family: "sofia-pro-soft", sans-serif;
  font-size: max(20px, 1.5rem);
  line-height: 1.5;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  font-weight: 400;
}
@media not screen and (min-width: 768px) {
  .p-footer__logo {
    font-size: 24px;
  }
}
@media (any-hover: hover) {
  .p-footer__logo:hover {
    color: #2a424b;
  }
}

.p-footer__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: auto;
}
@media not screen and (min-width: 768px) {
  .p-footer__nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-left: 0;
    gap: 37px;
  }
}

.p-footer__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5625rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  translate: -0.125rem -0.125rem;
}
@media not screen and (min-width: 768px) {
  .p-footer__list {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 6px;
    margin-inline: auto;
    padding: 0;
  }
}
.p-footer__list li {
  color: #fff;
  font-family: "sofia-pro-soft", sans-serif;
  font-size: max(16px, 1.25rem);
  line-height: 1.4;
  position: relative;
  font-weight: 400;
}
@media not screen and (min-width: 768px) {
  .p-footer__list li {
    font-size: 24px;
    line-height: 1.16667;
    margin-right: 10px;
  }
  .p-footer__list li:nth-child(1) {
    translate: -1px;
  }
  .p-footer__list li:nth-child(2) {
    translate: 9px;
  }
  .p-footer__list li:nth-child(3) {
    translate: 9px;
  }
  .p-footer__list li:nth-child(4) {
    translate: 4px;
  }
  .p-footer__list li:nth-child(5) {
    translate: 3px;
  }
  .p-footer__list li:nth-child(6) {
    translate: -2px;
  }
}
.p-footer__list li::before {
  background: #2a424b;
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media (any-hover: hover) {
  .p-footer__list li:hover {
    color: #2a424b;
  }
  .p-footer__list li:hover::before {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

.p-footer__button {
  width: 8.75rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-radius: 5px;
  border: 1px solid #2a424b;
  background-color: #2a424b;
  color: #fff;
  font-family: "sofia-pro-soft", sans-serif;
  font-size: max(16px, 1.25rem);
  line-height: 1;
  z-index: 1;
  overflow: hidden;
  font-weight: 400;
  position: relative;
}
@media not screen and (min-width: 768px) {
  .p-footer__button {
    width: 140px;
    height: 40px;
    font-size: 20px;
    margin-bottom: clamp(0px, -19.1326530612px + 5.1020408163vw, 20px);
  }
}
.p-footer__button::after {
  content: "";
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
  border-radius: 5px;
}
@media (any-hover: hover) {
  .p-footer__button:hover {
    color: #2a424b;
  }
  .p-footer__button:hover::after {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
.p-footer__button a {
  -webkit-transform: translateY(-0.1em);
          transform: translateY(-0.1em);
}

.p-footer__copy {
  color: #f5f5f5;
  font-family: "sofia-pro-soft", sans-serif;
  font-size: max(14px, 1rem);
  text-align: center;
  font-weight: 400;
  translate: -0.125rem;
}
@media not screen and (min-width: 768px) {
  .p-footer__copy {
    font-size: 16px;
    translate: 11px;
  }
}

.p-privacy-modal {
  position: fixed;
  inset: 0;
  margin-inline: auto;
  max-width: calc(100% - 160px);
  max-height: calc(100% - 40px);
  z-index: 104;
  border-radius: 20px;
  padding-block: 4.375rem 3.75rem;
  padding-inline: 3.75rem;
  overflow-y: auto;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  background: #fffbf9;
  border: none;
}
@media not screen and (min-width: 768px) {
  .p-privacy-modal {
    max-width: calc(100% - 30px);
    padding-block: 40px 30px;
    padding-inline: 0.9375rem;
    border-radius: 10px;
  }
}
.p-privacy-modal::-ms-backdrop {
  background-color: rgba(145, 177, 179, 0.2);
}
.p-privacy-modal::backdrop {
  background-color: rgba(145, 177, 179, 0.2);
}

.p-privacy-modal__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.p-privacy-modal__title {
  font-size: 1.875rem;
  font-weight: 600;
  color: #9ebfb8;
  text-align: center;
}
@media not screen and (min-width: 768px) {
  .p-privacy-modal__title {
    font-size: 20px;
  }
}

.p-privacy-modal__text {
  line-height: 1.8;
  word-break: break-word;
  margin-top: 2.5rem;
}
@media not screen and (min-width: 768px) {
  .p-privacy-modal__text {
    margin-top: 20px;
  }
}
.p-privacy-modal__text h3 {
  font-size: max(1.125rem, 16px);
  font-weight: 600;
  color: #9ebfb8;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  padding-inline: 1.25rem;
}
@media not screen and (min-width: 768px) {
  .p-privacy-modal__text h3 {
    font-size: 16px;
    margin-top: 16px;
    padding-inline: 0.625rem;
    margin-bottom: 8px;
  }
}
.p-privacy-modal__text h4 {
  font-size: max(1rem, 14px);
  font-weight: 500;
  padding-inline: 1.25rem;
}
@media not screen and (min-width: 768px) {
  .p-privacy-modal__text h4 {
    padding-inline: 0.625rem;
    margin-bottom: 8px;
    font-size: 14px;
  }
}
.p-privacy-modal__text ul,
.p-privacy-modal__text ol {
  padding-inline: 1.25rem;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}
@media not screen and (min-width: 768px) {
  .p-privacy-modal__text ul,
  .p-privacy-modal__text ol {
    margin-left: 2.125rem;
    padding-inline: 0;
    margin-bottom: 16px;
  }
}
.p-privacy-modal__text li {
  list-style: disc;
  margin-bottom: 0.25rem;
}
@media not screen and (min-width: 768px) {
  .p-privacy-modal__text li {
    margin-bottom: 4px;
    font-size: 14px;
  }
}
.p-privacy-modal__text a {
  color: #9ebfb8;
  text-decoration: underline;
  word-break: break-all;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}
@media (any-hover: hover) {
  .p-privacy-modal__text a:hover {
    color: #2a424b;
  }
}
.p-privacy-modal__text hr {
  border: none;
  border-top: 1px solid #d7ccc2;
  margin-block: 1.5rem;
}
@media not screen and (min-width: 768px) {
  .p-privacy-modal__text hr {
    margin-block: 12px;
  }
}
.p-privacy-modal__text p {
  margin-bottom: 1rem;
  padding-inline: 1.25rem;
}
.p-privacy-modal__text p:last-child {
  margin-bottom: 0;
}
@media not screen and (min-width: 768px) {
  .p-privacy-modal__text p {
    padding-inline: 0.625rem;
    margin-bottom: 16px;
    font-size: 14px;
  }
}
.p-privacy-modal__text span {
  margin-top: 1rem;
}
@media not screen and (min-width: 768px) {
  .p-privacy-modal__text span {
    margin-top: 16px;
  }
}

.p-privacy-modal__close-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 3.75rem;
}
@media not screen and (min-width: 768px) {
  .p-privacy-modal__close-button {
    margin-top: 40px;
  }
}

.l-page-works-detail {
  padding-block: 2.5625rem 0;
}
@media not screen and (min-width: 768px) {
  .l-page-works-detail {
    padding-block: 29px 0;
  }
}

.l-page-works-detail__inner {
  max-width: 1080px;
}

.p-page-works-detail__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 3.125rem;
  padding-left: 0.0625rem;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__content {
    gap: 51px;
    padding-left: 0;
  }
}

.p-page-works-detail__content-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.875rem;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__content-head {
    gap: 24px;
    -ms-flex-item-align: stretch;
        align-self: stretch;
  }
}

.p-page-works-detail__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.3125rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__meta {
    -ms-flex-item-align: normal;
        align-self: normal;
    gap: 3.708px;
  }
}

.p-page-works-detail__tittle {
  font-size: 1.875rem;
  line-height: 1.4333333333;
  letter-spacing: 0.15rem;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__tittle {
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: 1.6px;
  }
}

@media not screen and (min-width: 768px) {
  .p-page-works-detail__category-items {
    gap: 7px;
  }
}
.p-page-works-detail__category-items span {
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__category-items span {
    padding-block: 1px;
    padding-inline: 6px;
    font-size: 10.383px;
    line-height: 1.4446691708;
    letter-spacing: 0.831px;
  }
}
@media (any-hover: hover) {
  .p-page-works-detail__category-items span:hover {
    background-color: #9ebfb8;
    color: #fff;
  }
}

.p-page-works-detail__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.3125rem;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__link {
    gap: 4px;
  }
}

.p-page-works-detail__url {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  line-height: 1.4375;
  letter-spacing: 0.08rem;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__url {
    font-size: 14px;
    line-height: 1.4285714286;
    letter-spacing: 1.12px;
  }
}
.p-page-works-detail__url a {
  position: relative;
}
.p-page-works-detail__url a::before {
  background: #2a424b;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0.125rem;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__url a::before {
    bottom: 2px;
  }
}
@media (any-hover: hover) {
  .p-page-works-detail__url a:hover::before {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
  }
}

.p-page-works-detail__non-url {
  font-size: 14px;
  line-height: 1.4285714286;
  letter-spacing: 1.12px;
}

.p-page-works-detail__url-info {
  font-size: 14px;
  line-height: 1.4285714286;
  letter-spacing: 1.12px;
}

.p-page-works-detail__mockup {
  width: 100%;
}
.p-page-works-detail__mockup img {
  border: 1px solid #e1d7d0;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__mockup img {
    border: 0.367px solid #e1d7d0;
  }
}

.p-page-works-detail__lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.5625rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__lists {
    margin-top: 10px;
    gap: 25px;
  }
}

.p-page-works-detail__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5625rem;
  line-height: 1.4375;
  letter-spacing: 0.08rem;
  font-weight: 600;
}
.p-page-works-detail__list p {
  font-weight: 500;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__list {
    gap: 9px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .p-page-works-detail__list span {
    letter-spacing: 1.28px;
  }
  .p-page-works-detail__list p {
    font-size: 14px;
    line-height: 1.4285714286;
    letter-spacing: 1.12px;
  }
  .p-page-works-detail__list:not(:last-child) {
    margin-bottom: 0.75em;
  }
  .p-page-works-detail__list:not(:last-child) p {
    line-height: 1.8;
  }
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__list.p-page-works-detail__list--language p {
    width: 143px;
    word-wrap: break-word;
    -ms-hyphens: auto;
        hyphens: auto;
    -webkit-hyphens: auto;
  }
}
.p-page-works-detail__list.p-page-works-detail__list--feature {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.p-page-works-detail__list.p-page-works-detail__list--overview {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.p-page-works-detail__list.p-page-works-detail__list--overview p {
  line-height: 1.5625;
  letter-spacing: 0.08rem;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__list.p-page-works-detail__list--overview p {
    line-height: 1.7857142857;
    letter-spacing: 1.12px;
  }
}
.p-page-works-detail__list span {
  white-space: nowrap;
}

.p-page-works-detail__list-feature-lists {
  margin-left: 0.375rem;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__list-feature-lists {
    margin-left: 6px;
  }
}
.p-page-works-detail__list-feature-lists li {
  position: relative;
  padding-left: 0.625rem;
  line-height: 1.5625;
  letter-spacing: 0.08rem;
  font-weight: 500;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__list-feature-lists li {
    font-size: 14px;
    line-height: 1.78571;
    letter-spacing: 1.12px;
    padding-left: 11px;
  }
}
.p-page-works-detail__list-feature-lists li::before {
  position: absolute;
  content: "•";
  font-size: max(14px, 1rem);
  color: #2a424b;
  left: 0;
  line-height: 1.5625;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__list-feature-lists li::before {
    font-size: 14px;
    line-height: 1.78571;
  }
}

.p-page-works-detail__bottom-wrapper {
  background-color: #fffbf9;
}

.p-page-works-detail__bottom {
  border-radius: 50px 50px 0px 0px;
  background: url("../img/work/other-work-bg.webp") no-repeat center center/cover;
  width: 100%;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__bottom {
    border-radius: 20px 20px 0px 0px;
    background: url("../img/sp/other-works-bg.webp") no-repeat center center/cover;
  }
}

.l-page-works-detail__other-works {
  padding-block: 5.4375rem 95px;
}
@media not screen and (min-width: 768px) {
  .l-page-works-detail__other-works {
    padding-block: 54px 108px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-page-works-detail__other-works {
    padding-block: 5.4375rem 151px;
  }
}

.l-page-works-detail__other-works__inner {
  max-width: 1280px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.5rem;
}

.p-page-works-detail__other-works-tittle {
  font-size: 2.625rem;
  font-family: "sofia-pro-soft", sans-serif;
  font-weight: 400;
  line-height: 1.3333333333;
  letter-spacing: 0.21rem;
  padding-left: 6.1875rem;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__other-works-tittle {
    font-size: 35px;
    padding-left: 0;
  }
}

.p-page-works-detail__other-works-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  gap: 1.875rem;
  width: 100%;
}
.p-page-works-detail__other-works-cards.is-count-1 {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.p-page-works-detail__other-works-cards.is-count-1 .p-page-works-detail__other-works-card {
  max-width: 31.25rem;
  width: 100%;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__other-works-cards.is-count-1 .p-page-works-detail__other-works-card {
    max-width: 100%;
  }
}
.p-page-works-detail__other-works-cards.is-count-2 {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 3.75rem;
}
.p-page-works-detail__other-works-cards.is-count-2 .p-page-works-detail__other-works-card {
  max-width: 25rem;
  width: 100%;
}

.p-page-works-detail__other-works-card {
  width: 100%;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__other-works-card:not(:first-child) {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-page-works-detail__other-works-card:last-child {
    display: none;
  }
}
@media (any-hover: hover) {
  .p-page-works-detail__other-works-card:hover .p-page-works-detail__other-works-card-overlay {
    opacity: 1;
  }
  .p-page-works-detail__other-works-card:hover .p-page-works-detail__other-works-card-overlay-text {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  .p-page-works-detail__other-works-card:hover .p-page-works-detail__other-works-card-tittle {
    opacity: 0.8;
    font-weight: 700;
  }
  .p-page-works-detail__other-works-card:hover .c-cat-tag {
    background-color: #9ebfb8;
    color: #fff;
    border-color: #9ebfb8;
  }
}

.p-page-works-detail__other-works-card-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__other-works-card-link {
    gap: 6px;
  }
}

.p-page-works-detail__other-works-card-image-container {
  aspect-ratio: 380/230 !important;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__other-works-card-image-container {
    aspect-ratio: 335/220 !important;
  }
}

.p-page-works-detail__other-works-card-thumbnail img {
  border: 1px solid #d9d9d9;
}

.p-page-works-detail__other-works-card-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  gap: 0.5rem;
  overflow: hidden;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__other-works-card-meta {
    gap: 8px;
  }
}

.p-page-works-detail__other-works-card-tittle {
  font-size: max(14px, 1.125rem);
  line-height: 1.4444444444;
  letter-spacing: 0.09rem;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__other-works-card-tittle {
    font-size: 18px;
  }
}

.p-page-works-detail__other-works-card-cat-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
}
@media not screen and (min-width: 768px) {
  .p-page-works-detail__other-works-card-cat-items {
    gap: 10px;
  }
}

.p-page-works__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.8125rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .p-page-works__head {
    gap: 26px;
  }
}

.p-page-works__category-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .p-page-works__category-items {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px;
  }
}
.p-page-works__category-items a {
  border: 1px solid #9ebfb8;
  background-color: #9ebfb8;
  color: #fff;
  border-radius: 2px;
  font-size: max(12px, 0.875rem);
  font-weight: 700;
  line-height: 1.4285714286;
  letter-spacing: 0.07rem;
  padding-block: 0.0625rem;
  padding-inline: 0.5625rem;
  white-space: nowrap;
  z-index: 1;
  position: relative;
}
@media not screen and (min-width: 768px) {
  .p-page-works__category-items a {
    letter-spacing: 1.12px;
    padding-block: 1px;
    padding-inline: 9px;
    font-size: 14px;
  }
}
.p-page-works__category-items a::after {
  content: "";
  position: absolute;
  background-color: #2a424b;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.p-page-works__category-items a.is-active {
  border: 1px solid #2a424b;
  background-color: #2a424b;
}
@media (any-hover: hover) {
  .p-page-works__category-items a:hover {
    color: #fff;
  }
  .p-page-works__category-items a:hover::after {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

.p-page-works__head-text {
  letter-spacing: 0.08rem;
}
@media not screen and (min-width: 768px) {
  .p-page-works__head-text {
    font-size: 14px;
    line-height: 1.4285714286;
    letter-spacing: 1.12px;
  }
}

.l-page-works {
  padding-top: 9.9375rem;
}
@media not screen and (min-width: 768px) {
  .l-page-works {
    padding-top: 98px;
  }
}

.l-page-works__inner {
  max-width: 1080px;
}

.l-page-works__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.25rem 8.75rem;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
@media not screen and (min-width: 768px) {
  .l-page-works__cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: clamp(80px, 41.7346938776px + 10.2040816327vw, 120px);
  }
}

.p-page-works-card {
  width: 100%;
}
@media (any-hover: hover) {
  .p-page-works-card:hover .p-page-works-card__overlay {
    opacity: 1;
  }
  .p-page-works-card:hover .p-page-works-card__overlay-text {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .p-page-works-card:hover .c-cat-tag {
    background-color: #9ebfb8;
    color: #fff;
  }
  .p-page-works-card:hover .p-page-works-card__title {
    opacity: 0.8;
    font-weight: 700;
  }
}

.p-page-works-card__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.625rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  overflow: hidden;
}
@media not screen and (min-width: 768px) {
  .p-page-works-card__link {
    gap: 10px;
  }
}

.p-page-works-card__image-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  aspect-ratio: 430/280;
}
@media not screen and (min-width: 768px) {
  .p-page-works-card__image-container {
    aspect-ratio: 335/220;
  }
}

.p-page-works-card__image {
  width: 100%;
  height: 100%;
  margin: 0;
}
.p-page-works-card__image img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  aspect-ratio: 430/280;
  border: 1px solid #E1D7D0;
}
@media not screen and (min-width: 768px) {
  .p-page-works-card__image img {
    border: 0.786px solid #e1d7d0;
    aspect-ratio: 335/220;
  }
}

.p-page-works-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.p-page-works-card__overlay-text {
  color: white;
  text-align: center;
  padding: 20px;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  width: 80%;
}

.p-page-works-card__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.3125rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .p-page-works-card__meta {
    gap: 5px;
  }
}

.p-page-works-card__title {
  font-size: max(14px, 1.125rem);
  line-height: 1.4444444444;
  letter-spacing: 0.09rem;
  -webkit-transition: opacity 0.3s, font-weight 0.3s;
  transition: opacity 0.3s, font-weight 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-page-works-card__title {
    font-size: 16px;
    line-height: 1.4375;
    letter-spacing: 1.28px;
  }
}

.p-page-works-card__category-items {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.l-page-news-detail {
  padding-block: 3.125rem 5rem;
}
@media not screen and (min-width: 768px) {
  .l-page-news-detail {
    padding-block: 30px 81px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-page-news-detail {
    padding-block: 30px 81px;
  }
}

.l-page-news-detail__inner {
  max-width: 1360px;
}
@media not screen and (min-width: 768px) {
  .l-page-news-detail__inner {
    width: 100%;
  }
}

.l-page-news-detail__main {
  width: 62.5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2.5rem;
}
@media not screen and (min-width: 768px) {
  .l-page-news-detail__main {
    width: 100%;
    gap: 36px;
    -ms-flex-item-align: stretch;
        align-self: stretch;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-page-news-detail__main {
    width: 100%;
  }
}

.p-page-news-detail__p-page-news-detail__article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}

.p-page-news-detail__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.625rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .p-page-news-detail__head {
    gap: 10px;
  }
}

.p-page-news-detail__title {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: 0.12rem;
}
@media not screen and (min-width: 768px) {
  .p-page-news-detail__title {
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: 1.6px;
  }
}

.p-page-news-detail__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.625rem;
}
@media not screen and (min-width: 768px) {
  .p-page-news-detail__meta {
    gap: 25px;
  }
}
.p-page-news-detail__meta span {
  -webkit-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s;
}
@media (any-hover: hover) {
  .p-page-news-detail__meta span:hover {
    background-color: #9ebfb8;
    color: #fff;
  }
}

.p-page-news-detail__date {
  letter-spacing: 0.08rem;
}
@media not screen and (min-width: 768px) {
  .p-page-news-detail__date {
    letter-spacing: 1.28px;
  }
}

.p-page-news-detail__body {
  margin-top: 2.625rem;
}
@media not screen and (min-width: 768px) {
  .p-page-news-detail__body {
    margin-top: 30px;
  }
}

.p-page-news-detail__thumbnail {
  width: 100%;
  height: auto;
  aspect-ratio: 800/420;
}
@media not screen and (min-width: 768px) {
  .p-page-news-detail__thumbnail {
    aspect-ratio: 335/180;
  }
}
.p-page-news-detail__thumbnail img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

.p-page-news-detail__text {
  margin-top: 2.75rem;
  line-height: 1.875;
  width: 94.875%;
  margin-right: auto;
}
@media not screen and (min-width: 768px) {
  .p-page-news-detail__text {
    margin-top: 50px;
    font-size: 14px;
    line-height: 1.78571;
    width: 100%;
    margin-right: 0;
  }
}
.p-page-news-detail__text a {
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  -webkit-transition: font-weight 0.3s;
  transition: font-weight 0.3s;
}
@media (any-hover: hover) {
  .p-page-news-detail__text a:hover {
    font-weight: 700;
  }
}

.l-page-news-detail__contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-block: 1.5rem 2.0625rem;
  padding-inline: 2.5rem;
  gap: 2.625rem;
}
@media not screen and (min-width: 768px) {
  .l-page-news-detail__contact {
    padding-block: 65px 64px;
    padding-inline: 26px;
    gap: 38px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-page-news-detail__contact {
    padding-block: 24px 33px;
    padding-inline: 40px;
    gap: 38px;
  }
}

.p-page-news-detail__contact {
  background: url("../img/contact-bg.webp") no-repeat center center/cover;
  width: 100%;
  border-radius: 50px;
}
@media not screen and (min-width: 768px) {
  .p-page-news-detail__contact {
    border-radius: 20px;
    background-position: top center;
  }
}

.l-page-news-detail__contact-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}

.p-page-news-detail__contact-tittle {
  color: #9ebfb8;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  font-family: "sofia-pro-soft", sans-serif;
  font-size: 6.25rem;
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: 0.5rem;
  translate: 0.1875rem;
}
@media not screen and (min-width: 768px) {
  .p-page-news-detail__contact-tittle {
    font-size: 58px;
    line-height: 1.3448275862;
    letter-spacing: 4.64px;
    translate: 3px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-page-news-detail__contact-tittle {
    font-size: max(58px, 6.25rem);
  }
}

.p-page-news-detail__contact-text {
  text-align: center;
}
@media not screen and (min-width: 768px) {
  .p-page-news-detail__contact-text {
    font-size: 14px;
    line-height: 1.4285714286;
  }
}
.p-page-news-detail__contact-text a {
  position: relative;
  display: inline;
}
@media not screen and (min-width: 768px) {
  .p-page-news-detail__contact-text a {
    text-decoration: underline;
  }
}
.p-page-news-detail__contact-text a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background-color: #2a424b;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-page-news-detail__contact-text a::after {
    display: none;
  }
}
@media (any-hover: hover) {
  .p-page-news-detail__contact-text a:hover::after {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
  }
}

.p-page-news-detail__contact-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 15.1875rem;
  height: 3.25rem;
  padding: 0.5625rem 1.1875rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 5px;
  border: 1px solid #2a424b;
  background-color: #fff;
  white-space: nowrap;
  z-index: 1;
  position: relative;
}
@media not screen and (min-width: 768px) {
  .p-page-news-detail__contact-button {
    width: 181px;
    height: 42px;
    padding: 7px 18px;
    font-size: 14px;
    line-height: 1.4285714286;
  }
}
.p-page-news-detail__contact-button::after {
  content: "";
  position: absolute;
  background-color: #2a424b;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
@media (any-hover: hover) {
  .p-page-news-detail__contact-button:hover {
    color: #fff;
  }
  .p-page-news-detail__contact-button:hover::after {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

.l-page-news__sidebar {
  width: 26.953125%;
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-left: auto;
}
@media not screen and (min-width: 768px) {
  .l-page-news__sidebar {
    width: 100%;
    margin-left: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-page-news__sidebar {
    width: 100%;
    margin-left: 0;
  }
}
.l-page-news-detail .l-page-news__sidebar {
  padding-block: 14rem 14.375rem;
  gap: 3.1875rem;
}
@media not screen and (min-width: 768px) {
  .l-page-news-detail .l-page-news__sidebar {
    padding-block: 9px 5.1875rem;
    margin-top: 215px;
    gap: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-page-news-detail .l-page-news__sidebar {
    gap: 70px;
    padding-block: 20px 100px;
    margin-top: 200px;
  }
}
.l-page-main--news .l-page-news__sidebar {
  padding-block: 12.6875rem 0;
  margin-right: 0.25rem;
  gap: 4.4375rem;
}
@media not screen and (min-width: 768px) {
  .l-page-main--news .l-page-news__sidebar {
    padding-block: 10px 0;
    margin-top: 110px;
    margin-right: 0;
    gap: 41px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-page-main--news .l-page-news__sidebar {
    padding-block: 20px 0;
    margin-top: 200px;
    margin-right: 0;
    gap: 70px;
  }
}

@media not screen and (min-width: 768px) {
  .p-page-news__sidebar {
    position: relative;
  }
  .p-page-news__sidebar::before {
    content: "";
    position: absolute;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    height: 1px;
    background-color: #9ebfb8;
    top: 0;
    left: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-page-news__sidebar {
    position: relative;
  }
  .p-page-news__sidebar::before {
    content: "";
    position: absolute;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    height: 1px;
    background-color: #9ebfb8;
    top: 0;
    left: 0;
  }
}

.p-page-news-sidebar__category-articles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.9375rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .p-page-news-sidebar__category-articles {
    gap: 15px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-page-news-sidebar__category-articles {
    gap: 20px;
  }
}

.p-page-news-sidebar__category-articles-tittle {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  font-size: max(16px, 1.25rem);
  line-height: 1.45;
  letter-spacing: 0.1rem;
}
@media not screen and (min-width: 768px) {
  .p-page-news-sidebar__category-articles-tittle {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-page-news-sidebar__category-articles-tittle {
    font-size: 20px;
  }
}
.p-page-news-sidebar__category-articles-tittle a {
  position: relative;
  -webkit-transition: font-weight 0.3s;
  transition: font-weight 0.3s;
}
.p-page-news-sidebar__category-articles-tittle a::before {
  background: #2a424b;
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media (any-hover: hover) {
  .p-page-news-sidebar__category-articles-tittle a:hover {
    font-weight: 700;
  }
  .p-page-news-sidebar__category-articles-tittle a:hover::before {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

.p-page-news-sidebar__category-articles-lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5625rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .p-page-news-sidebar__category-articles-lists {
    gap: 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-page-news-sidebar__category-articles-lists {
    gap: 10px;
  }
}

.p-page-news-sidebar__category-articles-list {
  padding-bottom: 0.3125rem;
  border-bottom: 1px solid #c9c9c9;
}
@media not screen and (min-width: 768px) {
  .p-page-news-sidebar__category-articles-list {
    padding-bottom: 5px;
    width: 100%;
  }
  .p-page-news-sidebar__category-articles-list:nth-child(3) {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-page-news-sidebar__category-articles-list {
    padding-bottom: 10px;
    width: 100%;
  }
  .p-page-news-sidebar__category-articles-list:nth-child(3) {
    display: none;
  }
}

.p-page-news-sidebar__category-articles-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 1rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .p-page-news-sidebar__category-articles-link {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 5px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-page-news-sidebar__category-articles-link {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 16px;
    -ms-flex-item-align: stretch;
        align-self: stretch;
  }
}
@media (any-hover: hover) {
  .p-page-news-sidebar__category-articles-link:hover .p-page-news-sidebar__category-articles-thumbnail img {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  .p-page-news-sidebar__category-articles-link:hover .c-cat-tag {
    background-color: #9ebfb8;
    color: #fff;
  }
  .p-page-news-sidebar__category-articles-link:hover .p-page-news-sidebar__category-articles-date,
  .p-page-news-sidebar__category-articles-link:hover .p-page-news-sidebar__category-articles-title {
    opacity: 0.8;
  }
}

.p-page-news-sidebar__category-articles-thumbnail {
  width: 28.4057971014%;
  height: auto;
  aspect-ratio: 98/52;
  overflow: hidden;
}
.p-page-news-sidebar__category-articles-thumbnail img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media not screen and (min-width: 768px) {
  .p-page-news-sidebar__category-articles-thumbnail {
    display: none;
  }
}

.p-page-news-sidebar__category-articles-body {
  width: 66.9565217391%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.3125rem;
}
@media not screen and (min-width: 768px) {
  .p-page-news-sidebar__category-articles-body {
    width: 68.9552238806%;
    gap: 5px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-page-news-sidebar__category-articles-body {
    width: 68.9552238806%;
    gap: 10px;
  }
}

.p-page-news-sidebar__category-articles-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.0625rem;
}
@media not screen and (min-width: 768px) {
  .p-page-news-sidebar__category-articles-meta {
    gap: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-page-news-sidebar__category-articles-meta {
    gap: 16px;
  }
}
.p-page-news-sidebar__category-articles-meta .c-cat-tag {
  font-size: 12px;
  line-height: 1.4166666667;
  letter-spacing: 0.06rem;
  padding-block: 0;
  padding-inline: 0.5rem;
}
@media not screen and (min-width: 768px) {
  .p-page-news-sidebar__category-articles-meta .c-cat-tag {
    letter-spacing: 0.96px;
    padding-inline: 8px;
  }
}

.p-page-news-sidebar__category-articles-date {
  font-size: max(12px, 0.875rem);
  line-height: 1.4285714286;
  letter-spacing: 0.07rem;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-page-news-sidebar__category-articles-date {
    font-size: 14px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-page-news-sidebar__category-articles-date {
    font-size: 14px;
  }
}

.p-page-news-sidebar__category-articles-title {
  font-size: 12px;
  line-height: 1.4166666667;
  letter-spacing: 0.06rem;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.l-page-main--news {
  padding-block: 3.3125rem 19.8125rem;
}
@media not screen and (min-width: 768px) {
  .l-page-main--news {
    padding-block: 50px 74px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-page-main--news {
    padding-block: 50px 130px;
  }
}

.l-page-news__inner {
  max-width: 1360px;
}

.l-page-news__main {
  margin-left: -0.0625rem;
  width: 57.03125%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 4.875rem;
}
@media not screen and (min-width: 768px) {
  .l-page-news__main {
    width: 100%;
    margin-left: 0;
    gap: 30px;
    -ms-flex-item-align: stretch;
        align-self: stretch;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-page-news__main {
    width: 100%;
  }
}

.l-page-news {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 3.75rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .l-page-news {
    gap: 82px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

.p-page-news__tittle {
  font-size: 1.875rem;
  line-height: 1.4333333333;
  letter-spacing: 0.15rem;
}
@media not screen and (min-width: 768px) {
  .p-page-news__tittle {
    font-size: 24px;
    line-height: 1.4583333333;
    letter-spacing: 1.92px;
  }
}

.l-page-news__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5.8125rem 4.375rem;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
@media not screen and (min-width: 768px) {
  .l-page-news__cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 80px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

.p-page-news-card__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5625rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media not screen and (min-width: 768px) {
  .p-page-news-card__link {
    gap: 10px;
  }
}
@media (any-hover: hover) {
  .p-page-news-card__link:hover .p-page-news-card__thumbnail img {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  .p-page-news-card__link:hover .c-cat-tag {
    background-color: #9ebfb8;
    color: #fff;
  }
  .p-page-news-card__link:hover .p-page-news-card__date,
  .p-page-news-card__link:hover .p-page-news-card__title {
    opacity: 0.8;
    font-weight: 700;
  }
}

.p-page-news-card__thumbnail {
  width: 100%;
  height: auto;
  aspect-ratio: 330/174;
  overflow: hidden;
}
@media not screen and (min-width: 768px) {
  .p-page-news-card__thumbnail {
    aspect-ratio: 335/180;
  }
}
.p-page-news-card__thumbnail img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-page-news-card__thumbnail .p-page-news-card__thumbnail--no-image {
  border: 0.846px solid #e1d7d0;
}

.p-page-news-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.625rem;
}
@media not screen and (min-width: 768px) {
  .p-page-news-card__body {
    gap: 10px;
  }
}

.p-page-news-card__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.625rem;
}
@media not screen and (min-width: 768px) {
  .p-page-news-card__meta {
    gap: 24px;
  }
}

.p-page-news-card__date {
  letter-spacing: 0.08rem;
  -webkit-transition: opacity 0.3s, font-weight 0.3s;
  transition: opacity 0.3s, font-weight 0.3s;
}

.p-page-news-card__title {
  font-size: 14px;
  line-height: 1.4285714286;
  letter-spacing: 0.07rem;
  -webkit-transition: opacity 0.3s, font-weight 0.3s;
  transition: opacity 0.3s, font-weight 0.3s;
}

.l-page-contact-thanks {
  padding-block: 9.9375rem 10.625rem;
}
@media not screen and (min-width: 768px) {
  .l-page-contact-thanks {
    padding-block: 90px 80px;
  }
}

.l-page-contact-thanks__inner {
  max-width: 1080px;
}

.l-page-contact-thanks__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2.5rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media not screen and (min-width: 768px) {
  .l-page-contact-thanks__wrapper {
    gap: 40px;
    -ms-flex-item-align: stretch;
        align-self: stretch;
  }
}

.l-page-contact-thanks__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.875rem;
  width: 56.2%;
  margin-inline: auto;
}
@media not screen and (min-width: 768px) {
  .l-page-contact-thanks__content {
    width: 100%;
    gap: 30px;
    -ms-flex-item-align: stretch;
        align-self: stretch;
  }
}

.p-page-contact-thanks__message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.875rem;
}
@media not screen and (min-width: 768px) {
  .p-page-contact-thanks__message {
    gap: 20px;
    -ms-flex-item-align: stretch;
        align-self: stretch;
  }
}

.p-page-contact-thanks__message-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5625rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .p-page-contact-thanks__message-heading {
    gap: 25px;
  }
}

.p-page-contact-thanks__message-heading--en {
  color: #9ebfb8;
  text-align: center;
  font-family: "sofia-pro-soft", sans-serif;
  font-size: 3.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.31rem;
}
@media not screen and (min-width: 768px) {
  .p-page-contact-thanks__message-heading--en {
    font-size: 48px;
    letter-spacing: 3.84px;
  }
}

.p-page-contact-thanks__message-heading--ja {
  text-align: center;
  font-size: max(16px, 1.25rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.1rem;
}
@media not screen and (min-width: 768px) {
  .p-page-contact-thanks__message-heading--ja {
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: 1.6px;
  }
}

.p-page-contact-thanks__message-text {
  letter-spacing: 0.08rem;
}
@media not screen and (min-width: 768px) {
  .p-page-contact-thanks__message-text {
    font-size: 14px;
    line-height: 1.4285714286;
    letter-spacing: 1.12px;
  }
}

.p-page-contact-thanks__note {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4166666667;
}
@media not screen and (min-width: 768px) {
  .p-page-contact-thanks__note {
    line-height: 1.4285714286;
  }
}
.p-page-contact-thanks__note a {
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.l-page-flow {
  padding-block: 2.125rem 0;
}
@media not screen and (min-width: 768px) {
  .l-page-flow {
    padding-block: 30px 0;
  }
}

.l-page-flow__inner {
  max-width: 1220px;
  padding-inline: 2.6875rem 2.5rem;
}
@media not screen and (min-width: 768px) {
  .l-page-flow__inner {
    padding-inline: 1.25rem;
  }
}

.p-page-flow__tittle {
  font-size: 1.875rem;
  line-height: 1.4333333333;
  letter-spacing: 0.15rem;
  padding-left: 4.1875rem;
}
@media not screen and (min-width: 768px) {
  .p-page-flow__tittle {
    padding-left: 0;
    font-size: 24px;
    line-height: 1.4583333333;
    letter-spacing: 1.92px;
  }
}

.p-page-flow__flow-chart {
  margin-top: 4.75rem;
}
@media not screen and (min-width: 768px) {
  .p-page-flow__flow-chart {
    margin-top: 60px;
  }
}
.p-page-flow__flow-chart .p-flow__lists::before {
  width: 71.0625rem;
  height: 10.125rem;
  left: 0;
  background: url("../img/page-flow-line.webp") no-repeat center center/contain;
}

.p-page-flow__body {
  margin-top: 4.375rem;
}

.p-page-flow__body-inner {
  width: 87.9507475814%;
  margin-inline: auto;
}
@media not screen and (min-width: 768px) {
  .p-page-flow__body-inner {
    width: 100%;
  }
}

@media not screen and (min-width: 768px) {
  .p-page-flow__note {
    font-size: 14px;
  }
}
.p-page-flow__note a {
  position: relative;
  display: inline;
}
@media not screen and (min-width: 768px) {
  .p-page-flow__note a {
    text-decoration: underline;
  }
}
.p-page-flow__note a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #2a424b;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-page-flow__note a::after {
    display: none;
  }
}
@media (any-hover: hover) {
  .p-page-flow__note a:hover::after {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
  }
}

.p-page-flow__process-lists {
  margin-top: 3.8125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.8125rem;
}
@media not screen and (min-width: 768px) {
  .p-page-flow__process-lists {
    margin-top: 83px;
    gap: 1.5rem;
  }
}

.p-page-flow-process-list {
  width: 100%;
}
@media not screen and (min-width: 768px) {
  .p-page-flow-process-list.is-open .p-page-flow-process-list__head::before {
    rotate: 0deg;
  }
  .p-page-flow-process-list.is-open .p-page-flow-process-list__body {
    max-height: 1000px;
    opacity: 1;
    padding-block: 28px 35px;
    padding-inline: 19px 34px;
  }
}

.p-page-flow-process-list__head {
  border-radius: 10px 10px 0px 0px;
  border: 1px solid #8cbcb5;
  background-color: #ebf1f1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 24.4375rem;
  height: 2.625rem;
  padding-block: 0.75rem 0.5rem;
  padding-inline: 1.6875rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  gap: 0.75rem;
  cursor: auto;
}
@media not screen and (min-width: 768px) {
  .p-page-flow-process-list__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: auto;
    padding-block: 12px 13px;
    padding-inline: 14px 26px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    gap: 5px;
    -ms-flex-line-pack: center;
        align-content: center;
    cursor: pointer;
    position: relative;
  }
  .p-page-flow-process-list__head::before, .p-page-flow-process-list__head::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    background: url("../img/sp/page-flow-toggle.svg") no-repeat center center/contain;
    top: 21px;
  }
  .p-page-flow-process-list__head::before {
    rotate: 90deg;
    right: 21px;
    -webkit-transition: rotate 0.3s;
    transition: rotate 0.3s;
  }
  .p-page-flow-process-list__head::after {
    right: 21px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-page-flow-process-list__head {
    width: 41.6666666667vw;
  }
}

.p-page-flow-process-list__num {
  color: #508b82;
  font-size: max(18px, 1.25rem);
  line-height: 1.45;
  letter-spacing: 0.125rem;
  font-weight: 600;
}
@media not screen and (min-width: 768px) {
  .p-page-flow-process-list__num {
    font-size: 20px;
  }
}

.p-page-flow-process-list__tittle {
  font-size: max(16px, 1.125rem);
  line-height: 1.4444444444;
  letter-spacing: 0.09rem;
  font-weight: 600;
}
@media not screen and (min-width: 768px) {
  .p-page-flow-process-list__tittle {
    font-size: 16px;
    line-height: 1.4375;
    letter-spacing: 1.28px;
  }
}

.p-page-flow-process-list__body {
  border: 1px solid #8cbcb5;
  background-color: #fff;
  padding-inline: 5.4375rem;
  padding-block: 1.5625rem 1.5rem;
}
@media not screen and (min-width: 768px) {
  .p-page-flow-process-list__body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-block: 0;
    padding-inline: 0;
    -webkit-transition: max-height 0.5s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.4s, padding 0.4s;
    transition: max-height 0.5s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.4s, padding 0.4s;
  }
}

.p-page-flow-process-list__text {
  letter-spacing: 0.08rem;
}
@media not screen and (min-width: 768px) {
  .p-page-flow-process-list__text {
    font-size: 14px;
    line-height: 1.78571;
    letter-spacing: 1.12px;
    display: block;
  }
}
.p-page-flow-process-list__text a {
  position: relative;
  display: inline;
}
@media not screen and (min-width: 768px) {
  .p-page-flow-process-list__text a {
    text-decoration: underline;
  }
}
.p-page-flow-process-list__text a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #2a424b;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-page-flow-process-list__text a::after {
    display: none;
  }
}
@media (any-hover: hover) {
  .p-page-flow-process-list__text a:hover::after {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
  }
}
.p-page-flow-process-list__text span {
  font-weight: 600;
}
.p-page-flow-process-list__text small {
  font-size: 14px;
  font-weight: 500;
}
.p-page-flow-process-list__text strong {
  margin-top: 0.625rem;
  display: inline-block;
}
@media not screen and (min-width: 768px) {
  .p-page-flow-process-list__text strong {
    margin-top: 10px;
  }
}

.p-page-flow__estimate-box {
  margin-top: 3.125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2.5rem;
}
@media not screen and (min-width: 768px) {
  .p-page-flow__estimate-box {
    margin-top: 40px;
    gap: 30px;
  }
}

.p-page-flow__estimate-text {
  font-size: max(16px, 1.125rem);
  font-weight: 600;
}
@media not screen and (min-width: 768px) {
  .p-page-flow__estimate-text {
    font-size: 16px;
  }
}

.p-page-flow__estimate-button {
  font-size: 16px;
}

.l-page-estimate {
  padding-block: 3.125rem 5rem;
}
@media not screen and (min-width: 768px) {
  .l-page-estimate {
    padding-block: 30px 60px;
  }
}

.l-page-estimate__inner {
  max-width: 1080px;
}

.p-page-estimate__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.875rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__head {
    gap: 20px;
  }
}

.p-page-estimate__title {
  font-size: 1.875rem;
  line-height: 1.4333333333;
  letter-spacing: 0.15rem;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__title {
    font-size: 24px;
    line-height: 1.4583333333;
    letter-spacing: 1.92px;
  }
}

.p-page-estimate__head-text {
  margin-top: 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.625rem;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__head-text {
    margin-top: 12px;
    gap: 15px;
    font-size: 14px;
    line-height: 1.5;
  }
}

.p-page-estimate__note {
  font-weight: 600;
}

.l-page-estimate__body {
  margin-top: 6.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 7.5rem;
}
@media not screen and (min-width: 768px) {
  .l-page-estimate__body {
    margin-top: 100px;
    gap: 120px;
  }
}

.l-page-estimate__section:nth-child(2) .p-page-estimate__section-content .p-page-estimate__desc-sub {
  margin-left: 0;
}
.l-page-estimate__section:nth-child(3) .p-page-estimate__section-content {
  gap: 2.5rem;
}
@media not screen and (min-width: 768px) {
  .l-page-estimate__section:nth-child(3) .p-page-estimate__section-content {
    gap: 40px;
  }
}

.p-page-estimate__section-title {
  font-size: max(1.25rem, 18px);
  font-weight: 600;
  color: #333;
  margin-bottom: 0.75rem;
  border-left: 4px solid #cfe6de;
  padding-left: 0.75em;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__section-title {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 15px;
    padding-left: 0.5em;
  }
}

.p-page-estimate__section-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-inline: 1.25rem;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__section-content {
    padding-inline: 10px;
  }
}

.p-page-estimate__label {
  display: block;
  font-size: 16px;
  line-height: 2.25;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__label {
    line-height: 1.6;
  }
}

.p-page-estimate__label input[type=radio],
.p-page-estimate__label input[type=checkbox] {
  margin-right: 0.6em;
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
}

.p-page-estimate__section-content-radio-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
  margin-top: 0.625rem;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__section-content-radio-wrapper {
    gap: 0;
    margin-top: 10px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.p-page-estimate__section-content-radio-wrapper span {
  font-size: 16px;
  line-height: 2.25;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__section-content-radio-wrapper span {
    padding-left: 30px;
    line-height: 1.5;
  }
}

.p-page-estimate__label input[type=radio] {
  width: 1px;
  height: 1px;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}
.p-page-estimate__label input[type=radio]:checked + .p-page-estimate__label--radio::after {
  opacity: 1;
}
.p-page-estimate__label input[type=radio]:focus + .p-page-estimate__label--radio::before {
  border-color: #9ebfb8;
}
@media (any-hover: hover) {
  .p-page-estimate__label input[type=radio]:hover + .p-page-estimate__label--radio::before {
    border-color: #9ebfb8;
    border-width: 0.125rem;
  }
}

.p-page-estimate__label--radio {
  padding-left: 1.875rem;
  position: relative;
  -webkit-transition: border-color 0.3s, border-width 0.3s;
  transition: border-color 0.3s, border-width 0.3s;
  margin-bottom: 0;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__label--radio {
    padding-left: 30px;
  }
}
.p-page-estimate__label--radio::before, .p-page-estimate__label--radio::after {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 50%;
}
.p-page-estimate__label--radio::before {
  width: 1.25rem;
  height: 1.25rem;
  left: 0;
  border: 1px solid #2a424b;
  background-color: #fff;
  -webkit-transition: border-color 0.3s, border-width 0.3s;
  transition: border-color 0.3s, border-width 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__label--radio::before {
    width: 20px;
    height: 20px;
  }
}
.p-page-estimate__label--radio::after {
  width: 0.625rem;
  height: 0.625rem;
  background-color: #2a424b;
  left: 0.3125rem;
  opacity: 0;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__label--radio::after {
    left: 5px;
    width: 10px;
    height: 10px;
  }
}

/* 共通オプション表 */
.p-page-estimate__option-table {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 2.5rem;
  max-width: 960px;
  margin-top: 6rem;
  margin-inline: auto;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__option-table {
    margin-block: 80px 20px;
  }
}

.p-page-estimate__option-title {
  font-size: max(1.375rem, 18px);
  font-weight: 600;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__option-title {
    font-size: 22px;
    text-align: center;
  }
}

.p-page-estimate__table-wrapper {
  width: 100%;
  max-width: 1000px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.75rem;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__table-wrapper {
    margin-top: 20px;
  }
  .p-page-estimate__table-wrapper::-webkit-scrollbar {
    height: 7px;
  }
  .p-page-estimate__table-wrapper::-webkit-scrollbar-track {
    background-color: #d9d9d9;
    border-radius: 7px;
  }
  .p-page-estimate__table-wrapper::-webkit-scrollbar-thumb {
    background-color: #9ebfb8;
    border-radius: 20px;
  }
}

.p-page-estimate__table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  background-color: #fff;
}

.p-page-estimate__table th,
.p-page-estimate__table td {
  border: 1px solid #ccc;
  padding: 1.2rem 1rem;
  line-height: 1.8;
  text-align: left;
  vertical-align: middle;
}

.p-page-estimate__table th {
  background-color: #f3f8f6;
  width: 30%;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

.p-page-estimate__table-scroll-arrow {
  display: none;
}
@media (max-width: 693px) {
  .p-page-estimate__table-scroll-arrow {
    display: block;
    margin-top: 20px;
    text-align: center;
  }
  .p-page-estimate__table-scroll-arrow span {
    font-size: 14px;
    font-weight: 600;
  }
}

.p-page-estimate__number {
  height: 2.5625rem;
  width: 6.25rem;
  padding-inline: 1.25rem;
  padding-block: 0.125rem;
  border: 1px solid #898989;
  background-color: #fff;
  line-height: 2.25;
  -webkit-transition: border-color 0.3s, border-width 0.3s;
  transition: border-color 0.3s, border-width 0.3s;
  text-align: center;
}
.p-page-estimate__number:focus {
  outline: none;
  border-color: #9ebfb8;
}
.p-page-estimate__number:hover {
  border-color: #9ebfb8;
  border-width: 0.125rem;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__number {
    height: 43px;
    padding-inline: 11px;
    padding-block: 1px 2px;
  }
}

.p-page-estimate__label input[type=checkbox] {
  width: 1px;
  height: 1px;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}
.p-page-estimate__label input[type=checkbox]:checked + .p-page-estimate__label--check::after {
  opacity: 1;
}
.p-page-estimate__label input[type=checkbox]:focus + .p-page-estimate__label--check::before {
  border-color: #9ebfb8;
}
@media (any-hover: hover) {
  .p-page-estimate__label input[type=checkbox]:hover + .p-page-estimate__label--check::before {
    border-color: #9ebfb8;
    border-width: 0.125rem;
  }
}

.p-page-estimate__label--check {
  padding-left: 1.875rem;
  position: relative;
  -webkit-transition: border-color 0.3s, border-width 0.3s;
  transition: border-color 0.3s, border-width 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__label--check {
    padding-left: 30px;
  }
}
.p-page-estimate__label--check::before, .p-page-estimate__label--check::after {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__label--check::before, .p-page-estimate__label--check::after {
    top: 3px;
    translate: 0 0;
  }
}
.p-page-estimate__label--check::before {
  width: 1.25rem;
  height: 1.25rem;
  left: 0;
  border: 1px solid #2a424b;
  background-color: #fff;
  -webkit-transition: border-color 0.3s, border-width 0.3s;
  transition: border-color 0.3s, border-width 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__label--check::before {
    width: 20px;
    height: 20px;
  }
}
.p-page-estimate__label--check::after {
  width: 1.25rem;
  height: 1.25rem;
  background: url("../img/check.svg") no-repeat center center/cover;
  left: 0.0625rem;
  opacity: 0;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__label--check::after {
    left: 1px;
    width: 20px;
    height: 20px;
  }
}

.p-page-estimate__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.p-page-estimate__number-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0.625rem;
  line-height: 2.25;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__number-wrapper {
    gap: 10px;
    margin-top: 10px;
  }
}

.page-estimate__option-number {
  height: 2.5625rem;
  width: 6.25rem;
  padding-inline: 1.25rem;
  padding-block: 0.125rem 0.125rem;
  border: 1px solid #898989;
  background-color: #fff;
  line-height: 2.25;
  -webkit-transition: border-color 0.3s, border-width 0.3s;
  transition: border-color 0.3s, border-width 0.3s;
  text-align: center;
  margin-left: 1.875rem;
}
.page-estimate__option-number:focus {
  outline: none;
  border-color: #9ebfb8;
}
.page-estimate__option-number:hover {
  border-color: #9ebfb8;
  border-width: 0.125rem;
}
@media not screen and (min-width: 768px) {
  .page-estimate__option-number {
    height: 43px;
    padding-inline: 11px;
    padding-block: 1px 2px;
  }
}

.p-page-estimate__desc-sub {
  font-size: 14px;
  margin-left: 1.75rem;
  margin-top: 0.3125rem;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__desc-sub {
    margin-left: 30px;
    margin-top: 7px;
    line-height: 1.6;
  }
}

.p-page-estimate__result {
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.625rem;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__result {
    margin-top: 30px;
    padding: 1.25rem;
    gap: 10px;
  }
}
.p-page-estimate__result p {
  font-size: max(1.0625rem, 16px);
  margin-block: 0.75rem;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__result p {
    font-size: 16px;
    margin-block: 10px;
  }
}

.p-page-estimate__section-content-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 2.5rem;
  gap: 3.75rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__section-content-bottom {
    margin-top: 40px;
    gap: 60px;
  }
}

.p-estimate__note {
  text-align: center;
}
@media not screen and (min-width: 768px) {
  .p-estimate__note {
    text-align: left;
  }
}
.p-estimate__note a {
  position: relative;
  display: inline;
}
@media not screen and (min-width: 768px) {
  .p-estimate__note a {
    text-decoration: underline;
  }
}
.p-estimate__note a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #2a424b;
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media not screen and (min-width: 768px) {
  .p-estimate__note a::after {
    display: none;
  }
}
@media (any-hover: hover) {
  .p-estimate__note a:hover::after {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
  }
}

.p-page-estimate__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.25rem;
}
@media not screen and (min-width: 768px) {
  .p-page-estimate__buttons {
    gap: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }
}

.p-estimate__btn--sub {
  background-color: #fff;
  color: #666;
  border: 1px solid #ccc;
  position: relative;
}
.p-estimate__btn--sub::after {
  content: "";
  position: absolute;
  background-color: #666;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
@media (any-hover: hover) {
  .p-estimate__btn--sub:hover {
    color: #fff;
  }
  .p-estimate__btn--sub:hover::after {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

.l-page-404 {
  padding-block: 9.9375rem 10.625rem;
}
@media not screen and (min-width: 768px) {
  .l-page-404 {
    padding-block: 90px 80px;
  }
}

.l-page-404__inner {
  max-width: 1080px;
}

.l-page-404__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3.125rem;
  width: 82%;
  margin-inline: auto;
}
@media not screen and (min-width: 768px) {
  .l-page-404__content {
    width: 100%;
    gap: 30px;
    -ms-flex-item-align: stretch;
        align-self: stretch;
  }
}

.p-page-404__message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.875rem;
}
@media not screen and (min-width: 768px) {
  .p-page-404__message {
    gap: 20px;
    -ms-flex-item-align: stretch;
        align-self: stretch;
  }
}

.p-page-404__message-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.5625rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}
@media not screen and (min-width: 768px) {
  .p-page-404__message-heading {
    gap: 25px;
  }
}

.p-page-404__message-heading--en {
  color: #9ebfb8;
  text-align: center;
  font-family: "sofia-pro-soft", sans-serif;
  font-size: 3.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.31rem;
}
@media not screen and (min-width: 768px) {
  .p-page-404__message-heading--en {
    font-size: 48px;
    letter-spacing: 3.84px;
  }
}

.p-page-404__message-heading--ja {
  text-align: center;
  font-size: max(16px, 1.25rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.1rem;
}
@media not screen and (min-width: 768px) {
  .p-page-404__message-heading--ja {
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: 1.6px;
  }
}

.p-page-404__message-text {
  letter-spacing: 0.08rem;
}
@media not screen and (min-width: 768px) {
  .p-page-404__message-text {
    font-size: 14px;
    line-height: 1.4285714286;
    letter-spacing: 1.12px;
  }
}
.p-page-404__message-text span {
  margin-top: 1rem;
}
@media not screen and (min-width: 768px) {
  .p-page-404__message-text span {
    margin-top: 14px;
  }
}

.p-page-404__button {
  border-radius: 10px;
  background-color: #9ebfb8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 8.875rem;
  height: 2.75rem;
  padding: 0.625rem 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  line-height: 1.5;
  white-space: nowrap;
}
@media not screen and (min-width: 768px) {
  .p-page-404__button {
    width: 142px;
    height: 44px;
    padding: 10px 16px;
  }
}

.p-page-contact-thanks__note {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4166666667;
}
@media not screen and (min-width: 768px) {
  .p-page-contact-thanks__note {
    font-size: 14px;
    line-height: 1.4285714286;
  }
}
.p-page-contact-thanks__note a {
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

@media print {
  body {
    background: white;
    color: #000;
  }
  pre {
    page-break-inside: avoid;
  }
  h1,
  p,
  pre {
    page-break-after: auto;
  }
}