html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, rem, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 16px;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

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

html {
  position: relative;
  font-size: 62.5%;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  overflow-x: hidden;
}

.arial {
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

body {
  position: relative;
  background-color: #ffffff;
  overflow-x: hidden;
  overflow-y: hidden;
}

.rll-youtube-player img {
  width: calc(100% + 2px) !important;
  max-width: calc(100% + 2px) !important;
}

.rll-youtube-player {
  padding-bottom: 56.3% !important;
}

a:hover,
.button:hover {
  opacity: .7;
}

/* Desktop base, unwrapped from the original 1001px breakpoint. */

.sp {
  display: none;
}
main {
  background-color: #ffffff !important;
}
.wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 2em;
}
.button_gradient {
  padding: 20px 116px;
  border-radius: 40px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none !important;
  background: linear-gradient(105deg, #bb00f0 -5%, #fd1d1d 15%, #fd1d1d 50%, #fcaf45 115%);
}
.button_gradient.small {
  font-size: 1.4rem;
  padding: 16px 76px;
}
.headline h2 {
  color: #1e1e1e;
  font-size: 4.8rem;
  font-weight: bold;
  letter-spacing: 0.12rem;
  margin-top: 32px;
}
.headline .headline_sub {
  position: relative;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.12rem;
  color: #fd1d1d;
}
.headline .headline_sub:after {
  position: relative;
  display: inline-block;
  content: '';
  right: -1rem;
  top: -0.7rem;
  width: 70px;
  height: 1px;
  background-color: #fd1d1d;
}
header {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100% !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
header li:after {
  background-color: #ffffff !important;
}
header li a {
  color: #ffffff !important;
}
header .sub-menu {
  background-color: rgba(84, 84, 84, 0.6) !important;
}
header .sub-menu li {
  border: none !important;
}
header .sub-menu li + li {
  border-top: 1px solid #7b7b7b !important;
}
.mv {
  position: relative;
  width: 100%;
  height: 720px;
  box-sizing: border-box;
  padding-top: 192px;
  background: linear-gradient(to right, rgba(81, 42, 37, 0.35), rgba(81, 42, 37, 0.35)), url(../img/mv.jpg) center center/cover no-repeat;
}
.mv .catch span {
  font-size: 4.8rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 8.2rem;
  letter-spacing: 0.1rem;
  background: linear-gradient(transparent 60%, #fe4521 60%);
}
.mv .catch_sub {
  display: flex;
  align-items: center;
  margin-top: 4rem;
  letter-spacing: 0.14rem;
}
.mv .catch_sub img {
  width: 25px;
  height: auto;
  margin-right: 1.5rem;
}
.mv .catch_sub span {
  color: #ffffff;
  font-size: 2rem;
  font-weight: bold;
}
.mv .button {
  display: inline-block;
  margin-top: 74px;
}
.service_description {
  background-color: #ffffff;
}
.service_description .catch_area {
  background: url(../img/logo_bg.png) center center/contain no-repeat;
  margin: 56px 0 78px 0;
}
.service_description .catch_area .catch {
  font-size: 4rem;
  font-weight: bold;
  color: #fe4521;
  line-height: 7.4rem;
  letter-spacing: 0.14rem;
  text-align: left;
  padding: 8px 0;
}
.service_description .content {
  position: relative;
  padding: 70px 0;
}
.service_description .content .bg {
  position: absolute;
  width: calc(991px + calc(calc(100vw - 1440px) / 2));
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0 400px 400px 0;
  background-color: #f9f2f2;
}
.service_description .content article {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.service_description .content .text {
  width: 448px;
}
.service_description .content .text h3 {
  color: #1e1e1e;
  line-height: 4.6rem;
  font-size: 2.8rem;
  font-weight: bold;
  letter-spacing: 0.12rem;
}
.service_description .content .text p {
  font-size: 1.6rem;
  color: #1e1e1e;
  line-height: 3.2rem;
  letter-spacing: 0.12rem;
  margin-top: 4.6rem;
  font-weight: 600;
}
.service_description .content .image {
  position: relative;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.12);
  top: -110px;
  width: 600px;
  height: 400px;
}
.service_description .content .image img {
  border-radius: 10px;
  width: 600px;
  height: auto;
}
.feature {
  position: relative;
  padding: 120px 0;
}
.feature .contents {
  margin-top: 80px;
}
.feature .contents article {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.feature .contents article + article {
  margin-top: 2rem;
}
.feature .contents article:nth-child(even) {
  flex-direction: row-reverse;
}
.feature .contents article .image {
  position: relative;
  width: 530px;
  padding: 2em;
}
.feature .contents article .image img {
  width: 100%;
}
.feature .contents article .text {
  width: 466px;
}
.feature .contents article .text .label_sub {
  color: #999999;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.14rem;
}
.feature .contents article .text h3 {
  font-size: 5rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.14rem;
  color: #fe4521;
  margin-top: 20px;
}
.feature .contents article .text .detail {
  margin-top: 24px;
  font-size: 1.6rem;
  letter-spacing: 0.12rem;
  line-height: 2;
  font-weight: bold;
}
.service {
  padding: 80px 0 140px 0;
  background-color: #f9f2f2;
}
.service .contents {
  display: flex;
  flex-wrap: wrap;
  margin-top: 68px;
  justify-content: space-between;
}
.service .contents article {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: calc(33% - calc(10px / 3));
  padding: 40px 90px 60px 90px;
  background-color: #ffffff;
  box-shadow: 2px 8px 15px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.service .contents article:nth-child(n + 4) {
  margin-top: 1rem;
}
.service .contents article .image {
  position: relative;
  width: 160px;
  height: 160px;
}
.service .contents article .image img {
  width: 100%;
}
.service .contents article .text {
  margin-top: 28px;
  text-align: left;
}
.service .contents article .text .label_sub {
  font-size: 1.4rem;
  font-weight: bold;
  color: #fd1d1d;
  letter-spacing: 0.4rem;
}
.service .contents article .text h3 {
  font-size: 2rem;
  margin-top: 2rem;
  font-weight: bold;
  color: #1e1e1e;
  white-space: nowrap;
}
.flow {
  padding: 80px 0 140px 0;
}
.flow .contents {
  margin-top: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow .contents > * + * {
  margin-left: 40px;
}
.flow .contents .arrow {
  align-self: flex-start;
  margin-top: 120px;
  width: 27px;
}
.flow .contents article {
  position: relative;
}
.flow .contents article .flow_text_1 {
  left: calc(50% - 10px);
  top: calc(50% + 10px);
}
.flow .contents article .flow_text_2 {
  left: 50%;
  top: calc(50% + 10px);
}
.flow .contents article .flow_text_3 {
  left: 50%;
  top: calc(50% + 10px);
}
.flow .contents article .image {
  position: relative;
  width: 100%;
  text-align: left;
}
.flow .contents article .image p {
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: 0.08em;
  transform: translate(calc(-1 * var(--flow-number-half, 50%)), -50%);
  font-size: 2.4rem;
  font-weight: bold;
  white-space: nowrap;
}
.flow .contents article .image p span {
  display: inline-block;
  font-size: 7.2rem;
  font-weight: bold;
}
.flow .contents article .image img {
  height: 260px;
}
.flow .contents article:not(:first-child) .image {
  width: 260px;
}
.flow .contents article .text {
  margin-top: 30px;
  text-align: left;
}
.flow .contents article .text h3 {
  font-size: 2.8rem;
  font-weight: bold;
  letter-spacing: 0.08rem;
  color: #fd1d1d;
}
.flow .contents article .text p {
  margin-top: 2rem;
  color: #1e1e1e;
  line-height: 2;
}
.flow .contact {
  text-align: left;
  margin-top: 80px;
}
.flow .contact .button {
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.15);
  padding: 20px 100px;
}
.creator {
  padding: 80px 0 0 0;
  background: linear-gradient(120deg, #bb00f0 -5%, #fd1d1d 15%, #fd1d1d 50%, #fcaf45 115%);
}
.creator .headline .headline_sub {
  color: #ffffff;
}
.creator .headline .headline_sub:after {
  background-color: #ffffff;
}
.creator .headline h2 {
  color: #ffffff;
}
.creator .swiper-container .slider-button-prev, .creator .swiper-container .slider-button-next {
  position: absolute;
  z-index: 5;
  width: 210px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #262d35;
  opacity: 0.7;
  cursor: pointer;
  border-radius: 54px;
}
.creator .swiper-container .slider-button-prev p, .creator .swiper-container .slider-button-next p {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: bold;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.creator .swiper-container .slider-button-prev p img, .creator .swiper-container .slider-button-next p img {
  height: 100%;
}
.creator .swiper-container .slider-button-prev {
  position: absolute;
  left: calc(calc(calc(100vw - 1440px) / 2) + 62px);
  top: calc(50% - 95px);
}
.creator .swiper-container .slider-button-prev p {
  padding-right: 36px;
}
.creator .swiper-container .slider-button-prev img {
  transform: rotate(-90deg);
}
.creator .swiper-container .slider-button-next {
  position: absolute;
  right: calc(calc(calc(100vw - 1440px) / 2) + 62px);
  top: calc(50% - 95px);
}
.creator .swiper-container .slider-button-next p {
  padding-left: 36px;
}
.creator .swiper-container .slider-button-next img {
  transform: rotate(90deg);
}
.creator .swiper-wrapper {
  margin-top: 70px;
  height: auto;
}
.creator .swiper-wrapper article {
  background-color: #ffffff;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  height: 480px;
  width: 980px;
  box-sizing: border-box;
  padding: 56px 80px;
}
.creator .swiper-wrapper article .image {
  position: relative;
  width: 360px;
  height: 360px;
}
.creator .swiper-wrapper article .image:before {
  display: block;
  content: '';
  background-image: url(../img/creator_bg.png);
  background-size: contain;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  left: -20px;
  top: 0;
}
.creator .swiper-wrapper article .image img {
  display: block;
  position: relative;
  width: 360px;
  height: 360px;
  object-fit: cover;
  border-radius: 50%;
}
.creator .swiper-wrapper article .content {
  width: 385px;
  margin-left: 40px;
}
.creator .swiper-wrapper article .content h4 {
  display: flex;
  align-items: center;
}
.creator .swiper-wrapper article .content h4 img {
  width: 52px;
  vertical-align: middle;
}
.creator .swiper-wrapper article .content h4 p {
  color: #fd1d1d;
  font-size: 2.4rem;
  font-weight: bold;
  margin-left: 1rem;
}
.creator .swiper-wrapper article .content .name {
  display: flex;
  align-items: flex-end;
  margin-top: 2rem;
}
.creator .swiper-wrapper article .content .name h3 {
  color: #1e1e1e;
  font-size: 4rem;
  font-weight: bold;
  letter-spacing: 0.12rem;
}
.creator .swiper-wrapper article .content .name h5 {
  color: #1e1e1e;
  font-size: 1.8rem;
  font-weight: bold;
  margin-left: 2rem;
  margin-bottom: 0.12rem;
}
.creator .swiper-wrapper article .content .text {
  margin-top: 40px;
}
.creator .swiper-wrapper article .content .text p {
  font-size: 1.4rem;
  color: #1e1e1e;
  font-weight: 600;
  line-height: 2;
}
.creator .swiper-wrapper article .content .text .button_detail {
  display: inline-block;
  margin-top: 50px;
  background-color: #262D35;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 14px 60px;
  border-radius: 40px;
  text-decoration: none !important;
}
.creator .more {
  margin-top: 70px;
  text-align: left;
  height: 156px;
}
.creator .button {
  display: inline-block;
  padding: 20px 116px;
  border-radius: 40px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #fd1d1d;
  text-decoration: none !important;
  background-color: #ffffff;
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.15);
}
.case_study {
  padding: 80px 0 120px 0;
}
.case_study .contents {
margin-top: 70px;
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: center;
}
.case_study .contents > a {
display: block;
position: relative;
width: calc((100% - 80px) / 3);
height: 397px;
  border-radius: 10px;
  text-decoration: none !important;
  box-shadow: 2px 7px 10px rgba(0, 0, 0, 0.15);
}
.case_study .contents > a:nth-child(n + 4) {
margin-top: 0;
}
.case_study .contents article {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.case_study .contents article .image {
  position: relative;
  width: 100%;
  text-align: left;
  border-radius: 10px 10px 0 0;
}
.case_study .contents article .image img {
  border-radius: 10px 10px 0 0;
  width: 100%;
  height: 171px;
  object-fit: cover;
}
.case_study .contents article .text {
  width: 100%;
  padding: 3rem 2rem 3.45rem;
  box-sizing: border-box;
}
.case_study .contents article .text p {
  font-size: 1.4rem;
  font-weight: bold;
  color: #a8adb3;
  letter-spacing: 0.04em;
}
.case_study .contents article .text h3 {
  margin-top: 1.01rem;
  color: #1e1e1e;
  line-height: 1.56;
  font-weight: bold;
  font-size: 2rem;
}
.case_study .contents article .more {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 47px;
  left: 0;
  bottom: 0;
  border-radius: 0 0 10px 10px;
  background-color: #262d35;
}
.case_study .contents article .more p {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.12rem;
}
.case_study .contact {
  text-align: left;
  margin-top: 80px;
}
.case_study .contact .button {
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.15);
  padding: 20px 100px;
}
.works {
  position: relative;
  padding: 80px 0 120px 0;
}
.works .headline {
  position: relative;
}
.works:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f9f2f2;
  border-radius: 0 200px 0 0;
}
.works .contents {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 100px;
}
.works .contents article {
  position: relative;
  width: calc(50% - 45px);
  text-align: left;
}
.works .contents article:before {
  content: '';
  position: absolute;
  left: 20px;
  top: -40px;
  width: 510px;
  height: 428px;
  background: url(../img/works_bg.svg);
}
.works .contents article:nth-child(n + 3) {
  margin-top: 100px;
}
.works .contents article .video_wrapper {
  position: relative;
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 2;
}
.works .contents article .video_wrapper:before {
  content:"";
  display: block;
  padding-top: 56.25%;
}
.works .contents article .video_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.works .contents article .video_container .play {
  background-position: center;
}
.works .contents article .button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 52px;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 52px;
  background-color: #262d35;
  box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.15);
}
.works .contents article .button span {
  font-size: 1.6rem;
  font-weight: bold;
  color: #ffffff;
}
.works .contact {
  position: relative;
  text-align: left;
  margin-top: 80px;
}
.works .contact .button {
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.15);
  padding: 20px 100px;
}
.contact_section {
  padding: 80px 0 100px 0;
  background: linear-gradient(120deg, #bb00f0 -5%, #fd1d1d 15%, #fd1d1d 50%, #fcaf45 115%);
}
.contact_section .headline .headline_sub {
  color: #ffffff;
}
.contact_section .headline .headline_sub:after {
  background-color: #ffffff;
}
.contact_section .headline h2 {
  color: #ffffff;
}
.contact_section form {
  width: 820px;
  background-color: #ffffff;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 72px 120px;
  margin: 0 auto;
  margin-top: 72px;
}
.contact_section form p + p {
  margin-top: 3rem;
}
.contact_section form p:nth-child(3) label {
  display: inline-block;
  width: calc(50% - 15px);
}
.contact_section form p:nth-child(3) label:nth-child(2) {
  margin-left: 30px;
}
.contact_section form label {
  font-size: 1.6rem;
  font-weight: bold;
  color: #1e1e1e;
  letter-spacing: 0.1rem;
}
.contact_section form label input, .contact_section form label textarea {
  font-size: 1.4rem;
  padding: 1.4rem;
  border-radius: 6px;
  font-weight: 600;
}
.contact_section form label input::placeholder, .contact_section form label textarea::placeholder {
  color: #c6c6c6;
  font-weight: 600;
}
.contact_section form label input, .contact_section form label textarea, .contact_section form label select {
  margin-top: 1rem;
  letter-spacing: 0.1rem;
  background-color: #f2f2f2;
}
.contact_section form select {
  background-color: #eff1f5;
  color: #1e1e1e;
  font-weight: 600;
}
.contact_section form .submit {
  text-align: left;
  margin-top: 40px;
}
.contact_section form .hoipoi-contact-submit {
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.15);
  padding: 20px 120px;
  border-radius: 40px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none !important;
  background: linear-gradient(105deg, #bb00f0 -5%, #fd1d1d 15%, #fd1d1d 50%, #fcaf45 115%);
}
.contact_section form .hoipoi-contact-form__guard {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact_section form .hoipoi-contact-form__message {
  margin-top: 18px;
  min-height: 1.5em;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
}
.contact_section form[data-state="success"] .hoipoi-contact-form__message {
  color: #1f7a4f;
}
.contact_section form[data-state="error"] .hoipoi-contact-form__message {
  color: #d93025;
}
.recruit {
  text-align: center;
  background: linear-gradient(to right, rgba(30, 30, 30, 0.7), rgba(30, 30, 30, 0.7)), url(../img/recruit_bg.jpg) center center/cover no-repeat;
  padding: 70px 0;
}
.recruit .catch {
  font-size: 4rem;
  line-height: 1.5;
  color: #ffffff;
  font-weight: bold;
}
.recruit .text {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: bold;
  margin-top: 40px;
  color: #ffffff;
}
.recruit .button {
  display: inline-block;
  margin-top: 60px;
}
footer .tagcloud a {
  line-height: 1.83;
}

.animation.fadein {
  opacity: 0;
}

.animation.fadein.show {
  animation: fadein 0.3s 1 ease-out forwards;
}

.animation.scale {
  opacity: 0;
}

.animation.scale.show {
  animation: scale 0.4s 1 ease-out forwards;
}

@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes nav_appear {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

.flow .contents article .image .flow-meter-canvas {
  display: block;
  width: 286px;
  height: 286px;
  margin: 0 auto;
}

.flow .contents article .image,
.flow .contents article:not(:first-child) .image {
  width: 286px;
  margin-right: auto;
  margin-left: auto;
}

.flow .contents article .image .flow_text_1,
.flow .contents article .image .flow_text_2,
.flow .contents article .image .flow_text_3 {
  left: 50% !important;
  top: 50% !important;
  z-index: 2;
}

.works .contents article > .video_container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 2;
}

.works .contents article .video_wrapper .video_container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: inherit;
  background: #000;
  overflow: hidden;
}

.works .contents article > .video_container iframe,
.works .contents article .video_wrapper iframe {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.works .contents article .video_container.has-youtube-fallback iframe {
  opacity: 0;
  pointer-events: none;
}

.works .contents article .video_container.has-youtube-fallback {
  background: #f9f2f2 var(--youtube-thumb) center / cover no-repeat;
}

.works .contents article .video_container.has-youtube-fallback:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.works .contents article .video_container .youtube-play-fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 72px;
  height: 50px;
  border-radius: 14px;
  background: rgba(253, 29, 29, 0.92);
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.works .contents article .video_container .youtube-play-fallback:after {
  content: "";
  position: absolute;
  left: 29px;
  top: 14px;
  border-left: 20px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

.creator .more .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 280px;
  height: 63px;
  padding: 0 !important;
}

.contact_section form .hoipoi-contact-submit,
.recruit .button {
  box-sizing: border-box;
  width: 280px;
  height: 63px;
  padding: 0 !important;
}

.recruit .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.feature .contents article .image img {
  display: block;
  width: 90% !important;
  margin: 0 auto;
}

.case_study .contents article .image {
  aspect-ratio: 26 / 15;
  overflow: hidden;
}

.case_study .contents article .image img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.case_study .contents {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 40px !important;
  justify-content: center !important;
}

.case_study .contents > a {
  margin-top: 0 !important;
}

/* Desktop base, unwrapped from the original 1001px breakpoint. */

.case_study .contents > a {
  width: calc((100% - 80px) / 3) !important;
}



@media screen and (min-width: 768px) and (max-width: 1280px) {
  .service_description .content {
    padding: 56px 0 68px;
  }
  .service_description .content .bg {
    width: 100%;
    border-radius: 0;
  }
  .service_description .content article {
    align-items: center;
    gap: 42px;
  }
  .service_description .content .text {
    width: min(46%, 520px);
  }
  .service_description .content .text h3 {
    font-size: 3.1rem;
    line-height: 1.65;
  }
  .service_description .content .text p {
    font-size: 1.95rem;
    line-height: 2.05;
    letter-spacing: 0.08rem;
  }
  .service_description .content .image {
    display: block;
    top: 0;
    width: min(48%, 520px);
    height: min(32vw, 346px);
    padding: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }
  .service_description .content .image img {
    position: static;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
  }
  .feature {
    padding: 104px 0;
  }
  .feature .headline .headline_sub {
    font-size: 2rem;
  }
  .feature .headline .headline_sub:after {
    width: 70px;
  }
  .feature .headline h2 {
    font-size: 4.2rem;
    line-height: 1.2;
    margin-top: 26px;
  }
  .feature .contents {
    margin-top: 58px;
  }
  .feature .contents article,
  .feature .contents article:nth-child(even) {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .feature .contents article + article {
    margin-top: 72px;
  }
  .feature .contents article .image {
    align-self: center;
    box-sizing: border-box;
    width: min(72vw, 620px);
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    text-align: center;
  }
  .feature .contents article .image img {
    display: block;
    width: min(100%, 560px) !important;
    margin: 0 auto;
  }
  .feature .contents article .text {
    width: min(100%, 820px);
    text-align: left;
  }
  .feature .contents article .text .label_sub {
    font-size: 1.95rem;
  }
  .feature .contents article .text h3 {
    font-size: 4.4rem;
    line-height: 1.38;
  }
  .feature .contents article .text .detail {
    font-size: 2rem;
    line-height: 1.85;
    letter-spacing: 0.08rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
  .service_description .content article {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 36px;
  }
  .service_description .content .text {
    width: min(46%, 448px);
  }
  .service_description .content .image {
    width: min(48%, 520px);
    height: min(32vw, 346px);
    aspect-ratio: 3 / 2;
    margin: 0;
  }
}

/* Hero v2: video background with reference-inspired centered copy. */
.mv.hoipoi-hero-v2 {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 900px;
  min-height: 820px;
  padding: 0;
  overflow: hidden;
  background: #05050a url(../img/hoipoihero.png) center top/112% auto no-repeat;
  color: #fff;
  isolation: isolate;
  --hoipoi-hero-scroll: 0;
}
.mv.hoipoi-hero-v2::before,
.mv.hoipoi-hero-v2::after,
.mv.hoipoi-hero-v2 .mv_tone {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mv.hoipoi-hero-v2::before {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.02), transparent 32%),
    linear-gradient(90deg, rgba(20, 0, 25, 0.50), rgba(0, 24, 52, 0.34) 48%, rgba(12, 0, 24, 0.52)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.36) 72%, rgba(0, 0, 0, 0.72));
}
.mv.hoipoi-hero-v2 .mv_tone {
  z-index: 2;
  background: linear-gradient(90deg, rgba(255, 72, 31, 0.16), transparent 28%, transparent 70%, rgba(220, 24, 132, 0.15));
  mix-blend-mode: screen;
}
.mv.hoipoi-hero-v2 .mv_tone::before,
.mv.hoipoi-hero-v2 .mv_tone::after {
  content: '';
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}
.mv.hoipoi-hero-v2 .mv_tone::before {
  inset: -10% -7% 24%;
  z-index: 1;
  background:
    conic-gradient(from 126deg at 51% 4%, transparent 0deg 6deg, rgba(255, 255, 230, 0.42) 7deg 9deg, transparent 11deg 21deg, rgba(255, 250, 210, 0.52) 22deg 24deg, transparent 27deg 37deg, rgba(255, 246, 204, 0.46) 38deg 41deg, transparent 44deg 55deg, rgba(255, 236, 178, 0.34) 56deg 58deg, transparent 61deg 96deg),
    linear-gradient(102deg, transparent 24%, rgba(255, 255, 240, 0.00) 31%, rgba(255, 252, 220, 0.34) 33.2%, rgba(255, 221, 130, 0.10) 36%, transparent 41%),
    linear-gradient(113deg, transparent 43%, rgba(255, 255, 246, 0.00) 50%, rgba(255, 250, 210, 0.30) 52.5%, rgba(255, 213, 112, 0.09) 55.5%, transparent 61%),
    linear-gradient(92deg, transparent 55%, rgba(255, 255, 248, 0.00) 61%, rgba(255, 246, 204, 0.24) 63.2%, rgba(255, 219, 126, 0.07) 66%, transparent 71%),
    radial-gradient(ellipse at 51% 6%, rgba(255, 255, 238, 0.38), rgba(255, 228, 140, 0.14) 12%, transparent 30%);
  background-size: 100% 100%, 122% 100%, 128% 100%, 132% 100%, 100% 100%;
  background-position: center top, 43% 0, 48% 0, 57% 0, center top;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.82) 48%, rgba(0,0,0,0.26) 76%, transparent 96%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.82) 48%, rgba(0,0,0,0.26) 76%, transparent 96%);
  filter: blur(3px) saturate(1.2);
  opacity: calc(0.392 + (var(--hoipoi-hero-scroll) * 0.126));
  transform-origin: 51% 7%;
  transform: translateX(calc(-1% + (var(--hoipoi-hero-scroll) * 2.2%))) rotate(calc(-0.8deg + (var(--hoipoi-hero-scroll) * 1.6deg))) scaleY(calc(0.99 + (var(--hoipoi-hero-scroll) * 0.04)));
  background-position: center top, calc(41% + (var(--hoipoi-hero-scroll) * 7%)) 0, calc(47% + (var(--hoipoi-hero-scroll) * 8%)) 0, calc(60% - (var(--hoipoi-hero-scroll) * 6%)) 0, center top;
}
.mv.hoipoi-hero-v2 .mv_tone::after {
  left: 43%;
  top: 5%;
  z-index: 2;
  width: 22%;
  height: 46%;
  background:
    radial-gradient(ellipse at 51% 13%, rgba(255, 255, 238, 0.42), rgba(255, 226, 138, 0.18) 22%, rgba(255, 176, 70, 0.06) 40%, transparent 66%),
    radial-gradient(ellipse at 51% 64%, rgba(255, 222, 126, 0.16), rgba(255, 177, 76, 0.05) 34%, transparent 68%);
  filter: blur(18px);
  opacity: calc(0.22 + (var(--hoipoi-hero-scroll) * 0.20));
  transform: scale(calc(0.98 + (var(--hoipoi-hero-scroll) * 0.06))) translateY(calc(-1% + (var(--hoipoi-hero-scroll) * 2%)));
}

.mv.hoipoi-hero-v2::after {
  z-index: 3;
  background:
    linear-gradient(100deg, transparent 18%, rgba(255, 255, 245, 0.00) 27%, rgba(255, 252, 220, 0.48) 30.5%, rgba(255, 213, 114, 0.12) 34%, transparent 40%),
    linear-gradient(108deg, transparent 31%, rgba(255, 255, 245, 0.00) 38%, rgba(255, 247, 204, 0.45) 41.5%, rgba(255, 205, 104, 0.12) 45%, transparent 51%),
    linear-gradient(116deg, transparent 43%, rgba(255, 255, 250, 0.00) 50%, rgba(255, 249, 212, 0.38) 53%, rgba(255, 219, 128, 0.10) 56%, transparent 62%),
    linear-gradient(92deg, transparent 55%, rgba(255, 255, 250, 0.00) 61%, rgba(255, 247, 205, 0.22) 63.5%, rgba(255, 219, 128, 0.08) 66%, transparent 71%),
    radial-gradient(circle at 51% 9%, rgba(255, 255, 248, 0.48), rgba(255, 229, 142, 0.20) 10%, rgba(255, 180, 70, 0.06) 24%, transparent 36%);
  background-size: 126% 100%, 120% 100%, 132% 100%, 136% 100%, 100% 100%;
  background-position: 42% 0, 54% 0, 49% 0, 58% 0, center top;
  filter: blur(3px) brightness(1.08);
  mix-blend-mode: screen;
  opacity: calc(0.308 + (var(--hoipoi-hero-scroll) * 0.196));
  transform-origin: 51% 8%;
  transform: translateX(calc(-1.2% + (var(--hoipoi-hero-scroll) * 2.3%))) skewX(calc(-2deg + (var(--hoipoi-hero-scroll) * 3.5deg))) scaleX(calc(0.98 + (var(--hoipoi-hero-scroll) * 0.06)));
  background-position: calc(40% + (var(--hoipoi-hero-scroll) * 7%)) 0, calc(57% - (var(--hoipoi-hero-scroll) * 7%)) 0, calc(47% + (var(--hoipoi-hero-scroll) * 8%)) 0, calc(60% - (var(--hoipoi-hero-scroll) * 6%)) 0, center top;
}
@keyframes hoipoi_angel_ladder {
  0%, 100% {
    opacity: 0.44;
    transform: translateX(-1.2%) skewX(-2deg) scaleX(0.98);
    background-position: 40% 0, 57% 0, 47% 0, 60% 0, center top;
  }
  36% {
    opacity: 0.72;
    transform: translateX(1.1%) skewX(1.5deg) scaleX(1.04);
    background-position: 47% 0, 50% 0, 55% 0, 54% 0, center top;
  }
  64% {
    opacity: 0.58;
    transform: translateX(0.2%) skewX(-0.5deg) scaleX(1.01);
    background-position: center top, 44% 0, 51% 0, 57% 0, center top;
  }
}
@keyframes hoipoi_crepuscular_rays {
  0%, 100% {
    opacity: 0.56;
    transform: translateX(-1%) rotate(-0.8deg) scaleY(0.99);
    background-position: center top, 41% 0, 47% 0, 60% 0, center top;
  }
  42% {
    opacity: 0.78;
    transform: translateX(1.2%) rotate(0.8deg) scaleY(1.03);
    background-position: center top, 48% 0, 55% 0, 54% 0, center top;
  }
  72% {
    opacity: 0.68;
    transform: translateX(0.1%) rotate(-0.3deg) scaleY(1.01);
    background-position: center top, 44% 0, 51% 0, 57% 0, center top;
  }
}
@keyframes hoipoi_woman_aura {
  0%, 100% {
    opacity: 0.22;
    transform: scale(0.98) translateY(-1%);
  }
  46% {
    opacity: 0.42;
    transform: scale(1.04) translateY(1%);
  }
}
.mv.hoipoi-hero-v2 > .wrapper {
  position: relative;
  z-index: 4;
  width: min(1180px, 100% - 48px);
  margin: 0 auto;
}
.mv.hoipoi-hero-v2 .content {
  position: relative;
  top: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: left;
  padding-top: 92px;
}
.mv.hoipoi-hero-v2 .mv_pills {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 44px;
}
.mv.hoipoi-hero-v2 .mv_pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 300px;
  min-height: 58px;
  padding: 0 34px;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: rgba(7, 8, 22, 0.26);
  color: #fff;
  font-size: 2.2rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}
