@charset "UTF-8";
html {
  scroll-behavior: smooth;
}
@media screen and (max-width: 1439px) and (min-width: 767px) {
  html {
    font-size: calc(16 / 1440 * 100vw);
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: calc(16 / 375 * 100vw);
  }
}

body {
  color: #2a2927;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  line-height: normal;
  position: relative;
  background-color: #f8f8f8;
  overflow-x: hidden;
}

*:focus {
  outline: none;
}

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

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

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

button {
  color: inherit;
  background: transparent;
}

*,
*::before,
*::after {
  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;
  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;
}

.l-fv {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 14.375rem;
  background-image: url(../img/fv_bg_pc.webp);
  background-size: 120% 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
  height: 50.6875rem;
  animation: bg-scroll 40s linear infinite;
}
@media screen and (max-width: 767px) {
  .l-fv {
    background-image: url(../img/fv_bg_sp.webp);
    grid-template-columns: 1fr 10.625rem;
    height: 52.3125rem;
    overflow-x: hidden;
  }
}

@keyframes bg-scroll {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.l-fv__inner {
  width: min(90rem, 100%);
  padding-inline: 2.5rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .l-fv__inner {
    padding-inline: 1.25rem;
  }
}

.l-fv__wrapper {
  position: relative;
}

.l-contact {
  background: #f8f8f8;
}

.l-contact__inner {
  max-width: 90rem;
  margin-inline: auto;
}

.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: transparent;
  z-index: 120;
}

.l-header.--white {
  background-color: #f8f8f8;
}

.l-header__inner {
  padding: 0.5625rem 5rem 0.5625rem 4.375rem;
  display: grid;
  grid-template-columns: 21.25rem 1fr;
  gap: 36.25rem;
}
@media screen and (max-width: 767px) {
  .l-header__inner {
    position: relative;
    padding: 0.3125rem 0.3125rem 0.3125rem 1.1875rem;
  }
}

.l-header__inner.l-under-works {
  max-width: 90rem;
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .l-under-works {
    overflow: hidden;
  }
}

.l-under-works__inner {
  background-color: #f8f8f8;
  width: min(90rem, 100%);
  padding-inline: 2.75rem 9.75rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .l-under-works__inner {
    padding-inline: 1.25rem;
  }
}

.l-under-works__wrapper {
  background-color: #f8f8f8;
}

.l-under-about {
  background: #f8f8f8;
}

.l-under-about__inner {
  width: 100%;
  padding-inline: 40;
  margin-inline: auto;
  max-width: 90rem;
}
@media screen and (max-width: 767px) {
  .l-under-about__inner {
    padding-inline: 1.5rem;
  }
}

.l-under-about-feature {
  padding-top: 7.25rem;
  background: #f8f8f8;
  background-image: url(../../assets/img/underabout_img_circle_test.webp);
  background-size: 60.625rem;
  background-repeat: no-repeat;
  background-position: calc(100% + 21.9375rem) -2.5rem;
}
@media screen and (max-width: 767px) {
  .l-under-about-feature {
    background-size: 62.5rem;
    background-position: calc(100% + 28rem) 1.4375rem;
  }
}
@media (min-width: 1441px) {
  .l-under-about-feature {
    background-position: calc(50% + 36.9375rem) -2.5rem;
  }
}

.l-under-about-feature__inner {
  width: 100%;
  padding-inline: 40;
  margin-inline: auto;
  max-width: 90rem;
}
@media screen and (max-width: 767px) {
  .l-under-about-feature__inner {
    padding-inline: 1.5rem;
    width: 100%;
  }
}

.l-privacy {
  background: #f8f8f8;
}

.l-privacy__inner {
  max-width: 90rem;
  margin-inline: auto;
}

.l-qa {
  padding-top: 6.25rem;
  background-image: url(https://web-development.biz/chan-website.com/wp-content/themes/portforio/assets/img/faq_img.webp);
  background-size: 19.5625rem 19.5625rem;
  background-repeat: no-repeat;
  background-position: 106% 120%;
  background-color: #f8f8f8;
}
@media screen and (max-width: 767px) {
  .l-qa {
    background-image: unset;
  }
}

.l-qa__inner {
  width: min(90rem, 100%);
  padding-inline: 2.5rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .l-qa__inner {
    padding-inline: 1.75rem;
  }
}

.l-about {
  overflow-x: clip;
  background: #f8f8f8;
}

.l-about__inner {
  overflow-y: clip;
  width: min(90rem, 100%);
  padding-inline: 2.5rem;
  margin-inline: auto;
  padding-bottom: 35.125rem;
}
@media screen and (max-width: 767px) {
  .l-about__inner {
    overflow: hidden;
    padding-inline: 1.25rem;
  }
}

.l-skill {
  background-color: #2a2927;
  padding-block: 6.25rem;
}
@media screen and (max-width: 767px) {
  .l-skill {
    padding-block: 2.5rem 3.9375rem;
  }
}

.l-skill__wrapper {
  position: relative;
  overflow-x: clip;
}

.l-service {
  background-color: #2a2927;
  padding-top: 6.25rem;
}

.l-service__inner {
  width: min(90rem, 100%);
  margin-inline: auto;
}

.l-thanks {
  width: 100%;
  background: #f8f8f8;
  margin-inline: auto;
  padding-top: 6.25rem;
}
.l-works {
  padding-block: 11.875rem 6.25rem;
  background: #f8f8f8;
}
@media screen and (max-width: 767px) {
  .l-works {
    padding-block: 6.25rem 3.75rem;
  }
}

.l-strength {
  padding-block: 6.25rem;
  background: #f8f8f8;
}
@media screen and (max-width: 767px) {
  .l-strength {
    padding-block: 10.125rem 3.75rem;
  }
}

.l-strength__inner {
  width: min(90rem, 100%);
  margin-inline: auto;
}

.l-single-work {
  background-color: #f0f0f0;
  padding-block: 4.375rem 6.25rem;
}
@media screen and (max-width: 767px) {
  .l-single-work {
    padding-block: 4.375rem 3.75rem;
  }
}

.l-single-work__inner {
  width: min(90rem, 100%);
  padding-inline: 6.5rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .l-single-work__inner {
    padding-inline: unset;
    background-color: unset;
  }
}

.l-morningsun {
  background-image: url(https://web-development.biz/chan-website.com/wp-content/themes/portforio/assets/img/flow_bg_pc.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
  aspect-ratio: 1483/654;
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
}

.l-review {
  padding-block: 6.25rem;
  background-color: #f0f0f0;
  border-radius: 0px 0px var(--Space-Round-margin-7, 80px) var(--Space-Round-margin-7, 80px);
  background: var(--lightgray, #f0f0f0);
}
@media screen and (max-width: 767px) {
  .l-review {
    padding-block: 3.75rem;
    border-radius: 0px 0px var(--Space-Round-margin-7, 40px) var(--Space-Round-margin-7, 40px);
  }
}

.l-review__inner {
  width: min(112.5rem, 100%);
  padding-inline: 11.25rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .l-review__inner {
    padding-inline: 1.5rem;
  }
}

.l-flow {
  margin-top: 32.125rem;
  padding-block: 6.25rem 18.75rem;
  background: linear-gradient(0deg, #f8f8f8 -11.09%, rgba(248, 248, 248, 0.5) -1.3%, rgba(255, 224, 98, 0.6) 19.35%, #b9b9b9 39.33%, #3d3d3f 75.71%);
  border-radius: 5rem 5rem 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
@media screen and (max-width: 767px) {
  .l-flow {
    margin-top: 23.9375rem;
    border-radius: 2.5rem 2.5rem 0 0;
    background: linear-gradient(0deg, #f8f8f8 -11.09%, rgba(248, 248, 248, 0.5) -1.3%, rgba(255, 224, 98, 0.6) 19.35%, #b9b9b9 39.33%, #3d3d3f 75.71%);
    padding-block: 3.75rem 7.125rem;
  }
}

.l-footer {
  background-color: #f0f0f0;
  background-image: url(https://web-development.biz/chan-website.com/wp-content/themes/portforio/assets/img/footer_img_line_2.webp);
  background-size: 36.1875rem 34.375rem;
  background-repeat: no-repeat;
  background-position: 52.5rem -6.625rem;
}
@media screen and (max-width: 767px) {
  .l-footer {
    background-image: url(https://web-development.biz/chan-website.com/wp-content/themes/portforio/assets/img/footer_img_line_sp.webp);
    background-size: 31.5rem 35.8125rem;
    background-position: -6.3125rem -2.5625rem;
  }
}
@media (min-width: 1441px) {
  .l-footer {
    background-position: calc(50% + 25.5rem) calc(50% - 5.375rem);
  }
}

.l-footer__inner {
  max-width: 90rem;
  padding-block: 4.75rem 1.375rem;
  padding-inline: 2.5rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .l-footer__inner {
    padding-block: 3.75rem 1rem;
    padding-inline: 3.4375rem;
  }
}

.c-btn__black {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  padding: 1rem 3.875rem;
  border: 0rem solid transparent;
  border-radius: 100vmax;
  width: fit-content;
  background: #2a2927;
}
@media (any-hover: hover) {
  .c-btn__black:hover {
    background: linear-gradient(126deg, #4081c3 6.48%, #52b87d 48.45%, #f3cf3d 97.26%);
  }
  .c-btn__black:hover .c-btn__arrow-wrap-black {
    translate: 0.1875rem;
  }
}

.c-btn__text-black {
  position: relative;
  color: #f8f8f8;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}
.c-btn__text-black::after {
  content: "";
  position: absolute;
  border-radius: 100vmax;
  top: 0%;
  left: 110%;
  width: 1.75rem;
  height: 1.75rem;
  background-color: #f8f8f8;
  z-index: 90;
}

.c-btn__arrow-wrap-black {
  transition: all 0.3s ease;
  position: relative;
  top: -0.625rem;
  left: 0.4375rem;
  width: 0.8125rem;
  height: 0.625rem;
  aspect-ratio: 1/1;
  z-index: 100;
}

.c-btn__gray {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  padding: 1rem 1.5rem;
  border: 0rem solid transparent;
  border-radius: 100vmax;
  width: fit-content;
  background: #fafafa;
}
@media (any-hover: hover) {
  .c-btn__gray:hover {
    background: linear-gradient(126deg, #4081c3 6.48%, #52b87d 48.45%, #f3cf3d 97.26%);
  }
  .c-btn__gray:hover .c-btn__arrow-wrap-white:after {
    transform: translateX(0.1875rem);
    background-image: url(https://web-development.biz/chan-website.com/wp-content/themes/portforio/assets/img/common_icon_vector_right_black.svg);
  }
  .c-btn__gray:hover .c-btn__arrow-wrap-white {
    background-color: #f8f8f8;
  }
  .c-btn__gray:hover .c-btn__text-gray {
    color: #f8f8f8;
  }
  .c-btn__gray:hover .c-btn__text-gray::after {
    background: #f8f8f8;
  }
}

.c-btn__text-gray {
  color: #2a2927;
  width: fit-content;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

.c-btn__rainbow {
  display: flex;
  align-items: center;
  padding: 0.5rem 1.5rem;
  border: 0.0625rem solid transparent;
  border-radius: 100vmax;
  width: fit-content;
  background: #f8f8f8;
}
@media (any-hover: hover) {
  .c-btn__rainbow:hover {
    transition: all 0.3s ease;
    background: var(--btn-grad, linear-gradient(126deg, #4081c3 6.48%, #52b87d 48.45%, #f3cf3d 97.26%));
  }
  .c-btn__rainbow:hover .c-btn__text-rainbow {
    transition: all 0.3s ease;
    background: #f8f8f8;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
}

.c-btn__text-rainbow {
  background: linear-gradient(130deg, #4081c3 32.86%, #52b87d 61.28%, #f3cf3d 94.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  width: fit-content;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  text-transform: capitalize;
}

.c-btn__arrow-wrap-white {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 100vmax;
  width: 1.75rem;
  height: 1.75rem;
  background-color: #2a2927;
}
.c-btn__arrow-wrap-white::after {
  content: "";
  position: absolute;
  background-image: url(https://web-development.biz/chan-website.com/wp-content/themes/portforio/assets/img/common_icon_vector_right_white.svg);
  background-repeat: no-repeat;
  background-position: center center;
  width: 0.8125rem;
  height: 0.625rem;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition: all 0.3s ease;
}

.c-btn__line {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  padding-bottom: 0.625rem;
  width: fit-content;
  position: relative;
}
.c-btn__line::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.0625rem;
  background-color: #2a2927;
  bottom: 0;
  left: 0rem;
}
@media screen and (max-width: 767px) {
  .c-btn__line {
    column-gap: 0.3125rem;
    padding-inline: 0.4375rem 0.4375rem;
    padding-bottom: 0.375rem;
  }
}
@media (any-hover: hover) {
  .c-btn__line:hover .c-btn__line-arrow-wrap svg {
    transform: translateX(0.1875rem);
  }
  .c-btn__line:hover .c-btn__line-text {
    background: linear-gradient(126deg, #4081c3 6.48%, #52b87d 48.45%, #f3cf3d 97.26%);
    background-clip: text;
    color: transparent;
    transition: all 0.3s ease;
  }
}

.c-btn__line-text {
  color: #2a2927;
  width: fit-content;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .c-btn__line-text {
    font-size: 0.9375rem;
  }
}

.c-btn__line-arrow-wrap {
  position: relative;
  background-color: #2a2927;
  border-radius: 100vmax;
  width: 1.75rem;
  height: 1.75rem;
  aspect-ratio: 1/1;
}
@media screen and (max-width: 767px) {
  .c-btn__line-arrow-wrap {
    width: 1.125rem;
    height: 1.125rem;
  }
}
.c-btn__line-arrow-wrap svg {
  transition: all 0.3s ease;
  position: absolute;
  width: 0.8125rem;
  height: 0.625rem;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
@media screen and (max-width: 767px) {
  .c-btn__line-arrow-wrap svg {
    width: 0.4375rem;
    height: 0.3125rem;
  }
}

.c-logo {
  font-size: max(12px, 0.75rem);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  text-transform: capitalize;
  border-radius: 1.25rem;
  border: 0.0625rem solid #2a2927;
  padding: 0.25rem 0.5rem;
}
@media screen and (max-width: 767px) {
  .c-logo {
    padding: 0.25rem 1rem;
  }
}

.c-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.c-title p.en {
  font-family: "Montserrat", sans-serif;
  font-size: 5rem;
  font-weight: 700;
  line-height: 100%;
  text-transform: capitalize;
}
@media screen and (max-width: 767px) {
  .c-title p.en {
    font-size: 3.75rem;
  }
}
.c-title h2.ja {
  left: 17.125rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .c-title h2.ja {
    font-size: 0.9375rem;
  }
}

.c-title__flow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.c-title__flow span.en {
  font-family: "Montserrat", sans-serif;
  font-size: 5rem;
  font-weight: 700;
  line-height: 100%;
  text-transform: capitalize;
}
@media screen and (max-width: 767px) {
  .c-title__flow span.en {
    font-size: 3.75rem;
  }
}
.c-title__flow span.ja {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .c-title__flow span.ja {
    font-size: 0.9375rem;
  }
}

.c-title__flow span {
  color: #f8f8f8;
}

.c-title__flow.force-black span {
  color: #2a2927 !important;
}

.c-title__space {
  margin-block: 6.25rem;
  border: 1px solid #2a2927;
  width: 100%;
}

.c-cta {
  position: relative;
  background-image: url(https://web-development.biz/chan-website.com/wp-content/themes/portforio/assets/img/cta_bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding-block: 6.25rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .c-cta {
    padding-block: 5rem 10.75rem;
  }
}

.c-cta__inner {
  width: 100%;
  padding-inline: 2.5rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .c-cta__inner {
    padding-inline: 1.25rem;
  }
}

.c-cta__clock {
  position: absolute;
  background-image: url(https://web-development.biz/chan-website.com/wp-content/themes/portforio/assets/img/cta_img_clock_pc.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 30.4375rem;
  height: 28.375rem;
  bottom: -6.5rem;
  left: -5.8125rem;
}
@media screen and (max-width: 767px) {
  .c-cta__clock {
    width: 14.6875rem;
    height: 13.6875rem;
    bottom: -3.875rem;
    left: unset;
    right: -4.5rem;
  }
}

.c-cta__clock_staple {
  position: relative;
  width: 14.375rem;
  height: 11.25rem;
  top: 5.625rem;
  left: 7.375rem;
}
@media screen and (max-width: 767px) {
  .c-cta__clock_staple {
    width: 6.9375rem;
    height: 5.375rem;
    top: 2.1875rem;
    left: 3.375rem;
  }
}

.c-cta__clock-long {
  position: absolute;
  width: 23.5rem;
  height: 1.875rem;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
@media screen and (max-width: 767px) {
  .c-cta__clock-long {
    width: 11.25rem;
    height: 0.9375rem;
    top: 122%;
    left: 105%;
  }
}

.c-cta__clock-short {
  position: absolute;
  width: 16.5rem;
  height: 1.5625rem;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
@media screen and (max-width: 767px) {
  .c-cta__clock-short {
    width: 7.9375rem;
    height: 0.75rem;
    top: 118%;
    left: 107%;
  }
}

.c-cta__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .c-cta__container {
    gap: 1.25rem;
  }
}

.c-cta__title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-cta__en {
  text-transform: capitalize;
  font-family: "Montserrat", sans-serif;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(125deg, #4081c3 7.46%, #52b87d 42.95%, #f3cf3d 84.23%);
  background-clip: text;
  color: transparent;
}
@media screen and (max-width: 767px) {
  .c-cta__en {
    font-size: 3.75rem;
  }
}

.c-cta__ja,
.c-cta__lead {
  color: #f8f8f8;
}

.c-cta__ja {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
}

.c-cta__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .c-cta__lead {
    padding-inline: 2.25rem;
  }
}

.c-cta__text {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .c-cta__text {
    font-size: max(12px, 0.9375rem);
    font-weight: 500;
    line-height: 1.6;
  }
}

.p-fv__circle-blue,
.p-fv__circle-orange {
  position: absolute;
  z-index: 60;
  max-width: 9rem;
}
@media screen and (max-width: 767px) {
  .p-fv__circle-blue,
  .p-fv__circle-orange {
    width: 4.5rem;
  }
}
.p-fv__circle-blue img,
.p-fv__circle-orange img {
  object-fit: cover;
}

.p-fv__circle-blue {
  top: 27.5rem;
  left: 48.625rem;
}
@media screen and (max-width: 767px) {
  .p-fv__circle-blue {
    top: 51%;
    left: 113%;
  }
}
@media (min-width: 1441px) {
  .p-fv__circle-blue {
    left: calc(50% + 10.625rem);
  }
}

.p-fv__circle-orange {
  top: 9.25rem;
  left: 25.375rem;
}
@media screen and (max-width: 767px) {
  .p-fv__circle-orange {
    top: 17.875rem;
    left: 3.5rem;
  }
}
@media (min-width: 1441px) {
  .p-fv__circle-orange {
    left: calc(50% - 12.375rem);
  }
}

.p-fv__line-blue,
.p-fv__line-orange {
  position: absolute;
  z-index: 60;
  width: 11.25rem;
  height: 1.3125rem;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .p-fv__line-blue,
  .p-fv__line-orange {
    width: 5.1875rem;
    height: 0.625rem;
  }
}
.p-fv__line-blue img,
.p-fv__line-orange img {
  object-fit: cover;
}

.p-fv__line-blue {
  top: 52%;
  left: 53%;
  rotate: 40deg;
}
@media screen and (max-width: 767px) {
  .p-fv__line-blue {
    top: 48%;
    left: 85%;
  }
}
@media (min-width: 1441px) {
  .p-fv__line-blue {
    top: calc(50% + 0.6875rem);
    left: calc(50% + 1.0625rem);
  }
}

.p-fv__line-orange {
  top: 38%;
  left: 42%;
  rotate: 40deg;
}
@media screen and (max-width: 767px) {
  .p-fv__line-orange {
    top: 42%;
    left: 56%;
  }
}
@media (min-width: 1441px) {
  .p-fv__line-orange {
    top: calc(50% - 5.625rem);
    left: calc(50% - 6.3125rem);
  }
}

.p-fv__object-white {
  position: absolute;
  top: 11%;
  left: 21%;
  z-index: 80;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .p-fv__object-white {
    top: 41%;
    left: 1%;
  }
}
@media (min-width: 1441px) {
  .p-fv__object-white {
    top: 11%;
    left: calc(50% - 22.375rem);
  }
}
.p-fv__object-white svg {
  width: 53.125rem;
  height: auto;
}
@media screen and (max-width: 767px) {
  .p-fv__object-white svg {
    width: 25rem;
  }
}
.p-fv__object-white path {
  transition: fill 0.3s;
}

.p-fv__object {
  position: absolute;
  top: 13%;
  left: 26%;
  z-index: 80;
  opacity: 0;
  transform: translate(-2.5rem 0rem);
}
@media screen and (max-width: 767px) {
  .p-fv__object {
    top: 39%;
    left: 0%;
  }
}
@media (min-width: 1441px) {
  .p-fv__object {
    top: 13%;
    left: calc(50% - 18.375rem);
  }
}
.p-fv__object svg {
  width: 56.25rem;
  height: auto;
}
@media screen and (max-width: 767px) {
  .p-fv__object svg {
    width: 26.875rem;
  }
}
.p-fv__object path {
  fill: url(#grad);
  transition: fill 0.3s;
}

.p-fv__side {
  padding: 5.8125rem 5.9375rem 0 0.9375rem;
  background-color: #2a2927;
  width: 14.375rem;
  height: 50.6875rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .p-fv__side {
    padding: 3.5625rem 1.75rem 0 1.75rem;
    width: 10.625rem;
    height: 18.8125rem;
    overflow: hidden;
  }
}

.p-fv__side-track {
  display: flex;
  flex-direction: column;
}

.p-fv__side-text {
  writing-mode: vertical-rl;
  width: fit-content;
  background: var(--grad-b, linear-gradient(97deg, #b9b9b9 25.66%, #616168 95.34%));
  background-clip: text;
  color: transparent;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.01875rem;
  padding-bottom: 3.75rem;
}
@media screen and (max-width: 767px) {
  .p-fv__side-text {
    white-space: nowrap;
  }
}
.p-fv__side-text span.large {
  text-transform: capitalize;
  font-size: 3.5rem;
}
@media screen and (max-width: 767px) {
  .p-fv__side-text span.large {
    font-size: 2.0625rem;
    white-space: nowrap;
  }
}
.p-fv__side-text span.large-s {
  font-size: 4.75rem;
}
@media screen and (max-width: 767px) {
  .p-fv__side-text span.large-s {
    font-size: 3rem;
  }
}
.p-fv__side-text span.large-u {
  font-size: 3.5rem;
}
@media screen and (max-width: 767px) {
  .p-fv__side-text span.large-u {
    font-size: 2.0625rem;
  }
}
.p-fv__side-text span.small {
  font-size: 1.9375rem;
}
@media screen and (max-width: 767px) {
  .p-fv__side-text span.small {
    font-size: 1.375rem;
    white-space: nowrap;
  }
}

.p-fv__text {
  position: absolute;
  font-size: 2.5rem;
  color: #f8f8f8;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  top: 52%;
  left: 54%;
  translate: -50% -50%;
  z-index: 100;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .p-fv__text {
    font-size: 1.5625rem;
    color: #f8f8f8;
    font-weight: 500;
    line-height: 1.2;
    top: 56%;
    left: 78%;
    translate: -50% -50%;
    width: 100%;
  }
}

.p-fv__scrolldown {
  visibility: hidden;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .p-fv__scrolldown {
    position: absolute;
    bottom: 12%;
    right: 2.1875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
}

.p-fv__scrolldown-text {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9375rem;
  writing-mode: vertical-rl;
}

.p-fv__scrolldown-bar {
  position: relative;
}
.p-fv__scrolldown-bar span {
  display: inline-block;
}
.p-fv__scrolldown-bar .bar {
  width: 0.125rem;
  height: 5rem;
  background-color: #2a2927;
}
.p-fv__scrolldown-bar .circle {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50%;
  width: 0.625rem;
  height: auto;
  aspect-ratio: 1;
  background-color: #2a2927;
  border-radius: 50%;
  animation: 2s 0ms ease-in-out forwards infinite scrolldown;
}
@keyframes scrolldown {
  0% {
    top: 0;
  }
  80% {
    top: 4.375rem;
  }
  100% {
    top: 4.375rem;
  }
}

.p-contact__wrapper {
  position: relative;
}

@media screen and (max-width: 767px) {
  .p-contact__wrap {
    background: #f0f0f0;
    width: 100vw;
    height: 89.5vw;
  }
}

.p-contact__line-img {
  position: absolute;
  top: -2.0625rem;
  left: 0;
  width: 46.25rem;
  height: 32.1875rem;
  z-index: 60;
}
@media screen and (max-width: 767px) {
  .p-contact__line-img {
    top: 0rem;
    left: 0rem;
    width: 22.75rem;
    height: 21rem;
  }
}

.p-contact__title {
  position: absolute;
  top: 7.1875rem;
  left: 11.25rem;
  z-index: 80;
}
@media screen and (max-width: 767px) {
  .p-contact__title {
    top: 8rem;
    left: 3.75rem;
  }
}

@media screen and (max-width: 767px) {
  .c-title.contact {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 0;
  }
}
.c-title.contact .en,
.c-title.contact .ja {
  color: #2a2927;
}
.p-contact__container-inner {
  width: min(61.25rem, 100%);
  padding-inline: 2.5rem;
  margin-inline: auto;
  padding-block: 33.3125rem 6.25rem;
}
@media screen and (max-width: 767px) {
  .p-contact__container-inner {
    padding-inline: 1.0625rem;
    padding-block: 4.75rem 0rem;
  }
}

.p-contact__text {
  font-size: 1.25rem;
}
@media screen and (max-width: 767px) {
  .p-contact__text {
    font-size: 0.9375rem;
  }
}

@media screen and (max-width: 767px) {
  .p-contact__text + .p-contact__text {
    margin-top: 1.25rem;
  }
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
@media screen and (max-width: 767px) {
  .contact__form {
    gap: 1.25rem;
  }
}

.wpcf7-form {
  margin-top: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
@media screen and (max-width: 767px) {
  .wpcf7-form {
    gap: 1.25rem;
  }
}

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

.wpcf7-form-control {
  padding: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  border: 1px solid #2a2927;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.contact__row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact__head span.--must {
  position: relative;
  font-size: 1.25rem;
  font-weight: 700;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .contact__head span.--must {
    font-size: 0.9375rem;
  }
}
.contact__head span.--must::before {
  content: "必須";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: calc(100% + 0.5rem);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 0.1875rem 0.625rem;
  line-height: 1.6;
  text-align: center;
  background-color: #2a2927;
  color: #f8f8f8;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .contact__head span.--must::before {
    padding: 0rem 0.625rem;
  }
}
.contact__head span.--better {
  position: relative;
  font-size: 1.25rem;
  font-weight: 700;
  display: inline-block;
}
.contact__head span.--better::before {
  content: "任意";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: calc(100% + 0.5rem);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 0.1875rem 0.625rem;
  line-height: 1.6;
  text-align: center;
  background-color: #acaeb4;
  color: #f8f8f8;
  white-space: nowrap;
}

.contact__acceptance {
  margin-inline: auto;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .contact__acceptance {
    padding-left: 2rem;
  }
}
.contact__acceptance a {
  color: #da3a04;
  text-decoration: underline;
}

input[type=text],
input[type=email],
select,
textarea {
  border-radius: 0;
  width: 100%;
}
textarea {
  resize: vertical;
  height: 15.375rem;
}

input[type=checkbox] {
  width: 1px;
  height: 1px;
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

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

.contact__data-checkbox span {
  display: inline-block;
  position: relative;
}
.contact__data-checkbox span::before {
  content: "";
  position: absolute;
  width: 1.375rem;
  height: auto;
  aspect-ratio: 1;
  border: 2px solid #2a2927;
  right: calc(100% + 0.9375rem);
}
@media screen and (max-width: 767px) {
  .contact__data-checkbox span::before {
    right: calc(100% + 0.625rem);
  }
}
.contact__data-checkbox span::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: -1.875rem;
  width: 0.5rem;
  height: 0.875rem;
  rotate: 45deg;
  border-right: 1.5px solid #000;
  border-bottom: 1.5px solid #000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 767px) {
  .contact__data-checkbox span::after {
    left: -1.5625rem;
  }
}

input[type=submit],
input[type=button] {
  border-radius: 0px;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  background: transparent;
}

input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none;
}

.row.jc-center {
  justify-content: center;
}

.contact__submit {
  text-align: center;
}
.contact__submit input[type=submit] {
  display: inline-block;
}

.wpcf7-response-output {
  display: none;
}

.c-btn__black.contact-form {
  margin-inline: auto;
  width: 26.7%;
}
@media screen and (max-width: 767px) {
  .c-btn__black.contact-form {
    width: 70.5%;
  }
}

.wpcf7-form-control.wpcf7-submit {
  color: #f8f8f8;
  position: relative;
  padding: 0rem;
}

.wpcf7-spinner {
  margin: 0rem;
}

.c-btn__arrow-wrap-black.contact-form {
  position: relative;
}
.c-btn__arrow-wrap-black.contact-form::before {
  content: "";
  position: absolute;
  border-radius: 100vmax;
  top: 0%;
  left: -80%;
  width: 1.75rem;
  height: 1.75rem;
  background-color: #f8f8f8;
  z-index: -1;
}

.breadcrumb.p-contact__bcn {
  padding: 7.3125rem 0rem 0.75rem 1.5rem;
}
@media screen and (max-width: 767px) {
  .breadcrumb.p-contact__bcn {
    margin-top: 5rem;
  }
}

.p-header__logo {
  width: fit-content;
  transition: opacity 0.3s ease;
}
@media (any-hover: hover) {
  .p-header__logo:hover {
    opacity: 0.6;
  }
}

.p-header__logo-link {
  display: flex;
  flex-direction: column;
}

.p-header__logo-top-pc,
.p-header__logo-btm-pc {
  display: block;
  text-transform: capitalize;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.p-header__logo-top-pc.js-color,
.p-header__logo-btm-pc.js-color {
  color: #f8f8f8;
}
.p-header__logo-btm-pc {
  display: inline-flex;
}
.p-header__logo-btm-pc span {
  text-transform: none;
}
@media screen and (max-width: 767px) {
  .p-header__logo-btm-pc span {
    display: none;
  }
}

.p-header__logo-top-pc {
  font-size: 1rem;
}

.p-header__logo-btm-pc {
  font-size: 1.5rem;
}

.p-header__nav {
  display: flex;
  justify-content: flex-end;
  gap: 2.5rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-header__nav {
    display: none;
  }
}

.p-header__list {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}
.p-header__list li a {
  text-transform: capitalize;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
@media (any-hover: hover) {
  .p-header__list li a:hover {
    opacity: 0.6;
  }
}
.p-header__list li svg {
  width: 1.875rem;
  height: 1.875rem;
  transition: opacity 0.3s ease;
}
@media (any-hover: hover) {
  .p-header__list li svg:hover {
    opacity: 0.6;
  }
}
.p-header__list.js-color li a {
  color: #f8f8f8;
}
.p-header__list.js-color li a svg path {
  fill: #f8f8f8;
}
@media screen and (max-width: 767px) {
  .p-header__list {
    display: none;
  }
}

.c-btn__rainbow.p-header__btn {
  padding: 0.5rem 1.5rem;
}

.p-drawer__icon {
  display: none;
  z-index: 140;
}
@media screen and (max-width: 767px) {
  .p-drawer__icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 1.5625rem;
    right: 1.25rem;
    width: 1.9375rem;
    height: 1.3125rem;
    transition: opacity 0.3s ease;
  }
}
@media screen and (max-width: 767px) and (any-hover: hover) {
  .p-drawer__icon:hover {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  .p-drawer__icon::before {
    content: "";
    position: absolute;
    width: 3.75rem;
    height: auto;
    aspect-ratio: 1;
    background-color: #2a2927;
    border-radius: 100vmax;
    z-index: -1;
    top: -1.25rem;
    left: -0.9375rem;
  }
}

.p-drawer__icon.js-color::before {
  background-color: #f8f8f8;
}

.p-drawer__icon--bar {
  width: 100%;
  height: 0.1875rem;
  background: #f8f8f8;
  transition: all 0.5s ease;
}

.p-drawer__icon--bar.js-color {
  background: #2a2927;
}

.p-drawer__icon.js-show .p-drawer__icon--bar:nth-of-type(1) {
  rotate: 45deg;
  translate: 0 0.375rem;
}
.p-drawer__icon.js-show .p-drawer__icon--bar:nth-of-type(2) {
  display: none;
}
.p-drawer__icon.js-show .p-drawer__icon--bar:nth-of-type(3) {
  rotate: -45deg;
  translate: 0 -0.75rem;
}

.p-drawer {
  display: none;
  z-index: 120;
}
@media screen and (max-width: 767px) {
  .p-drawer {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    overflow-y: scroll;
    translate: 120%;
    transition: all 0.5s ease;
  }
  .p-drawer.js-show {
    translate: 0;
  }
}

.p-drawer__body {
  width: 100%;
  height: 100vh;
  height: 100svh;
  padding-block: 7.1875rem 3.75rem;
  background-color: #2a2927;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  overflow-y: scroll;
}

.p-drawer__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2rem;
}
.p-drawer__list li a {
  font-family: "Montserrat", sans-serif;
  color: #f8f8f8;
  font-size: 2rem;
  font-weight: 700;
  text-transform: capitalize;
}

li svg {
  width: 2.25rem;
  height: 2.25rem;
}

.p-drawer__name {
  display: flex;
  flex-direction: column;
  margin-top: 1.25rem;
}

.p-drawer__text-top,
.p-drawer__text-btm {
  text-align: center;
  color: #f8f8f8;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  line-height: 1.5;
}

.p-drawer__text-top {
  font-size: 1rem;
  text-transform: capitalize;
}

.p-drawer__text-btm {
  font-size: 1.5rem;
  margin-top: 0.5rem;
}

.c-btn__rainbow {
  display: flex;
  align-items: center;
  padding: 1rem 2.9375rem;
  border: 0.125rem solid #2a2927;
  border-radius: 100vmax;
  width: fit-content;
  background: #f8f8f8;
}
@media (any-hover: hover) {
  .c-btn__rainbow:hover {
    background: var(--btn-grad, linear-gradient(126deg, #4081c3 6.48%, #52b87d 48.45%, #f3cf3d 97.26%));
  }
  .c-btn__rainbow:hover .p-drawer__text-rainbow {
    background: #f8f8f8;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
}

.p-drawer__text-rainbow {
  background: linear-gradient(130deg, #4081c3 32.86%, #52b87d 61.28%, #f3cf3d 94.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  width: fit-content;
  font-size: 1.875rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  text-transform: capitalize;
}

.p-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1d1d1d;
  z-index: 140;
  background-image: url(../../assets/img/loading_bg_white_pc.webp);
  background-image: url(https://web-development.biz/chan-website.com/wp-content/themes/portforio/assets/img/loading_bg_white_pc.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  transition: opacity 0.3s ease;
  display: none;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .p-loading {
    background-image: url(https://web-development.biz/chan-website.com/wp-content/themes/portforio/assets/img/loading_bg_white_sp.webp);
  }
}
.p-loading.is-visible {
  display: block;
}
.p-loading.js-loading-end {
  opacity: 0;
  pointer-events: none;
}

.p-loading__clock {
  position: relative;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 26.3125rem;
  align-items: 421/392;
}
@media screen and (max-width: 767px) {
  .p-loading__clock {
    width: 19.5rem;
    align-items: 312/219;
  }
}

.p-loading__long {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 24.125rem;
  aspect-ratio: 386/30;
}
@media screen and (max-width: 767px) {
  .p-loading__long {
    width: 17.875rem;
  }
}

.p-loading__short {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 1.875rem;
  height: 18.0625rem;
  aspect-ratio: 30/289;
}
@media screen and (max-width: 767px) {
  .p-loading__short {
    width: 1.125rem;
    height: 12.375rem;
  }
}

.p-privacy__wrapper {
  position: relative;
}

@media screen and (max-width: 767px) {
  .p-privacy__wrap {
    background: #f0f0f0;
    width: 100vw;
    height: 89.5vw;
  }
}

.p-privacy__line-img {
  position: absolute;
  top: -2.0625rem;
  left: 0;
  width: 46.25rem;
  height: 32.1875rem;
  z-index: 60;
}
@media screen and (max-width: 767px) {
  .p-privacy__line-img {
    top: -1.6875rem;
    left: 0.375rem;
    width: 22.75rem;
    height: 21rem;
    rotate: 8deg;
  }
}

.p-privacy__title {
  position: absolute;
  top: 7.1875rem;
  left: 11.25rem;
  z-index: 80;
}
@media screen and (max-width: 767px) {
  .p-privacy__title {
    top: 4.5625rem;
    left: 4.125rem;
  }
}

.p-privacy__top {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4285714286;
}
.c-title.privacy .ja {
  color: #2a2927;
  font-size: 3.75rem;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
}
@media screen and (max-width: 767px) {
  .c-title.privacy .ja {
    font-size: 2.5rem;
  }
}

.p-privacy__container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.p-privacy__box {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.p-privacy__head {
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .p-privacy__head {
    font-size: 0.9375rem;
  }
}

.p-privacy__body {
  font-size: 0.875rem;
  line-height: 1.4285714286;
}
@media screen and (max-width: 767px) {
  .p-privacy__body {
    font-size: 0.9375rem;
  }
}

.p-privacy__box:nth-of-type(3) .p-privacy__body,
.p-privacy__box:nth-of-type(3) li {
  font-size: 0.875rem;
  line-height: 1.4285714286;
}
@media screen and (max-width: 767px) {
  .p-privacy__box:nth-of-type(3) .p-privacy__body,
  .p-privacy__box:nth-of-type(3) li {
    font-size: 0.9375rem;
  }
}
.p-privacy__box:nth-of-type(3) ul {
  margin-top: 0.625rem;
}

.p-privacy__box:nth-of-type(9) .p-privacy__head {
  font-size: 1.5rem;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-privacy__box:nth-of-type(9) .p-privacy__head {
    font-size: 1.25rem;
  }
}
.p-privacy__box:nth-of-type(9) .p-privacy__body {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 0.6666666667;
}
@media screen and (max-width: 767px) {
  .p-privacy__box:nth-of-type(9) .p-privacy__body {
    font-size: 0.9375rem;
  }
}

.p-privacy__container-inner {
  width: min(61.25rem, 100%);
  padding-inline: 2.5rem;
  margin-inline: auto;
  padding-block: 34.8125rem 6.25rem;
}
@media screen and (max-width: 767px) {
  .p-privacy__container-inner {
    padding-inline: 1.0625rem;
    padding-block: 3.75rem 6.25rem;
  }
}

.p-qa__title {
  display: flex;
  justify-content: center;
}
.p-qa__title span.en {
  color: #2a2927;
  text-transform: uppercase;
}
.p-qa__title span.ja {
  color: #2a2927;
}

details:not(:first-of-type) {
  margin-top: 1.5rem;
}
@media (any-hover: hover) {
  details:hover {
    cursor: pointer;
  }
}

summary {
  display: block;
}
summary::-webkit-details-marker {
  display: none;
}

.p-qa__items {
  padding: 3rem 11.25rem 6.25rem;
}
@media screen and (max-width: 767px) {
  .p-qa__items {
    padding: 3rem 0rem 3.75rem;
  }
}

.p-qa__item {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75;
  padding-left: 4.9375rem;
}
@media screen and (max-width: 767px) {
  .p-qa__item {
    font-size: 0.9375rem;
    line-height: 1.6;
    padding-left: 0rem;
  }
}

.p-qa__question {
  padding-block: 2.0625rem 1.625rem;
  padding-left: 4.9375rem;
  background-color: #2a2927;
  color: #f8f8f8;
  font-weight: 700;
  border-radius: 0.25rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-qa__question {
    padding: 1.9375rem 5.4375rem 1.5rem 4.9375rem;
  }
}
.p-qa__question::before, .p-qa__question::after {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  background: #f8f8f8;
}
.p-qa__question::before {
  content: "";
  position: absolute;
  right: 1.875rem;
  width: 1.5625rem;
  height: 0.125rem;
}
.p-qa__question::after {
  content: "";
  position: absolute;
  right: 2.5625rem;
  width: 0.125rem;
  height: 1.5625rem;
  transition: rotate 0.3s ease;
}
@media (any-hover: hover) {
  .p-qa__question:hover {
    cursor: pointer;
  }
}

details[open] .p-qa__question::after {
  rotate: 90deg;
}

.p-qa__question-text {
  list-style: none;
  position: relative;
}
.p-qa__question-text::before {
  content: "Q.";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: -3.0625rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-qa__answer {
  padding-block: 1.25rem;
  background-color: #dde1e6;
  border-bottom-left-radius: 2.5rem;
  border-bottom-right-radius: 2.5rem;
  padding: 1.25rem 2rem 1.25rem 4.9375rem;
}

.p-qa__answer-text {
  list-style: none;
  position: relative;
}
.p-qa__answer-text::before {
  content: "A.";
  position: absolute;
  top: 0rem;
  left: 0rem;
  left: -3.0625rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-about__wrapper {
  position: relative;
}

.p-about__tab {
  display: inline-block;
  position: fixed;
  top: 6.25rem;
  right: 0rem;
  width: 4.9%;
  border-radius: 1.25rem 0rem 0rem 1.25rem;
  background-color: #2a2927;
  z-index: 160;
  padding: 1rem 1.0625rem 0.8125rem 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
}
.p-about__tab.js-show {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 1441px) {
  .p-about__tab {
    width: 4.375rem;
  }
}
@media (any-hover: hover) {
  .p-about__tab:hover {
    width: 7%;
  }
  .p-about__tab:hover .p-about__tab-wrap {
    translate: -70% 0rem;
  }
}
@media (any-hover: hover) and (min-width: 1441px) {
  .p-about__tab:hover .p-about__tab-wrap {
    width: 4.375rem;
  }
}
@media screen and (max-width: 767px) {
  .p-about__tab {
    display: none;
  }
}

.p-about__tab-wrap {
  display: flex;
  gap: 1.25rem;
}

.p-about__tab-text {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: #f8f8f8;
  writing-mode: vertical-rl;
  letter-spacing: 0.1875rem;
}

.p-about__bg-img {
  position: absolute;
  top: 0;
  left: 25.1875rem;
  width: 137.5rem;
}
@media screen and (max-width: 767px) {
  .p-about__bg-img {
    width: 44.9375rem;
    height: 34.1875rem;
    top: 17.5rem;
    left: 0;
    max-width: unset;
  }
}

.p-about__outline-img {
  position: absolute;
  width: 37.375rem;
  height: 37.375rem;
  top: 7.5625rem;
  right: 17.5625rem;
}
@media screen and (max-width: 767px) {
  .p-about__outline-img {
    width: 24.125rem;
    height: 24.125rem;
    top: 18.4375rem;
    right: 1.6875rem;
  }
}

.p-about__circle-img {
  position: absolute;
  width: 87.5rem;
  height: 73.5rem;
  top: -5.5rem;
  right: -16.6875rem;
  transition: translate 0.5s ease;
}
.p-about__circle-img.js-show {
  translate: 8.125rem 10rem;
}
@media screen and (max-width: 767px) {
  .p-about__circle-img {
    width: 56.25rem;
    height: 47.25rem;
    top: 10rem;
    right: -21.25rem;
  }
  .p-about__circle-img.js-show {
    translate: 2.5rem 3.75rem;
  }
}

.p-about__text {
  position: absolute;
  top: 23.125rem;
  right: 22.8125rem;
  display: flex;
  gap: 1.1875rem;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .p-about__text {
    gap: 0.875rem;
    top: 25rem;
    right: 7.5rem;
    height: 100vw;
  }
}

.p-about__text-fv,
.p-about__text-fv-strong {
  writing-mode: vertical-rl;
  letter-spacing: 0.1875rem;
}

.p-about__text-fv {
  font-size: 1.5rem;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .p-about__text-fv {
    font-size: 0.9375rem;
  }
}

.p-about__text-fv-strong {
  font-size: 2.25rem;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .p-about__text-fv-strong {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 767px) {
  .p-about__main {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    gap: 1.25rem;
    padding-left: 1.1875rem;
  }
}

.p-about__tittle {
  padding-top: 6.875rem;
  padding-left: 10rem;
}
@media screen and (max-width: 767px) {
  .p-about__tittle {
    padding-top: 1rem;
    padding-left: 0rem;
  }
}
.p-about__tittle span.en {
  color: #2a2927;
}
.p-about__tittle span.ja {
  background: linear-gradient(170deg, #ffd323 43.02%, #e24b05 113.64%);
  background-clip: text;
  color: transparent;
}

.animated__fadeIn {
  opacity: 0;
  translate: 0 2.5rem;
  transition: translate 0.5s ease, opacity 0.5s ease;
}
.animated__fadeIn.js-show {
  opacity: 1;
  translate: 0 0;
}

.p-about__container {
  padding-left: 10rem;
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-about__container {
    padding-left: 0rem;
    margin-top: 0rem;
  }
}

.p-about__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .p-about__lead {
    gap: 0.625rem;
  }
}

.p-about__text-main {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-about__text-main {
    font-size: 1.25rem;
  }
}

.p-about__text-sub {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
}

.p-about__video__container {
  background: linear-gradient(180deg, #bbb 0%, #2a2927 100%);
}

.p-about__video__wrapper-inner {
  max-width: 90rem;
  max-height: 48.875rem;
  margin-inline: auto;
}

.p-about__video__wrapper {
  height: 54.3vw;
  max-height: 48.875rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .p-about__video__wrapper {
    height: 101vw;
  }
}

.p-about__line-top-img,
.p-about__line-btm-img {
  position: absolute;
}
.p-about__line-top-img picture,
.p-about__line-btm-img picture {
  width: 48.625rem;
  height: 48.625rem;
}
@media screen and (max-width: 767px) {
  .p-about__line-top-img picture,
  .p-about__line-btm-img picture {
    width: 13.8125rem;
    height: 18.9375rem;
  }
}

.p-about__line-top-img {
  top: -35%;
  left: -5%;
  clip-path: inset(0 0 100% 0);
}

.p-about__line-btm-img {
  top: 39%;
  right: 1%;
  clip-path: inset(0 0 100% 0);
}

.p-about__video {
  position: absolute;
  background-color: #1d1d1d;
  height: 23.4375rem;
  width: 36rem;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
@media screen and (max-width: 767px) {
  .p-about__video {
    height: 11.6875rem;
    width: 17.9375rem;
  }
}
.p-about__video iframe {
  position: absolute;
  height: 19.6875rem;
  width: 36rem;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border: none;
}
@media screen and (max-width: 767px) {
  .p-about__video iframe {
    height: 9.8125rem;
    width: 17.9375rem;
  }
}
.p-about__video::before {
  content: "受講生インタビューで取り上げられました！";
  position: absolute;
  color: #f8f8f8;
  font-size: 1.25rem;
  width: 100%;
  font-weight: 700;
  line-height: 1.5;
  top: -10%;
  left: 17%;
}
@media screen and (max-width: 767px) {
  .p-about__video::before {
    font-size: max(12px, 0.75rem);
    left: 10%;
  }
}

.p-skill__line {
  position: absolute;
  z-index: -1;
  bottom: -21.9375rem;
  right: -2.375rem;
  width: 45.6875rem;
  height: 33.3125rem;
  rotate: 2deg;
  clip-path: inset(0 0 100% 0);
}
@media screen and (max-width: 767px) {
  .p-skill__line {
    bottom: -11.3125rem;
    right: -0.4375rem;
    width: 19.25rem;
    height: 14.0625rem;
    rotate: -10deg;
  }
}

.p-skill__title {
  position: relative;
  top: 0;
  left: 11.25rem;
}
@media screen and (max-width: 767px) {
  .p-skill__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    left: 1.5rem;
  }
}
.p-skill__title p.en {
  color: #f8f8f8;
}
.p-skill__title h2.ja {
  background: linear-gradient(138deg, #4081c3 32.12%, #52b87d 48.39%, #f3cf3d 67.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.p-skill__wrap {
  display: flex;
  column-gap: 1.5rem;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .p-skill__wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(auto, 1fr));
    row-gap: 0.625rem;
    column-gap: 0rem;
  }
}
.p-skill__wrap li {
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
  align-items: center;
  margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-skill__wrap li {
    margin-top: 2.375rem;
    gap: 0rem;
  }
}

.p-skill__img {
  width: 10rem;
  height: auto;
  aspect-ratio: 160/160;
}
.p-skill__text {
  color: #f8f8f8;
  font-weight: 700;
  line-height: 1.5;
}

.p-skill__wrap li:nth-of-type(1) .p-skill__text,
.p-skill__wrap li:nth-of-type(2) .p-skill__text {
  text-transform: uppercase;
}

.p-skill__wrap li:nth-of-type(3) .p-skill__text {
  text-transform: capitalize;
}

.p-service__title {
  position: relative;
  top: 0;
  left: 11.25rem;
}
@media screen and (max-width: 767px) {
  .p-service__title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    left: 1.5rem;
  }
}
.p-service__title span.en {
  color: #f8f8f8;
}
.p-service__title span.ja {
  background: linear-gradient(138deg, #4081c3 32.12%, #52b87d 48.39%, #f3cf3d 67.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.p-service__title-wrapper {
  display: inline-flex;
  justify-content: start;
}

.p-service__wrapper {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 767px) {
  .p-service__wrapper {
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
  }
}

.p-service__box {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  max-width: 45rem;
  height: auto;
  aspect-ratio: 720/583;
  padding-inline: 8.3125rem;
  padding-top: 6.625rem;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .p-service__box {
    width: 100vw;
    max-width: unset;
    padding-inline: 2.5rem;
    height: auto;
    aspect-ratio: 375/304;
    padding-top: unset;
  }
}

.p-service__box:nth-of-type(1) {
  background-image: url(https://web-development.biz/chan-website.com/wp-content/themes/portforio/assets/img/service_img_coading.webp);
  gap: 10rem;
}
@media screen and (max-width: 767px) {
  .p-service__box:nth-of-type(1) {
    gap: 2.5rem;
  }
}

.p-service__box:nth-of-type(2) {
  background-image: url(https://web-development.biz/chan-website.com/wp-content/themes/portforio/assets/img/service_img_wp.webp);
}
@media screen and (max-width: 767px) {
  .p-service__box:nth-of-type(2) {
    padding-inline: 3.625rem;
  }
}
.p-service__box:nth-of-type(2) .p-service__text-sub:first-of-type {
  margin-top: 10rem;
}
@media screen and (max-width: 767px) {
  .p-service__box:nth-of-type(2) .p-service__text-sub:first-of-type {
    margin-top: 2.5rem;
  }
}

.p-service__text-title,
.p-service__text-sub {
  color: #f8f8f8;
}

.p-service__text-title {
  text-align: center;
  font-size: 2.5rem;
  line-height: 1.5;
  font-weight: 700;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .p-service__text-title {
    font-size: 1.25rem;
    margin-top: 3.5625rem;
  }
}

.p-service__text-sub {
  text-align-last: left;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .p-service__text-sub {
    font-size: 0.9375rem;
  }
}

.p-thanks__container {
  padding-inline: 40;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-thanks__container {
    gap: 1.25rem;
    padding-inline: 1.75rem;
  }
}

.p-thanks__img {
  width: 10.375rem;
  height: 9.75rem;
  aspect-ratio: 166/156;
}
@media screen and (max-width: 767px) {
  .p-thanks__img {
    width: 7.25rem;
    height: 6.8125rem;
    aspect-ratio: 116/109;
  }
}

.p-thanks__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-thanks__lead {
    gap: 1.25rem;
  }
}

.p-thanks__main {
  font-size: 3.75rem;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
}
@media screen and (max-width: 767px) {
  .p-thanks__main {
    font-size: 3rem;
  }
}

.p-thanks__text {
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.c-btn__gray.p-thanks__btn {
  border: 0.0625rem solid #2a2927;
}

.p-works__inner {
  background: #f8f8f8;
  width: 100%;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-works__inner {
    padding-inline: 1.6875rem;
  }
}

.p-works__title {
  position: relative;
  top: 0;
  left: 11.25rem;
}
@media screen and (max-width: 767px) {
  .p-works__title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    left: 1.5rem;
  }
}
.p-works__title span.en {
  color: #2a2927;
}
.p-works__title span.ja {
  background: linear-gradient(138deg, #4081c3 32.12%, #52b87d 48.39%, #f3cf3d 67.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.p-works__title-wrapper {
  position: relative;
  display: inline-flex;
  justify-content: start;
}
.p-works__title-wrapper::before {
  content: "";
  position: absolute;
  top: -8.5rem;
  left: 0.625rem;
  width: 23.125rem;
  aspect-ratio: 123/116;
  rotate: -4deg;
  background-image: url(https://web-development.biz/chan-website.com/wp-content/themes/portforio/assets/img/works_img_title.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
@media screen and (max-width: 767px) {
  .p-works__title-wrapper::before {
    top: -4.125rem;
    left: -2.25rem;
    width: 10.625rem;
  }
}

.p-works__wrap {
  margin-top: 6.375rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .p-works__wrap {
    margin-top: 3.75rem;
  }
}

.p-works__container {
  display: flex;
  flex-direction: column;
  row-gap: 5rem;
  align-items: center;
}
.p-works__container .p-works__box:nth-of-type(1) {
  background: linear-gradient(180deg, #fff 0.14%, #b5cdff 57.01%);
}
.p-works__container .p-works__box:nth-of-type(2) {
  background: linear-gradient(180deg, #fff 0%, #eae0d5 100%);
}
.p-works__container .p-works__box:nth-of-type(3) {
  background: var(--grad-y, linear-gradient(180deg, #fff -1.59%, #ffe88d 99.91%));
}
@media screen and (max-width: 767px) {
  .p-works__container {
    row-gap: 4.625rem;
  }
}

.p-works__box {
  position: sticky;
  top: 0rem;
  width: 100%;
  height: 42.75rem;
  border-radius: 0 0 2.5rem 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-works__box {
    height: 16.6875rem;
    border-radius: 0 0 1.3125rem 0;
  }
}

.p-works__box:nth-of-type(2) .p-works__box-container {
  margin-top: 7.5625rem;
}
@media screen and (max-width: 767px) {
  .p-works__box:nth-of-type(2) .p-works__box-container {
    margin-top: 2.5rem;
  }
}
.p-works__box:nth-of-type(2) .p-works__box-right {
  text-align: center;
}
.p-works__box:nth-of-type(2) .p-works__box-left,
.p-works__box:nth-of-type(2) .p-works__box-left-img {
  text-align: left;
  padding-left: 0rem;
}

.p-works__box-container {
  margin-top: 10rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5625rem;
}
@media screen and (max-width: 767px) {
  .p-works__box-container {
    margin-top: 2.5rem;
    display: block;
    gap: 0rem;
  }
}
.p-works__box-container .p-works__box-left:nth-of-type(2) {
  align-items: flex-start;
}

.p-works__box-container.reverse {
  grid-template-columns: repeat(2, 1fr);
  gap: 0rem;
}
@media screen and (max-width: 767px) {
  .p-works__box-container.reverse {
    margin-top: 2.5rem;
  }
}

.p-works__box-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1875rem;
  padding-left: 5.0625rem;
}
@media screen and (max-width: 767px) {
  .p-works__box-left {
    padding-left: 0rem;
    align-items: self-start;
  }
}

.p-works__box-left-img {
  padding-left: 1.6875rem;
}
.p-works__box-left-img img {
  max-width: 35rem;
  max-height: 25rem;
}
@media screen and (max-width: 767px) {
  .p-works__box-left-img {
    padding-left: 0rem;
    width: 90%;
    margin-inline: auto;
  }
}

.p-works__box-right {
  padding-top: 1.1875rem;
}
.p-works__box-right img {
  max-width: 35rem;
  max-height: 21.4375rem;
}
@media screen and (max-width: 767px) {
  .p-works__box-right {
    display: none;
  }
}

.p-works__box-left-reverse {
  margin-top: 1.5rem;
  padding-left: 7.8125rem;
}
.p-works__box-left-reverse img {
  max-width: 35rem;
  max-height: 21.4375rem;
}
@media screen and (max-width: 767px) {
  .p-works__box-left-reverse {
    display: none;
  }
}

.p-works__box-right-reverse {
  display: flex;
  flex-direction: column;
  gap: 4.25rem;
}
@media screen and (max-width: 767px) {
  .p-works__box-right-reverse {
    align-items: center;
    gap: 0rem;
    margin-top: 1.875rem;
  }
}

.p-works__box-right-reverse-img img {
  max-width: 35rem;
  max-height: 25rem;
}
@media screen and (max-width: 767px) {
  .p-works__box-right-reverse-img {
    width: 90%;
  }
}

.p-works__under {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .p-works__under {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

.p-works__under-container {
  display: flex;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .p-works__under-container {
    gap: 0.5625rem;
  }
}

.p-works__under-text {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
}
@media screen and (max-width: 767px) {
  .p-works__under-text {
    font-size: 1rem;
    font-weight: 600;
  }
}

@media screen and (max-width: 767px) {
  .p-works__logo {
    text-transform: uppercase;
  }
}

@media screen and (max-width: 767px) {
  .p-works__logo-small {
    text-transform: capitalize;
  }
}

.p-works__btn {
  margin-top: 5.125rem;
  max-width: 90rem;
  margin-inline: auto;
}

.p-strength__title {
  position: relative;
  top: 0;
  left: 11.25rem;
}
@media screen and (max-width: 767px) {
  .p-strength__title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    left: 0rem;
  }
}
.p-strength__title span.en {
  color: #2a2927;
}
.p-strength__title span.ja {
  background: linear-gradient(170deg, #ffd323 43.02%, #e24b05 113.64%);
  background-clip: text;
  color: transparent;
}

.p-strength__boxes {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.p-strength__box {
  display: flex;
  gap: 1.25rem;
  padding-inline: 1rem 6.25rem;
  padding-block: 2.8125rem;
  background: var(--grad-yellow, linear-gradient(170deg, #ffd323 43.02%, #e24b05 113.64%));
  clip-path: inset(0 100% 0 0);
}
.p-strength__box:nth-of-type(1) {
  max-width: 60.4375rem;
}
.p-strength__box:nth-of-type(2) {
  width: 69.0625rem;
}
.p-strength__box:nth-of-type(3) {
  width: 79.4375rem;
}
@media screen and (max-width: 767px) {
  .p-strength__box {
    width: 100vw;
    display: block;
    padding-inline: 2.40625rem;
    padding-block: 1.25rem 3.75rem;
  }
  .p-strength__box:nth-of-type(1), .p-strength__box:nth-of-type(2), .p-strength__box:nth-of-type(3) {
    width: 100vw;
  }
  .p-strength__box:nth-of-type(1) .p-strength__number {
    font-size: 5.5rem;
  }
  .p-strength__box:nth-of-type(2) .p-strength__number {
    font-size: 4.875rem;
  }
  .p-strength__box:nth-of-type(3) .p-strength__number {
    font-size: 5.1875rem;
  }
  .p-strength__box:nth-of-type(1) .p-strength__body {
    top: -3.125rem;
  }
  .p-strength__box:nth-of-type(2) .p-strength__body {
    top: -1.875rem;
  }
  .p-strength__box:nth-of-type(3) .p-strength__body {
    top: -2.5rem;
  }
}

.p-strength__number {
  font-size: 8.6875rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  letter-spacing: 0.434375rem;
  color: #f8f8f8;
  opacity: 0.6;
}
.p-strength__body {
  display: contents;
}
@media screen and (max-width: 767px) {
  .p-strength__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 1.25rem;
  }
}

.p-strength__boxes li:nth-of-type(2) .p-strength__img {
  width: 29.25rem;
}

.p-strength__img {
  max-width: 10rem;
  aspect-ratio: 1;
}
.p-strength__img img {
  width: 100%;
  height: auto;
}

.p-strength__lead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.875rem;
}

.p-strength__lead-main {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-strength__lead-main {
    text-align: center;
    font-size: 1.25rem;
  }
}

.p-strength__lead-sub_pc,
.p-strength__lead-sub_sp {
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .p-strength__lead-sub_pc {
    display: none;
  }
}

.p-strength__lead-sub_sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .p-strength__lead-sub_sp {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .p-single-work__container-inner-wrap {
    background-color: #f8f8f8;
  }
}

.p-single-work__container-inner {
  padding: 5.75rem 6.5rem 6.25rem;
  background-color: #f8f8f8;
}
@media screen and (max-width: 767px) {
  .p-single-work__container-inner {
    padding: 3.75rem 1.5rem 2.5rem;
    background-color: unset;
  }
}

.p-single-work__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-single-work__head {
    gap: 1.25rem;
  }
}

.p-single-work__img {
  width: 62.5%;
  height: 28.875rem;
  aspect-ratio: 1.6666666667;
}
@media screen and (max-width: 767px) {
  .p-single-work__img {
    width: 100%;
    height: 50%;
    aspect-ratio: 1.6649746193;
  }
}

.p-single-work__title {
  display: flex;
  gap: 2rem;
  align-items: center;
  width: 93.7%;
  padding-bottom: 1.25rem;
  border-bottom: 0.0625rem solid #2a2927;
}
@media screen and (max-width: 767px) {
  .p-single-work__title {
    flex-direction: column;
    align-items: baseline;
    border-bottom: unset;
    padding-bottom: unset;
    position: relative;
  }
  .p-single-work__title::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.0625rem;
    background-color: #2a2927;
    bottom: 4.75rem;
    left: 0;
  }
}

.p-single-work__title-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-single-work__title-wrapper {
    flex-direction: column;
    gap: 0.5rem;
    align-items: baseline;
  }
}

.p-single-work__genre-tag {
  display: flex;
  gap: 0.5rem;
}

.p-single-work__text {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-single-work__text {
    font-size: 1.5rem;
  }
}

.p-single-work__logo svg {
  width: 2.1875rem;
  height: 2.1875rem;
  aspect-ratio: 1;
}

.p-single-work__lead-container {
  display: flex;
  flex-direction: column;
}

.p-single-work__look {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.p-single-work__lead {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-single-work__lead {
    font-size: 0.9375rem;
  }
}

.p-single-work__body {
  padding-block: 2.5rem;
  padding-left: 1.875rem;
}
@media screen and (max-width: 767px) {
  .p-single-work__body {
    padding-block: 1.25rem;
    padding-left: 0rem;
  }
}

.p-single-work__demo {
  font-size: 1.125rem;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .p-single-work__demo {
    font-size: 0.9375rem;
  }
}

.p-single-work__body-list {
  display: grid;
  grid-template-areas: "area point" "period point" "time point" "price point";
  grid-template-columns: 11.8125rem 1fr;
  row-gap: 1rem;
  column-gap: 4rem;
}
@media screen and (max-width: 767px) {
  .p-single-work__body-list {
    grid-template-areas: "area" "period" "time" "price" "point";
    grid-template-columns: 1fr;
  }
}

.p-single-work__body-area,
.p-single-work__body-period,
.p-single-work__body-time,
.p-single-work__body-price {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.p-single-work__body-area-title,
.p-single-work__body-period-title,
.p-single-work__body-time-title,
.p-single-work__body-price-title,
.p-single-work__body-point-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  padding-left: 0.25rem;
  border-left: 0.25rem solid #2a2927;
}
@media screen and (max-width: 767px) {
  .p-single-work__body-area-title,
  .p-single-work__body-period-title,
  .p-single-work__body-time-title,
  .p-single-work__body-price-title,
  .p-single-work__body-point-title {
    font-size: 0.9375rem;
  }
}

.p-single-work__body-area-text,
.p-single-work__body-period-text,
.p-single-work__body-time-text,
.p-single-work__body-price-text {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.6;
  max-width: 11.8125rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-single-work__body-area-text,
  .p-single-work__body-period-text,
  .p-single-work__body-time-text,
  .p-single-work__body-price-text {
    margin-inline: unset;
  }
}

.p-single-work__body-area {
  grid-area: area;
}

.p-single-work__body-area-text-box {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.p-single-work__body-period {
  grid-area: period;
}

.p-single-work__body-time {
  grid-area: time;
}

.p-single-work__body-price {
  grid-area: price;
}

.p-single-work__body-point {
  grid-area: point;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-single-work__body-point-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-single-work__body-coding {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.p-single-work__body-coding-title,
.p-single-work__body-com-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-single-work__body-coding-title,
  .p-single-work__body-com-title {
    font-size: 0.9375rem;
  }
}

.p-single-work__body-coding-text,
.p-single-work__body-com-text {
  font-size: 1.25rem;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-single-work__body-coding-text,
  .p-single-work__body-com-text {
    font-size: 0.9375rem;
  }
}

.p-single-work__body-com {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.p-single-work__sub-img-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.75rem;
}
@media screen and (max-width: 767px) {
  .p-single-work__sub-img-wrapper {
    grid-template-columns: 1fr;
    flex-direction: column;
    gap: 1.25rem;
  }
}

.p-single-work__navigation {
  padding-top: 2.5rem;
  display: grid;
  grid-template-areas: "navigation-prev btn navigation-next";
  grid-template-columns: repeat(3, 1fr);
}
.p-single-work__navigation .p-single-work__navigation-prev {
  grid-area: navigation-prev;
}
.p-single-work__navigation .c-btn__line.p-single-work__navigation-btn {
  grid-area: btn;
}
.p-single-work__navigation .p-single-work__navigation-next {
  grid-area: navigation-next;
}
@media screen and (max-width: 767px) {
  .p-single-work__navigation {
    padding-top: 1.25rem;
    grid-template-areas: "navigation-prev navigation-next" "btn btn";
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-single-work__navigation-box {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: baseline;
  margin-top: 0.5rem;
}
@media screen and (max-width: 767px) {
  .p-single-work__navigation-box {
    gap: 0.25rem;
  }
}

.p-single-work__navigation-next,
.p-single-work__navigation-prev {
  margin-inline: auto;
  width: 17.625rem;
  height: auto;
  aspect-ratio: 1.5;
}
@media screen and (max-width: 767px) {
  .p-single-work__navigation-next,
  .p-single-work__navigation-prev {
    width: 73%;
    height: auto;
    aspect-ratio: 1.5;
  }
}

.p-single-work__navigation-next-wrap,
.p-single-work__navigation-prev-wrap {
  overflow: hidden;
  transition: opacity 0.3s ease;
}
.p-single-work__navigation-next-wrap img,
.p-single-work__navigation-prev-wrap img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1.5;
}
@media (any-hover: hover) {
  .p-single-work__navigation-next-wrap:hover img,
  .p-single-work__navigation-prev-wrap:hover img {
    transform: scale(1.2);
    transition: all 0.5s ease;
  }
}

.p-single-work__navigation-next-text,
.p-single-work__navigation-prev-text {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-single-work__navigation-next-text,
  .p-single-work__navigation-prev-text {
    font-size: 0.75rem;
  }
}

.c-btn__line.p-single-work__navigation-btn {
  height: fit-content;
  margin-inline: auto;
  top: 50%;
}
.c-btn__line.p-single-work__navigation-btn::before {
  bottom: 10%;
}
@media screen and (max-width: 767px) {
  .c-btn__line.p-single-work__navigation-btn {
    padding-top: 1.25rem;
  }
}

.nav-links {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-around;
  gap: 21.5rem;
  align-items: center;
}
.nav-links a {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
}

.navigation.post-navigation {
  padding-bottom: 6.25rem;
}

.breadcrumb.p-single-work__bcn {
  padding-block: 0.75rem;
  padding-left: 4.375rem;
}
@media screen and (max-width: 767px) {
  .breadcrumb.p-single-work__bcn {
    padding-left: 1.5rem;
  }
}

.p-flow__inner {
  width: min(107.5rem, 100%);
  padding-inline: 11.25rem;
}
@media screen and (max-width: 767px) {
  .p-flow__inner {
    padding-inline: 2.125rem 1.3125rem;
  }
}

.c-title span {
  color: #f8f8f8;
}
.c-title span.ja {
  white-space: nowrap;
}

.p-flow__container {
  display: grid;
  grid-template-columns: 14.1875rem 1fr;
  gap: 11.3125rem;
}
@media screen and (max-width: 767px) {
  .p-flow__container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.p-flow__sub {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  position: sticky;
  top: 6.25rem;
  height: 45.7vh;
}
@media screen and (max-width: 767px) {
  .p-flow__sub {
    height: 8.75rem;
    top: 3.125rem;
  }
}

.p-flow__lead {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  position: relative;
}
.p-flow__lead::before {
  content: "";
  position: absolute;
  width: 0.125rem;
  height: 22.75rem;
  background: #dde1e6;
  left: 0.9375rem;
}
@media screen and (max-width: 767px) {
  .p-flow__lead {
    flex-direction: row;
    gap: 1.125rem;
  }
  .p-flow__lead::before {
    content: "";
    position: absolute;
    width: 17.8125rem;
    height: 0.125rem;
    background: #dde1e6;
    left: 0.9375rem;
    top: 0.9375rem;
  }
}

.p-flow__lead-text {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: relative;
}

.p-flow__lead-number.is-active {
  font-weight: bold;
  color: #2a2927;
  background-color: #f6ce2e;
}

.p-flow__lead-number {
  border-radius: 100vmax;
  text-align: center;
  width: 2.125rem;
  aspect-ratio: 1;
  background-color: #dde1e6;
  color: #f8f8f8;
  font-weight: 700;
  line-height: 1.5;
  padding-top: 0.1875rem;
}
@media screen and (max-width: 767px) {
  .p-flow__lead-number {
    width: 1.875rem;
    padding-top: 0.0625rem;
  }
}

.p-flow__lead-main {
  color: #f0f0f0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-flow__lead-main {
    display: none;
  }
}

.p-flow__lead-text.force-black .p-flow__lead-number,
.p-flow__lead-text.force-black .p-flow__lead-main {
  color: #2a2927 !important;
}

.p-flow__main {
  margin-top: 7.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-flow__main {
    margin-top: 0rem;
  }
}

.p-flow__item.is-active {
  background-color: #f6ce2e;
  z-index: 0;
  opacity: 1;
  transform: scale(1);
}

.p-flow__item.is-before {
  z-index: 0;
  opacity: 0;
  transform: scale(0.3);
  pointer-events: none;
}

.p-flow__item.is-after {
  z-index: 2;
  opacity: 1;
  transform: scale(1);
}

.p-flow__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-inline: 2rem;
  max-width: 29.125rem;
  height: 19.625rem;
  background-color: #dde1e6;
  position: sticky;
  top: 12.5rem;
  overflow: hidden;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.p-flow__item:before {
  content: "";
  position: absolute;
  width: 12.25rem;
  height: auto;
  aspect-ratio: 1;
  border-radius: 100vmax;
  background: #f8f8f8;
  top: -2.5rem;
  right: -1.25rem;
}
@media screen and (max-width: 767px) {
  .p-flow__item:before {
    width: 8.4375rem;
    height: auto;
    aspect-ratio: 1;
    top: -1.25rem;
    right: -1.25rem;
  }
}
.p-flow__item img {
  position: absolute;
  width: 7.0625rem;
  height: auto;
  aspect-ratio: 1;
  top: 0.9375rem;
  right: 2.1875rem;
}
@media screen and (max-width: 767px) {
  .p-flow__item img {
    right: 0.9375rem;
    width: 4.875rem;
  }
}
.p-flow__item:nth-of-type(2) img {
  width: 7rem;
  height: auto;
  aspect-ratio: 1;
  right: 1.4375rem;
}
@media screen and (max-width: 767px) {
  .p-flow__item:nth-of-type(2) img {
    right: 0.625rem;
    width: 4.8125rem;
  }
}
.p-flow__item:nth-of-type(3) img {
  width: 5.75rem;
  height: 6.75rem;
  aspect-ratio: 92/108;
  right: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-flow__item:nth-of-type(3) img {
    width: 4.375rem;
    height: 4.75rem;
    aspect-ratio: 88/87;
    top: 0.625rem;
    right: 1.5625rem;
  }
}
.p-flow__item:nth-of-type(4) img {
  width: 9.125rem;
  height: 7.6875rem;
  aspect-ratio: 146/123;
  right: 1.25rem;
}
@media screen and (max-width: 767px) {
  .p-flow__item:nth-of-type(4) img {
    width: 7rem;
    height: 5.9375rem;
    aspect-ratio: 112/95;
    right: 0rem;
  }
}
.p-flow__item:nth-of-type(5) img {
  width: 7.3125rem;
  height: 7.0625rem;
  aspect-ratio: 117/113;
  right: 1.5625rem;
}
@media screen and (max-width: 767px) {
  .p-flow__item:nth-of-type(5) img {
    width: 5rem;
    height: 4.875rem;
    aspect-ratio: 80/78;
    right: 0.625rem;
  }
}
.p-flow__item:nth-of-type(6) img {
  width: 7.75rem;
  height: 7.0625rem;
  aspect-ratio: 123/113;
  right: 1.25rem;
}
@media screen and (max-width: 767px) {
  .p-flow__item:nth-of-type(6) img {
    width: 5.3125rem;
    height: 4.75rem;
    aspect-ratio: 85/76;
    right: 0.3125rem;
  }
}
.p-flow__item:nth-of-type(7) img {
  width: 7.3125rem;
  height: 7.0625rem;
  aspect-ratio: 117/113;
  right: 1.25rem;
}
@media screen and (max-width: 767px) {
  .p-flow__item:nth-of-type(7) img {
    width: 5rem;
    height: 4.875rem;
    aspect-ratio: 80/78;
    right: 0.625rem;
  }
}
@media screen and (max-width: 767px) {
  .p-flow__item {
    padding-inline: 1.375rem;
    height: 64vw;
    background-size: 8.4375rem 8.4375rem;
    background-position: 108% -22%;
    top: 17.1875rem;
  }
  .p-flow__item:nth-of-type(3) {
    height: 68.5vw;
  }
  .p-flow__item:nth-of-type(5) {
    height: 76vw;
  }
  .p-flow__item:nth-of-type(7) {
    height: 82.5vw;
  }
}

.p-flow__item-number {
  font-family: "Montserrat", sans-serif;
  font-size: 3.75rem;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-flow__item-number {
    font-size: 2.5625rem;
  }
}

.p-flow__item-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media screen and (max-width: 767px) {
  .p-flow__item-body {
    gap: 0.3125rem;
  }
}

.p-flow__item-body-main {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-flow__item-body-main {
    font-size: 1.25rem;
  }
}

.p-flow__item-body-sub {
  font-size: 0.9375rem;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .p-flow__item-body-sub {
    font-size: 0.9375rem;
  }
}

.p-review__title span.en {
  color: #2a2927;
}
.p-review__title span.ja {
  background: linear-gradient(180deg, #1a72ca 0%, #0d3864 100%);
  background-clip: text;
  color: transparent;
}

.p-review__cards {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20.5rem, 3fr));
  gap: 3rem;
}
@media screen and (max-width: 767px) {
  .p-review__cards {
    margin-top: 1.25rem;
  }
}

.p-review__card {
  border: 0.0625rem solid #f8f8f8;
  background: #f8f8f8;
  box-shadow: 4px 4px 8px 4px rgba(221, 221, 221, 0.64);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.p-review__card-img {
  max-width: 7.5625rem;
}
.p-review__card-img img {
  width: 100%;
  height: auto;
}

.p-review__card-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.p-review__card-main {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.0625rem;
}

.p-review__card-sub {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-review__card-footer {
  display: flex;
  gap: 1.25rem;
}

.p-review__card-footer-category {
  padding: 0.25rem 1.3125rem;
  background-color: #2a2927;
  color: #f8f8f8;
  font-size: max(10px, 0.625rem);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}

.p-review__card-footer-name {
  font-size: max(12px, 1rem);
  font-weight: 500;
}

.p-under-about__wrapper {
  position: relative;
  z-index: 100;
}

.p-under-about__icon-img {
  position: absolute;
  top: 10.9375rem;
  left: -20.1875rem;
  width: 62.75rem;
  height: 65.8125rem;
  aspect-ratio: 1004/1053;
  z-index: 60;
}
@media screen and (max-width: 767px) {
  .p-under-about__icon-img {
    top: 32.5rem;
    left: -13.5625rem;
    width: 33.6875rem;
    height: 35.3125rem;
  }
}

.p-under-about__line-img {
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 46.375rem;
  height: 27.875rem;
  aspect-ratio: 742/494;
  z-index: 80;
}
@media screen and (max-width: 767px) {
  .p-under-about__line-img {
    left: -1.6875rem;
    width: 22.75rem;
    height: 19.625rem;
  }
}

.p-under-about__text-header {
  font-size: 7.25rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  line-height: 1.5043478261;
  position: absolute;
  top: 29.5625rem;
  right: 6.3125rem;
  color: #dde1e6;
}
@media screen and (max-width: 767px) {
  .p-under-about__text-header {
    font-size: 3.4375rem;
    right: -0.9375rem;
    top: 20.3125rem;
  }
}

.p-under-about__title {
  position: absolute;
  top: 9.875rem;
  left: 11.25rem;
  z-index: 100;
}
@media screen and (max-width: 767px) {
  .p-under-about__title {
    top: 7.875rem;
    left: 1.75rem;
  }
}
@media screen and (max-width: 767px) {
  .p-under-about__title .c-title {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 0;
  }
}
.p-under-about__title .c-title .en {
  color: #2a2927;
}
.p-under-about__title .c-title .ja {
  color: #f57339;
  font-weight: 700;
}

.p-under-about__main-container {
  position: relative;
  padding-top: 41.4375rem;
  width: 65.4166666667%;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-inline: auto;
  z-index: 100;
}
@media screen and (max-width: 767px) {
  .p-under-about__main-container {
    width: 100%;
    flex-direction: column;
    padding-top: 28.3125rem;
    gap: 1.25rem;
  }
}

.p-under-about__main-icon-img {
  width: 31.6%;
}
@media screen and (max-width: 767px) {
  .p-under-about__main-icon-img {
    width: 100%;
  }
}

.p-under-about__text-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-under-about__text-head {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

.p-under-about__text-body-top-lead {
  font-size: max(12px, 0.9375rem);
  line-height: 1.6;
}

.p-under-about__text-body-mid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-under-about__text-body-mid-lead {
  font-size: max(12px, 0.9375rem);
  line-height: 1.6;
}
.p-under-about__text-body-mid-lead em {
  font-weight: 700;
  font-style: normal;
}

.p-under-about__text-body-btm {
  margin-top: 1.75rem;
  display: flex;
  gap: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-under-about__text-body-btm {
    flex-direction: column;
    gap: 1.25rem;
  }
}

.p-under-about__text-body-btm-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.p-under-about__text-body-btm-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-under-about__text-body-btm-lead {
  font-size: max(12px, 0.9375rem);
  line-height: 1.6;
}

.p-under-about__card {
  background: #f8f8f8;
  position: relative;
  z-index: 80;
  padding-top: 12rem;
}
@media screen and (max-width: 767px) {
  .p-under-about__card {
    padding-top: 2.5rem;
  }
}

.p-under-about__card-swiper-wrapper {
  transition-timing-function: linear;
}

.swiper-slide {
  padding-inline: 2.1875rem;
}

.swiper-slide.p-under-about__card-swiper-slide {
  display: flex;
  align-items: center;
  margin-block: auto;
  object-fit: contain;
}
.swiper-slide.p-under-about__card-swiper-slide.w585 {
  width: 36.5625rem !important;
  height: auto;
  aspect-ratio: 585/326;
}
@media screen and (max-width: 767px) {
  .swiper-slide.p-under-about__card-swiper-slide.w585 {
    width: 21.1875rem;
    height: auto;
    aspect-ratio: 339/188;
  }
}

.swiper-slide.p-under-about__card-swiper-slide.w362 {
  width: 22.625rem !important;
  height: auto;
  aspect-ratio: 362/326;
}
@media screen and (max-width: 767px) {
  .swiper-slide.p-under-about__card-swiper-slide.w362 {
    width: 16.625rem;
    height: auto;
    aspect-ratio: 266/188;
  }
}

.swiper-slide.p-under-about__card-swiper-slide.w244 {
  width: 15.25rem !important;
  height: auto;
  aspect-ratio: 244/326;
}
@media screen and (max-width: 767px) {
  .swiper-slide.p-under-about__card-swiper-slide.w244 {
    width: 8.8125rem;
    height: auto;
    aspect-ratio: 141/188;
  }
}

.swiper-slide.p-under-about__card-swiper-slide.w488 {
  width: 30.5rem !important;
  height: auto;
  aspect-ratio: 488/326;
}
@media screen and (max-width: 767px) {
  .swiper-slide.p-under-about__card-swiper-slide.w488 {
    width: 17.625rem;
    height: auto;
    aspect-ratio: 282/188;
  }
}

.swiper-slide.p-under-about__card-swiper-slide.w210 {
  width: 13.125rem !important;
  height: auto;
  aspect-ratio: 210/210;
}
@media screen and (max-width: 767px) {
  .swiper-slide.p-under-about__card-swiper-slide.w210 {
    width: 7.5625rem;
    height: auto;
    aspect-ratio: 121/121;
  }
}

.swiper-slide.p-under-about__card-swiper-slide.w224 {
  width: 14rem !important;
  height: auto;
  aspect-ratio: 224/326;
}
@media screen and (max-width: 767px) {
  .swiper-slide.p-under-about__card-swiper-slide.w224 {
    width: 8.0625rem;
    height: auto;
    aspect-ratio: 129/188;
  }
}

.p-under-about-feature__top-head {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-under-about-feature__top-body {
  margin-top: 2.5rem;
  width: 60.5555555556%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-under-about-feature__top-body {
    width: 74.0298507463%;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.p-under-about-feature__top-body-box,
.p-under-about-feature__top-body-lead {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.p-under-about-feature__top-body-lead {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.p-under-about-feature__top-body-lead-head {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-under-about-feature__top-body-lead-body {
  font-size: max(12px, 0.9375rem);
  line-height: 1.6;
}

.p-under-about-feature__btm {
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  .p-under-about-feature__btm {
    margin-top: 2.5rem;
  }
}

.p-under-about-feature__circle-img {
  width: 29.6875rem;
  height: 29.6875rem;
  top: 0;
  right: 0.625rem;
  z-index: 80;
}

.p-under-about-feature__btm-head {
  display: flex;
  justify-content: center;
}

.c-title.p-under-about-feature__btm-title {
  margin-inline: auto;
}
.c-title.p-under-about-feature__btm-title .en {
  color: #2a2927;
}
.c-title.p-under-about-feature__btm-title .ja {
  color: #f57339;
}

.p-under-about-feature__btm-body {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 4.375rem;
  width: 61.1111111111%;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-under-about-feature__btm-body {
    gap: 4.375rem;
    width: 100%;
  }
}

.p-under-about-feature__btm-body-box {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 100%;
}

.p-under-about-feature__btm-body-tab {
  display: inline-block;
  background: var(--orange, linear-gradient(170deg, #ffd323 43.02%, #e24b05 113.64%));
  border-radius: 1.25rem 1.25rem 0 0;
  width: fit-content;
  color: #f8f8f8;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  line-height: 1.5;
  padding: 0.625rem 1rem 0rem;
}

.p-under-about-feature__btm-body-text-box {
  background-color: #dde1e6;
  padding: 1rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}
.p-under-about-feature__btm-body-text-box::before {
  content: "● ● ● ● ●";
  position: absolute;
  bottom: -2.5rem;
  left: 2.375rem;
  rotate: 90deg;
  font-size: 0.4375rem;
  color: #f6ce2e;
}

.p-under-about-feature__btm-body-box:last-of-type .p-under-about-feature__btm-body-text-box::before {
  content: none;
}

.p-under-about-feature__btm-body-text {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

.p-under-about-feature__btm-body-text-sub {
  font-size: max(12px, 0.9375rem);
  line-height: 1.6;
}
.p-under-about-feature__btm-body-text-sub em {
  font-style: normal;
  font-weight: 700;
}

.breadcrumb.p-under-about__bcn {
  padding-block: 7rem 0.625rem;
}

.p-under-works-wrapper {
  position: relative;
}

.p-under-works__pc-img {
  position: absolute;
  width: 35.1875rem;
  height: 20.6875rem;
  top: 5.625rem;
  right: 9vw;
}
@media screen and (max-width: 767px) {
  .p-under-works__pc-img {
    width: 21.5rem;
    height: 12.625rem;
    top: 19.4375rem;
    left: 1.4375rem;
  }
}
@media (min-width: 1441px) {
  .p-under-works__pc-img {
    left: calc(50% + 1.75rem);
  }
}

.p-under-works__line-img {
  position: absolute;
  width: 37%;
  height: auto;
  aspect-ratio: 742/623;
  top: 0.5vw;
  left: 0.5%;
}
@media screen and (max-width: 767px) {
  .p-under-works__line-img {
    width: 116%;
    top: -0.25rem;
    left: -0.5625rem;
    rotate: 4deg;
    aspect-ratio: 433/390;
  }
}
@media (min-width: 1441px) {
  .p-under-works__line-img {
    width: 33.3125rem;
    height: 28rem;
    top: 0.5rem;
    left: unset;
    right: calc(50% + 11.4375rem);
  }
}

button {
  background: none;
}

:where(dialog) {
  width: unset;
  max-width: unset;
  height: unset;
  max-height: unset;
  padding: unset;
  color: unset;
  background-color: unset;
  border: unset;
  overflow: unset;
}

body:has(dialog[open]) {
  overflow: hidden;
}

.wrapper:has(dialog[open]) {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.c-btn__gray.modal__open-btn {
  position: absolute;
  top: 19vw;
  right: 20vw;
}
@media screen and (max-width: 767px) {
  .c-btn__gray.modal__open-btn {
    top: 26.375rem;
    right: 5.0625rem;
    padding: 0.625rem 1.5rem;
  }
}
@media (min-width: 1441px) {
  .c-btn__gray.modal__open-btn {
    top: 17.0625rem;
    right: unset;
    left: calc(50% + 11.6875rem);
  }
}
@media screen and (max-width: 767px) {
  .c-btn__gray.modal__open-btn span.c-btn__text-gray {
    font-size: 0.9375rem;
  }
}

dialog::backdrop {
  opacity: 0;
  transition: background 0.3s ease-in-out;
}
dialog.js-show.modal__content {
  opacity: 1;
}
dialog.js-show::backdrop {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}

.modal__content {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  background: #fff;
  width: 75.4vw;
  height: 100%;
  aspect-ratio: 1085/1153;
}
@media screen and (max-width: 767px) {
  .modal__content {
    width: 91vw;
    height: auto;
    aspect-ratio: 340/728;
  }
}
@media (min-width: 1441px) {
  .modal__content {
    width: 67.8125rem;
  }
}

.modal__inner {
  overflow-y: scroll;
  height: 100%;
  position: relative;
  background: #2a2927;
}

.modal__img {
  margin-block: 9.6875rem 5.125rem;
  width: 100%;
  height: 51.5vw;
}
@media screen and (max-width: 767px) {
  .modal__img {
    height: 22rem;
    margin-block: 8.375rem 0rem;
  }
}
@media (min-width: 1441px) {
  .modal__img {
    width: 67.8125rem;
    height: 46.375rem;
  }
}

@media screen and (max-width: 767px) {
  #modal__text {
    padding: 3.5625rem;
  }
}

.modal__text-main {
  color: #f8f8f8;
  font-size: 1.25rem;
  text-align: center;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .modal__text-main {
    font-size: 0.9375rem;
    text-align: left;
    letter-spacing: -0.03125rem;
  }
}

.modal__close-btn {
  position: absolute;
  z-index: 2;
  top: 2.1875rem;
  right: 2.8125rem;
  font-size: 4rem;
  text-align: center;
  color: #2a2927;
  border-radius: 100vmax;
  background-color: #f8f8f8;
  width: 5.75rem;
  height: 5.75rem;
}
@media screen and (max-width: 767px) {
  .modal__close-btn {
    top: 2.3125rem;
    right: 0.9375rem;
    font-size: 3.125rem;
    width: 3.75rem;
    height: 3.75rem;
  }
}

.p-under-works__header {
  height: 28.5625rem;
  background: #f0f0f0;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-under-works__header {
    max-width: unset;
    height: 35.125rem;
  }
}

.c-title.p-under-works__header-title {
  position: absolute;
  top: 9.875rem;
  left: 13%;
}
@media screen and (max-width: 767px) {
  .c-title.p-under-works__header-title {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    align-items: baseline;
    top: 7.375rem;
    left: 16vw;
  }
}
@media (min-width: 1441px) {
  .c-title.p-under-works__header-title {
    left: unset;
    right: calc(50% + 12.1875rem);
  }
}
.c-title.p-under-works__header-title span.en {
  color: #2a2927;
}
.c-title.p-under-works__header-title span.ja {
  background: var(--grad-green, linear-gradient(138deg, #4081c3 32.12%, #52b87d 48.39%, #f3cf3d 67.32%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.p-under-works__tabs {
  width: 100%;
  margin-inline: auto;
}

.p-under-works__tabs-wrap {
  padding-top: 6.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-under-works__tabs-wrap {
    padding-top: 3.75rem;
    grid-template-columns: repeat(2, 7.5rem);
    gap: 1.25rem;
    column-gap: 2.5rem;
  }
}

.p-under-works__tabs-list {
  padding-top: 6.25rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  gap: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-under-works__tabs-list {
    padding-top: 3.75rem;
    grid-template-columns: repeat(2, 7.5rem);
    gap: 1.25rem;
    column-gap: 2.5rem;
  }
}

.p-under-works__tabs-item {
  background: #dde1e6;
  color: #f8f8f8;
  text-align: center;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  border-radius: 2.5rem;
  padding: 0.8125rem 2.5rem;
}
@media (any-hover: hover) {
  .p-under-works__tabs-item:hover {
    background: #2a2927;
  }
}
@media screen and (max-width: 767px) {
  .p-under-works__tabs-item {
    padding: 0.5rem 0.4375rem;
    font-size: 0.875rem;
  }
}

.p-under-works__tabs-item.is-active {
  background: #2a2927;
}

.p-under-works__tabs-contents {
  margin-top: 2.5rem;
}

.p-under-works__tabs-content-wrap {
  opacity: 0;
  visibility: hidden;
  height: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease;
}
.p-under-works__tabs-content-wrap.js-show {
  opacity: 1;
  visibility: visible;
  height: fit-content;
}

.p-under-works__tabs-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 2.5rem;
  column-gap: 5rem;
}
@media screen and (max-width: 767px) {
  .p-under-works__tabs-content {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
    column-gap: unset;
  }
}

.p-under-works__tabs-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  justify-content: start;
}
@media screen and (max-width: 767px) {
  .p-under-works__tabs-card {
    gap: 0.5rem;
  }
}

.p-under-works__tabs-container {
  display: flex;
  gap: 1rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-under-works__tabs-container {
    flex-direction: column;
    align-items: baseline;
    gap: 0.25rem;
  }
}

.p-under-works__tabs-title {
  font-weight: 600;
  line-height: 1.5;
}

.p-under-works__tabs-logo {
  font-size: max(12px, 0.75rem);
  font-weight: 500;
}

.p-under-works__tabs-genre-tab-box {
  display: flex;
  gap: 0.5625rem;
}

.genre-tag {
  border-radius: 1.25rem;
  min-width: 4.125rem;
  padding: 0.25rem 0.5rem;
  border: 0.0625rem solid #2a2927;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .genre-tag {
    font-size: 0.75rem;
  }
}

.p-pagination {
  margin-block: 5rem 14.0625rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: center;
}
.p-pagination span {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #2a2927;
  color: #f8f8f8;
  border-radius: 100vmax;
  width: 2.75rem;
  height: 2.75rem;
  aspect-ratio: 1;
}

.page-numbers {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.breadcrumb {
  padding-block: 7rem 0.625rem;
  background-color: #f8f8f8;
}

.breadcrumb-container {
  padding-block: 0.75rem 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  padding-left: 4.375rem;
}
@media screen and (max-width: 767px) {
  .breadcrumb-container {
    padding-left: 1.5rem;
  }
}
.breadcrumb-container span + span {
  margin-inline: 0.1875rem;
}

.p-footer__wrapper {
  padding-inline: 1.8125rem 8.75rem;
  display: grid;
  grid-template-columns: 1fr 3.125rem;
  gap: 4rem;
  position: relative;
}
.p-footer__wrapper picture::before {
  content: "";
  position: absolute;
  top: 0rem;
  right: 0rem;
  width: 36.1875rem;
  height: 34.375rem;
}
@media screen and (max-width: 767px) {
  .p-footer__wrapper {
    padding-inline: 0rem;
    gap: 1.25rem;
  }
}

.p-footer__container {
  display: grid;
  grid-template-columns: 16.5rem 1fr;
  gap: 29.875rem;
}
@media screen and (max-width: 767px) {
  .p-footer__container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.p-footer__title {
  color: #2a2927;
  font-family: "Montserrat", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-footer__title {
    font-size: 1.5rem;
    line-height: 1.5;
  }
}

.p-footer__logo {
  margin-top: 0.875rem;
  width: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-footer__logo {
    margin-top: 2.5rem;
    width: 2.1875rem;
  }
}

.p-footer__menu {
  display: flex;
  flex-direction: column;
  gap: 1.4375rem;
}
@media screen and (max-width: 767px) {
  .p-footer__menu {
    flex-direction: row;
    gap: 2.6875rem;
  }
}

.p-footer__menu-top,
.p-footer__menu-btm {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 2rem;
  font-family: "Montserrat", sans-serif;
  color: #2a2927;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: capitalize;
}
.p-footer__menu-top li,
.p-footer__menu-btm li {
  transition: opacity 0.3s ease;
}
@media (any-hover: hover) {
  .p-footer__menu-top li:hover,
  .p-footer__menu-btm li:hover {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  .p-footer__menu-top,
  .p-footer__menu-btm {
    grid-template-columns: 1fr;
  }
}

.p-footer__to-top {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  row-gap: 0.5rem;
  height: fit-content;
  transition: all 0.3s ease;
}
@media (any-hover: hover) {
  .p-footer__to-top:hover {
    opacity: 0.6;
  }
  .p-footer__to-top:hover .p-footer__to-top-img {
    translate: 0 -0.1875rem;
  }
}

.p-footer__to-top-img {
  width: 3.125rem;
  height: auto;
}

.p-footer__to-top-text {
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  text-transform: uppercase;
}
@media screen and (max-width: 767px) {
  .p-footer__to-top-text {
    font-size: max(15px, 0.75rem);
  }
}

.p-footer__policy {
  margin-top: 7.5625rem;
  display: flex;
  justify-content: center;
  gap: 4.3125rem;
}
@media screen and (max-width: 767px) {
  .p-footer__policy {
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.5rem;
  }
}

.p-footer__left,
.p-footer__right-text {
  font-size: 1.125rem;
  letter-spacing: 0.05625rem;
}
@media screen and (max-width: 767px) {
  .p-footer__left,
  .p-footer__right-text {
    font-size: max(12px, 0.75rem);
    font-weight: 700;
    line-height: 2;
  }
}

.p-footer__right-icon {
  width: 1rem;
  height: 1rem;
  aspect-ratio: 1/1;
}

.p-footer__under {
  margin-top: 4.75rem;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 0.875rem;
  mask-type: 2.5rem;
  font-size: max(12px, 0.75rem);
}
.u-sp {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .u-sp {
    display: block !important;
  }
}

@media screen and (max-width: 767px) {
  .u-pc {
    display: none !important;
  }
}
.u-lg {
  display: block !important;
}
@media screen and (max-width: 767px) {
  .u-lg {
    display: block !important;
  }
}

.u-font {
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.u-font__jp {
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.u-font__en {
  font-family: "Montserrat", sans-serif;
}

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

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

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

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

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