.mv.hoipoi-hero-v2 .mv_pill_icon,
.mv.hoipoi-hero-v2 .mv_feature_icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #ff4a24;
  background: linear-gradient(135deg, #d52fbe, #ff3a22 52%, #ffc05b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mv.hoipoi-hero-v2 .mv_icon_wave::before { content: '≋'; font-size: 4.4rem; font-weight: 700; line-height: 1; }
.mv.hoipoi-hero-v2 .mv_icon_note::before { content: '♪'; font-size: 4.8rem; font-weight: 700; line-height: 1; }
.mv.hoipoi-hero-v2 .mv_icon_mixer::before { content: '♮'; font-size: 4.7rem; font-weight: 700; line-height: 1; }
.mv.hoipoi-hero-v2 .mv_title {
  max-width: 1180px;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(4.2rem, 4.35vw, 6.4rem);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.62);
  background: none;
}
.mv.hoipoi-hero-v2 .mv_subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: min(740px, 100%);
  margin: 24px auto 34px;
  color: #fff;
  font-size: 2.35rem;
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.56);
}
.mv.hoipoi-hero-v2 .mv_subtitle::before,
.mv.hoipoi-hero-v2 .mv_subtitle::after {
  content: '';
  height: 2px;
  flex: 1 1 90px;
  max-width: 140px;
  background: rgba(255, 255, 255, 0.55);
}
.mv.hoipoi-hero-v2 .mv_features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 86px;
  width: min(600px, 100%);
  margin: 0 auto;
}
.mv.hoipoi-hero-v2 .mv_features article {
  color: #fff;
  text-align: left;
}
.mv.hoipoi-hero-v2 .mv_feature_icon {
  height: 60px;
  margin-bottom: 12px;
}
.mv.hoipoi-hero-v2 .mv_features p {
  margin: 0;
  color: #fff;
  font-size: 1.55rem;
  line-height: 1.65;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.62);
}
.mv.hoipoi-hero-v2 .mv_cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
  width: 320px;
  height: 64px;
  margin: 52px auto 0;
  padding: 0 34px;
  border-radius: 999px;
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}
.mv.hoipoi-hero-v2 .mv_cta span {
  font-size: 3rem;
  line-height: 1;
  font-weight: 400;
}
.mv.hoipoi-hero-v2 .mv_stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  align-items: center;
  width: min(920px, 100%);
  min-height: 86px;
  margin: 58px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  overflow: hidden;
}
.mv.hoipoi-hero-v2 .mv_stats div {
  position: relative;
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 86px;
  padding: 10px 24px;
  box-sizing: border-box;
}
.mv.hoipoi-hero-v2 .mv_stats div + div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: rgba(255, 255, 255, 0.10);
}
.mv.hoipoi-hero-v2 .mv_stats span {
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mv.hoipoi-hero-v2 .mv_stats strong {
  color: #fff;
  font-size: 2.8rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 1024px) {
  .mv.hoipoi-hero-v2 {
    height: 780px;
    min-height: 760px;
    background-position: center top;
    background-size: auto 108%;
  }
  .mv.hoipoi-hero-v2 > .wrapper {
    width: min(100% - 40px, 900px);
  }
  .mv.hoipoi-hero-v2 .content {
    padding-top: 74px;
  }
  .mv.hoipoi-hero-v2 .mv_title {
    max-width: 920px;
    font-size: clamp(3.8rem, 5.1vw, 5.3rem);
    line-height: 1.22;
    white-space: nowrap;
  }
  .mv.hoipoi-hero-v2 .mv_subtitle {
    width: min(640px, 100%);
    margin: 22px auto 0;
    gap: 16px;
    font-size: 1.95rem;
    line-height: 1.55;
  }
  .mv.hoipoi-hero-v2 .mv_subtitle::before,
  .mv.hoipoi-hero-v2 .mv_subtitle::after {
    max-width: 96px;
  }
  .mv.hoipoi-hero-v2 .mv_cta {
    width: 320px;
    height: 62px;
    margin-top: 46px;
    padding: 0 30px;
    font-size: 1.85rem;
  }
  .mv.hoipoi-hero-v2 .mv_stats {
    width: min(760px, 100%);
    min-height: 78px;
    margin-top: 42px;
    border-radius: 26px;
  }
  .mv.hoipoi-hero-v2 .mv_stats div {
    min-height: 78px;
    padding: 10px 18px;
  }
  .mv.hoipoi-hero-v2 .mv_stats span {
    font-size: 1.1rem;
  }
  .mv.hoipoi-hero-v2 .mv_stats strong {
    font-size: 2.25rem;
  }
}
@media screen and (max-width: 767px) {
  .mv.hoipoi-hero-v2 {
    height: auto;
    min-height: 760px;
    padding: 104px 0 46px;
    background-position: center top;
    background-size: auto 122%;
  }
  .mv.hoipoi-hero-v2 > .wrapper {
    width: min(100% - 32px, 430px);
  }
  .mv.hoipoi-hero-v2 .content {
    padding-top: 0;
  }
  .mv.hoipoi-hero-v2 .mv_title {
    max-width: 100%;
    font-size: clamp(2.9rem, 8.2vw, 3.6rem);
    line-height: 1.36;
    letter-spacing: 0.01em;
    white-space: normal;
  }
  .mv.hoipoi-hero-v2 .mv_subtitle {
    width: 100%;
    margin: 20px auto 0;
    gap: 10px;
    font-size: 1.34rem;
    line-height: 1.65;
    letter-spacing: 0.04em;
  }
  .mv.hoipoi-hero-v2 .mv_subtitle::before,
  .mv.hoipoi-hero-v2 .mv_subtitle::after {
    max-width: 30px;
    flex-basis: 30px;
  }
  .mv.hoipoi-hero-v2 .mv_cta {
    width: min(100%, 292px);
    height: 56px;
    margin-top: 42px;
    padding: 0 22px;
    font-size: 1.55rem;
    letter-spacing: 0.04em;
  }
  .mv.hoipoi-hero-v2 .mv_stats {
    grid-template-columns: 1fr;
    width: min(100%, 320px);
    min-height: 0;
    margin-top: 34px;
    border-radius: 22px;
  }
  .mv.hoipoi-hero-v2 .mv_stats div {
    min-height: 64px;
    padding: 12px 18px;
  }
  .mv.hoipoi-hero-v2 .mv_stats div + div::before {
    left: 24px;
    right: 24px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .mv.hoipoi-hero-v2 .mv_stats span {
    font-size: 1rem;
  }
  .mv.hoipoi-hero-v2 .mv_stats strong {
    font-size: 1.95rem;
  }
  .service_description .content {
    padding: 54px 0 66px;
  }
  .service_description .content .bg {
    width: 100%;
    border-radius: 0;
  }
  .service_description .content article {
    flex-direction: column;
    align-items: center;
    gap: 34px;
  }
  .service_description .content .text {
    width: min(100% - 48px, 620px);
    margin-right: auto;
    margin-left: auto;
    border-radius: 10px;
  }
  .service_description .content .text h3 {
    font-size: 2.6rem;
    line-height: 1.55;
  }
  .service_description .content .text p {
    margin-top: 3.2rem;
    font-size: 1.75rem;
    line-height: 2;
    letter-spacing: 0.06rem;
  }
  .service_description .content .image {
    display: block;
    top: 0;
    width: min(100% - 64px, 560px);
    height: auto;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }
  .service_description .content .image img {
    position: static;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
  }
  .feature {
    padding: 88px 0;
  }
  .feature .contents {
    margin-top: 48px;
  }
  .feature .contents article,
  .feature .contents article:nth-child(even) {
    box-sizing: border-box;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .feature .contents article + article {
    margin-top: 66px;
  }
  .feature .contents article .image {
    align-self: center;
    box-sizing: border-box;
    width: min(78vw, 500px);
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    text-align: center;
  }
  .feature .contents article .image img {
    display: block;
    width: min(100%, 500px) !important;
    margin: 0 auto;
  }
  .feature .contents article .text {
    width: min(100% - 48px, 620px);
  }
  .feature .contents article .text .label_sub {
    font-size: 1.6rem;
  }
  .feature .contents article .text h3 {
    font-size: 3.4rem;
    line-height: 1.42;
  }
  .feature .contents article .text .detail {
    font-size: 1.75rem;
    line-height: 1.85;
    letter-spacing: 0.06rem;
  }
}
@media screen and (max-width: 420px) {
  .mv.hoipoi-hero-v2 {
    min-height: 720px;
    padding-top: 96px;
    padding-bottom: 40px;
    background-size: auto 132%;
  }
  .mv.hoipoi-hero-v2 .mv_title {
    font-size: clamp(2.65rem, 8vw, 3.15rem);
  }
  .mv.hoipoi-hero-v2 .mv_subtitle {
    font-size: 1.22rem;
  }
  .mv.hoipoi-hero-v2 .mv_cta {
    width: 270px;
    height: 54px;
    margin-top: 36px;
  }
  .mv.hoipoi-hero-v2 .mv_stats {
    width: min(100%, 300px);
    margin-top: 30px;
  }
}

/* Keep page sections centered; footer alignment is scoped separately below. */
.service_description .catch_area,
.service_description .catch_area .catch,
.service .contents article .text,
.service .contents article .text .label_sub,
.flow .contents article .image,
.flow .contents article .text,
.flow .contact,
.creator .more,
.case_study .contents article .image,
.case_study .contact,
.works .contents article,
.works .contact,
.contact_section form .submit,
.recruit {
  text-align: center;
}
.creator .swiper-wrapper article .content .name h5 {
  margin-left: 1.4rem;
  line-height: 1;
  white-space: nowrap;
}
.creator .swiper-container {
  background-color: transparent;
}
.creator .swiper-container.animation.fadein,
.creator .swiper-container.animation.fadein.show {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.creator .swiper-container .swiper-wrapper,
.creator .swiper-container .swiper-slide {
  visibility: visible !important;
}
@media screen and (max-width: 700px) {
  .creator .swiper-wrapper article {
    height: auto !important;
    min-height: 0;
    padding-bottom: 2.4rem !important;
  }
  .creator .swiper-wrapper article .content {
    padding-bottom: 0;
  }
  .creator .swiper-wrapper article .content .text .button_detail {
    position: static;
    margin-top: 2.4rem;
  }
}
.recruit {
  display: none !important;
}

/* Independent LP footer */
.footer.hoipoi-footer {
  position: relative;
  margin: 0;
  padding: 62px 24px 54px;
  background:
    radial-gradient(circle at 50% -18%, rgba(253, 29, 29, 0.34), transparent 42%),
    radial-gradient(circle at 18% 56%, rgba(187, 0, 240, 0.13), transparent 34%),
    radial-gradient(circle at 78% 48%, rgba(252, 175, 69, 0.10), transparent 34%),
    linear-gradient(135deg, #120916 0%, #180c16 48%, #10070d 100%) !important;
  color: #fff;
  text-align: left;
  overflow: hidden;
}
.footer.hoipoi-footer::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: min(760px, 78vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
}
.footer.hoipoi-footer .hoipoi-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  max-width: 720px;
  margin: 0 auto;
}
.footer.hoipoi-footer .hoipoi-footer__brand {
  display: flex;
  order: 2;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.footer.hoipoi-footer .hoipoi-footer__ranking {
  order: 1;
  width: min(100%, 760px);
  margin: 0;
  padding: 0;
  border-top: 0;
  text-align: center;
}
.footer.hoipoi-footer .hoipoi-footer__ranking h4 {
  margin: 0 0 24px;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.footer.hoipoi-footer .hoipoi-footer__ranking ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer.hoipoi-footer .hoipoi-footer__ranking a {
  color: rgba(255, 255, 255, 0.90) !important;
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
}
.footer.hoipoi-footer .hoipoi-footer__ranking a:hover {
  color: #fff !important;
  text-decoration: underline;
}
.footer.hoipoi-footer .hoipoi-footer__logo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 156px;
  transition: opacity .2s ease;
}
.footer.hoipoi-footer .hoipoi-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.footer.hoipoi-footer .hoipoi-footer__contact {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 156px;
  min-height: 44px;
  padding: 0 28px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff !important;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
}
.footer.hoipoi-footer .copyright {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 1.15rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 1024px) {
  .footer.hoipoi-footer .hoipoi-footer__inner {
    gap: 34px;
  }
  .footer.hoipoi-footer .hoipoi-footer__brand,
  .footer.hoipoi-footer .hoipoi-footer__ranking {
    width: min(100%, 560px);
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .footer.hoipoi-footer .hoipoi-footer__ranking ul {
    display: grid;
    justify-items: center;
    gap: 10px;
  }
}
@media screen and (max-width: 767px) {
  .footer.hoipoi-footer {
    padding: 42px 18px 34px;
  }
  .footer.hoipoi-footer .hoipoi-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
  }
  .footer.hoipoi-footer .hoipoi-footer__logo {
    width: 132px;
    align-self: center;
    justify-content: center;
  }
  .footer.hoipoi-footer .hoipoi-footer__brand {
    min-height: 0;
    align-items: center;
    text-align: center;
  }
  .footer.hoipoi-footer .hoipoi-footer__ranking {
    width: min(100%, 280px);
    text-align: center;
  }
  .footer.hoipoi-footer .hoipoi-footer__ranking h4 {
    margin-bottom: 26px;
    font-size: 1.55rem;
  }
  .footer.hoipoi-footer .hoipoi-footer__ranking ul {
    gap: 8px;
  }
  .footer.hoipoi-footer .hoipoi-footer__ranking a {
    font-size: 1.24rem;
  }
  .footer.hoipoi-footer .hoipoi-footer__contact {
    min-width: 138px;
    min-height: 40px;
    font-size: 1.15rem;
  }
  .footer.hoipoi-footer .copyright {
    align-self: center;
    margin-top: 18px;
    font-size: 1rem;
  }
}

.contact_section form .hoipoi-contact-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  width: 280px;
  height: 63px;
  padding: 0 !important;
  border: 0;
  border-radius: 40px;
  appearance: none;
  -webkit-appearance: none;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1 !important;
  color: #fff;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap;
  background: linear-gradient(105deg, #bb00f0 -5%, #fd1d1d 15%, #fd1d1d 50%, #fcaf45 115%);
  box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.contact_section form label input,
.contact_section form label textarea,
.contact_section form label select {
  background-color: #f2f2f2;
}

.contact_section form .required {
  color: #fd1d1d;
  margin-left: 0.2em;
}

.contact_section form .hoipoi-contact-submit:hover {
  opacity: .7;
}

@media screen and (max-width: 880px) {
  .case_study .contents {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 0 !important;
  }
  .case_study .contents > a {
    width: min(100%, 360px) !important;
    max-width: calc(100vw - 40px);
    margin: 0 auto !important;
  }
  .case_study .contents > a + a {
    margin-top: 0 !important;
  }
  .case_study .contents article {
    width: 100%;
    min-height: 0;
  }
  .case_study .contents article .image {
    width: 100%;
    height: 170px;
    aspect-ratio: auto;
  }
  .case_study .contents article .text {
    width: 100%;
    min-height: 0;
    padding: 22px 20px 76px;
  }
  .case_study .contents article .text h3 {
    overflow-wrap: break-word;
    word-break: normal;
  }
  .case_study .contents article .more {
    width: 100%;
  }
}