/* ==========================================================================
   Base
   ========================================================================== */
:root {
  --color-bg: #fdfbef;
  --color-bg-deep: #f1ead4;
  --color-text: #4d4d4d;
  --color-text-soft: #8a8a7c;
  --color-teal: #108f88;
  --color-orange: #e89049;
  --color-next-bg: #ffffff;

  --font-en: "Poppins", sans-serif;
  --font-jp: "Zen Kaku Gothic New", sans-serif;
  --font-walk: "ab-walk", sans-serif;

  --header-h: 150px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-next-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
}

.fv {
  position: relative;
  background: var(--color-bg);
  padding-top: var(--header-h);
  padding-bottom: 90px;
  padding-inline: clamp(24px, 5vw, 100px);
  overflow: hidden;
}

.fv-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-bg);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  padding: 28px 24px 20px;
}

.fv-logo {
  width: clamp(77px, 8.64vw, 106px); /* 元のサイズ(128〜176px)の60% */
}
.fv-logo img {
  width: 100%;
  height: auto;
}
.fv-logo a {
  display: block;
}

.fv-nav ul {
  display: flex;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
  justify-content: center;
}

.fv-nav a {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--color-teal);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

.fv-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--color-teal);
  transition: width 0.3s ease;
}

.fv-nav a:hover {
  color: var(--color-teal);
}
.fv-nav a:hover::after {
  width: 100%;
}

.fv-menu-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.fv-menu-btn__icon {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.fv-menu-btn__label {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.fv-body {
  position: relative;
  max-width: 1136px;
  width: 100%;
  margin: 0 auto;

  padding-top: 43px;
  padding-bottom: 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 70px;

  container-type: inline-size;
}

.fv-copy {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(26px, 2.8cqw, 32px);
  line-height: 1.65;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.fv-copy .line {
  display: block;
}

.fv-illust-area {
  position: relative;
  flex: 0 0 auto;

  --person-w: clamp(210px, 26cqw, 295px);

  overflow: visible;
}

.fv-illust-group {
  position: relative;
  width: calc(var(--person-w) * 2.04);
  height: calc(var(--person-w) / 0.8073 * 1.3);
}

.fv-person-wrap {
  position: absolute;
  left: calc(var(--person-w) * 0.58);
  top: calc(var(--person-w) / 0.8073 * 0.3);
  width: var(--person-w);

  overflow: visible;
}

.fv-person {
  display: block;
  width: 100%;
  height: auto;
}

.balloon-field {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.balloon {
  position: absolute;
  will-change: transform;
}

.balloon img {
  display: block;
  width: 100%;
  height: auto;
}

.balloon[data-balloon="natural"] {
  top: 19%;
  left: -58%;
  width: 47%;
}

.balloon[data-balloon="warm"] {
  top: -1%;
  left: -18%;
  width: 42%;
}

.balloon[data-balloon="thoughtful"] {
  top: -30%;
  left: 38%;
  width: 43%;
}

.balloon[data-balloon="tender"] {
  top: -4%;
  left: 96%;
  width: 45%;
}

.balloon[data-balloon="storytelling"] {
  top: 26%;
  left: 103%;
  width: 43%;
}

.scroll-indicator {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(10px, 3vw, 30px);
  margin-bottom: 60px;
}

.scroll-text {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--color-text);
}

.scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: 60px;
}

.scroll-line-bg {
  position: absolute;
  inset: 0;
  width: 2px;
  background: #e89049;
}

.scroll-line-fg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--color-text);
  transform: scaleY(0);
  transform-origin: top;
  animation: scrollFlow 2.2s infinite;
}

@keyframes scrollFlow {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

.wave-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 90px;
  z-index: 1;
}
.wave-divider path {
  fill: var(--color-next-bg);
}
.wave-divider--sp {
  display: none;
}

@media (max-width: 600px) {
  .wave-divider--pc {
    display: none;
  }
  .wave-divider--sp {
    display: block;
  }
}

.about {
  position: relative;
  background: var(--color-next-bg);
  padding-top: 120px;
  padding-bottom: 80px;
  container-type: inline-size;
}

.about__inner {
  position: relative;
  z-index: 2;
  max-width: 1536px;
  margin: 0 auto;
  padding-inline: clamp(24px, 6.51cqw, 100px);
}

.about__top {
  position: relative;
  min-height: 40px;
}

.about__eyebrow-group {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
}

.about__line {
  display: block;
  width: 160px;
  height: 1px;
  background: var(--color-text);
  flex: 0 0 auto;
}

.about__eyebrow {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  flex: 0 0 auto;
  white-space: nowrap;
}

.about__heading {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: var(--color-teal);
}

.about__lead {
  margin-top: 100px;
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
}

.about__text {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 30.4px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.about__text + .about__text {
  margin-top: 30px;
}

.about__viewmore-wrap {
  position: relative;
  width: fit-content;
  margin: 80px auto 0;
}

.about__viewmore {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16.4px;
  width: fit-content;
  text-decoration: none;
}

.about__viewmore-circle {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 1px solid var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.yazirusi {
  position: relative;
  width: 31.5px;
}
.line01 {
  display: block;
  height: 1px;
  background-color: currentColor;
}
.line02 {
  position: absolute;
  top: 0;
  right: 0;
  width: 6.3px;
  height: 1px;
  background-color: currentColor;
  transform-origin: right bottom;
  transform: rotate(45deg);
}

.about__viewmore-arrow {
  width: 31.5px;
  height: 7px;
  display: block;
}

.about__viewmore-label {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--color-teal);
  transition: color 0.3s ease;
}

.about__viewmore:hover .about__viewmore-circle {
  background-color: var(--color-teal);
  color: #ffffff;
}

.about__circles {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.about__circle {
  position: absolute;
  max-width: none;
  opacity: 0;
  transform: scale(0.6);
  transform-origin: center;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.about__circle.is-visible {
  opacity: 0.8;
  transform: scale(1);
}

.about__circle--1 {
  width: min(60px, 3.906cqw);
  top: max(-10px, -0.653cqw);
  left: min(715px, 46.539cqw);
}
.about__circle--2 {
  width: min(90px, 5.859cqw);
  top: min(78px, 5.075cqw);
  left: min(593px, 38.593cqw);
}
.about__circle--3 {
  width: min(150px, 9.766cqw);
  top: min(168px, 10.933cqw);
  left: min(394px, 25.635cqw);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1350px) {
  .about__top {
    min-height: 0;
    max-width: 720px;
    margin-inline: auto;
  }
  .about__eyebrow-group {
    position: static;
    transform: none;
    margin-bottom: 16px;
  }
  .about__heading {
    text-align: left;
  }
}

.works {
  position: relative;
  padding-top: 102px;
  padding-bottom: 160px;
  container-type: inline-size;
  overflow: hidden;
}

.works::before {
  content: "";
  position: absolute;
  top: -46px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  z-index: 0;
}

.works__inner {
  position: relative;
  z-index: 2;
  max-width: 1536px;
  margin: 0 auto;
  padding-inline: clamp(24px, 6.51cqw, 100px);
}

.works__eyebrow-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.works__line {
  display: block;
  width: 160px;
  height: 1px;
  background: var(--color-text);
  flex: 0 0 auto;
}

.works__eyebrow {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  flex: 0 0 auto;
  white-space: nowrap;
}

.works__heading {
  margin-top: 16px;
  padding-left: calc(160px + 20px);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #493c33;
}

.works__marquee {
  margin-top: 60px;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

.works__track {
  display: flex;
  align-items: flex-start;
  gap: 70px;
  width: max-content;
  animation: worksScroll 48s linear infinite;
}

.works__card {
  flex: 0 0 auto;
  width: 450px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.works__image {
  width: 450px;
  height: 383px;
  border-radius: 30px;
  object-fit: cover;
  display: block;
}

.works__tag {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 83px;
  height: 22px;
  border-radius: 11px;
  background: var(--color-orange);
  color: #ffffff;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.works__title {
  margin-top: 20px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--color-text);
  min-height: 3em;
}

.works__role {
  margin-top: 18px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #b2b1b1;
}

@keyframes worksScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-8 * (450px + 70px)));
  }
}

.works__viewmore-wrap {
  position: relative;
  width: fit-content;
  margin: 80px auto 0;
}
.works__viewmore .about__viewmore-label {
  font-family: var(--font-jp);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .works__track {
    animation: none;
  }
}

.works__swipe-hint {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 32px;
  border-radius: 20px;
  background: rgba(77, 77, 77, 0.8);
  color: #ffffff;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
  z-index: 3;
}
.works__swipe-hint.is-hidden {
  opacity: 0;
}
.works__swipe-hint-arrows {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #ffffff;
  opacity: 0.75;
}
.works__swipe-hint-arrows svg {
  display: block;
  width: 14px;
  height: 12px;
}
.works__swipe-hint-icon {
  display: block;
  width: 63px;
  height: 63px;
  animation: worksSwipeHintTap 1.4s ease-in-out infinite;
}
.works__swipe-hint-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.works__swipe-hint-label {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.05em;
}
@keyframes worksSwipeHintTap {
  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(8px);
    opacity: 0.7;
  }
}

@media (max-width: 900px) {
  .fv-body {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 20px;
    gap: 0;
  }

  .fv-copy {
    white-space: normal;
  }

  .fv-illust-area {
    margin-top: 40px;
    --person-w: clamp(220px, 55cqw, 280px);
  }
}

@media (max-width: 600px) {
  .fv-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 24px 24px;
  }

  .fv-logo {
    width: 84px; /* 元の140pxの60% */
  }

  .fv-nav {
    display: none;
  }

  .fv-menu-btn {
    display: flex;
  }

  .fv-body {
    max-width: 657.4px;
    padding-top: 40px;
    padding-bottom: 0;
    text-align: left;
    align-items: center;
  }

  .fv-copy {
    font-size: 22px;
    line-height: 35px;
    letter-spacing: 0.1em;
    text-align: left;
  }

  .fv-illust-area {
    align-self: center;
    margin-top: 40px;
    --person-w: min(58cqw, 230px);
  }

  .balloon-field {
    transform: scale(0.9);
    transform-origin: center;
  }

  .scroll-indicator {
    margin-top: 40px;
    margin-bottom: 30px;
  }
  .about__circle--1 {
    top: 46px;
    left: 216.6px;
    width: 24.9px;
  }
  .about__circle--2 {
    top: 79.5px;
    left: 163.5px;
    width: 37.17px;
  }
  .about__circle--3 {
    top: 112px;
    left: 76.5px;
    width: 62.02px;
  }
}

@media (max-width: 600px) {
  .about {
    padding-top: 48px;
  }

  .about__inner {
    padding-inline: 40px;
  }

  .about__top {
    max-width: none;
    margin-inline: 0;
  }

  .about__line {
    width: 43px;
    margin-left: -40px;
  }

  .about__eyebrow-group {
    gap: 5px;
  }

  .about__eyebrow {
    font-size: 12px;
    font-weight: 500;
  }

  .about__heading {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 34.4px;
  }

  .about__lead {
    margin-top: 40px;
  }

  .about__text {
    font-size: 15px;
    line-height: 30.4px;
    letter-spacing: 0.1em;
  }

  .about__text + .about__text {
    margin-top: 24px;
  }

  .about__viewmore-wrap {
    margin-top: 32px;
  }

  .about__viewmore {
    gap: 15px;
  }

  .about__viewmore-circle {
    width: 63px;
    height: 63px;
  }

  .yazirusi {
    width: 25px;
  }
  .line02 {
    width: 5px;
  }

  .about__viewmore-label {
    font-size: 13px;
    letter-spacing: 0.1em;
  }
  .about__circle--1 {
    top: 35px;
  }
  .about__circle--2 {
    top: 60px;
  }
  .about__circle--3 {
    top: 85px;
  }

  .works {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .works::before {
    top: 0;
  }

  .works__inner {
    padding-inline: 40px;
  }

  .works__line {
    width: 43px;
    margin-left: -40px;
  }

  .works__eyebrow-group {
    gap: 5px;
  }

  .works__eyebrow {
    font-size: 12px;
    font-weight: 500;
  }

  .works__heading {
    padding-left: calc(5px);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 34.4px;
  }

  .works__track {
    animation: none;
    gap: 24px;
    padding-inline: 40px;
    scroll-snap-type: x proximity;
  }

  .works__marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .works__marquee::-webkit-scrollbar {
    display: none;
  }

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

  .works__card {
    width: 254.27px;
    scroll-snap-align: start;
  }

  .works__image {
    width: 254.27px;
    height: 231px;
  }

  .works__tag {
    margin-top: 12px;
    width: 84.5px;
    height: 22px;
    font-size: 12px;
    letter-spacing: 0.05em;
  }

  .works__title {
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    min-height: 3em;
  }

  .works__role {
    margin-top: 7.5px;
    font-size: 12px;
    letter-spacing: 0.15em;
  }

  .works__viewmore-wrap {
    margin-top: 32px;
  }

  .works__swipe-hint {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .balloon {
    transform: none !important;
  }
  .scroll-line-fg {
    animation: none;
    transform: scaleY(1);
  }
}

.sp-menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--color-bg);

  display: flex;
  flex-direction: column;
  overflow-y: auto;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.sp-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

@media (min-width: 601px) {
  .sp-menu {
    display: none !important;
  }
}

.sp-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px;
  flex: 0 0 auto;
}

.sp-menu__logo {
  width: 140px;
}
.sp-menu__logo img {
  width: 100%;
  height: auto;
}

.sp-menu__close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.sp-menu__close-icon {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.sp-menu__close-label {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.sp-menu__nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-menu__nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sp-menu__nav li + li {
  margin-top: 36px;
}

.sp-menu__nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sp-menu__nav .en {
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: 0.1em;
  color: var(--color-teal);
}

.sp-menu__nav .jp {
  font-family: var(--font-jp);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.sp-menu__copyright {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #ffffff;
}

.sp-menu__band {
  height: 30px;
  background: var(--color-teal);
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;
}

.service {
  position: relative;
  z-index: 2;
  background: var(--color-next-bg);
  padding-top: 160px;
  padding-bottom: 160px;
  container-type: inline-size;
}

.service__inner {
  max-width: 1536px;
  margin: 0 auto;
  padding-inline: clamp(24px, 6.51cqw, 100px);
}

.service__eyebrow-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.service__line {
  display: block;
  width: 160px;
  height: 1px;
  background: var(--color-text);
  flex: 0 0 auto;
}

.service__eyebrow {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  flex: 0 0 auto;
  white-space: nowrap;
}

.service__heading {
  margin-top: 16px;
  padding-left: calc(160px + 20px);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #493c33;
}

.service__grid {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  gap: min(54px, 3.5156cqw);
}

.service__card {
  flex: 0 0 auto;
  width: min(343px, 22.331cqw);
  height: min(672px, 43.75cqw);
  padding: min(60px, 3.906cqw) min(30px, 1.953cqw);
  background: var(--color-bg);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
}
.service__card > * {
  flex-shrink: 0;
}

.service__num {
  font-family: var(--font-en);
  font-size: min(12px, 0.781cqw);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-teal);
}

.service__card-title {
  margin-top: min(20px, 1.302cqw);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(20px, 1.302cqw);
  letter-spacing: 0.1em;
  color: var(--color-teal);
  text-align: center;
}

.service__card-text {
  margin-top: min(40px, 2.604cqw);
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: min(14px, 0.911cqw);
  line-height: min(28.1px, 1.83cqw);
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.service__card-img {
  display: block;
  align-self: center;
}
.service__card-img--01 {
  margin-top: min(26px, 1.693cqw);
  width: min(200px, 13.021cqw);
  height: min(177px, 11.523cqw);
}
.service__card-img--02 {
  margin-top: min(47px, 3.06cqw);
  width: min(251px, 16.341cqw);
  height: min(134px, 8.724cqw);
}
.service__card-img--03 {
  margin-top: min(35px, 2.279cqw);
  width: min(193px, 12.565cqw);
  height: min(158px, 10.286cqw);
}

.service__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: min(82px, 5.339cqw);
  height: min(25px, 1.628cqw);
  border-radius: 999px;
  background: var(--color-teal);
  color: #ffffff;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: min(14px, 0.911cqw);
  letter-spacing: 0.1em;
}
.service__card-img--01 + .service__tag {
  margin-top: min(43px, 2.799cqw);
}
.service__card-img--02 + .service__tag {
  margin-top: min(65px, 4.232cqw);
}
.service__card-img--03 + .service__tag {
  margin-top: min(53px, 3.451cqw);
}

.service__price-desc {
  margin-top: min(25px, 1.628cqw);
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: min(14px, 0.911cqw);
  line-height: min(20px, 1.302cqw);
  letter-spacing: 0.1em;
  color: var(--color-text);
  text-align: center;
}

.service__price {
  margin-top: min(7px, 0.456cqw);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(22px, 1.432cqw);
  letter-spacing: 0.1em;
  color: var(--color-orange);
  text-align: center;
}

.service__viewmore-wrap {
  position: relative;
  width: fit-content;
  margin: 80px auto 0;
}

.service__squiggle {
  position: absolute;
  top: min(111px, 7.227cqw);
  left: min(329px, 21.419cqw);
  width: min(431px, 28.06cqw);
  height: auto;
  opacity: 0.8;
}
#squiggleMaskPath {
  stroke-dasharray: 3650;
  stroke-dashoffset: 3650;
  transition: stroke-dashoffset 3.2s ease;
}
.service__squiggle.is-visible #squiggleMaskPath {
  stroke-dashoffset: 0;
}

/* ==========================================================================
   SP（スマホ）— Serviceセクション
   ========================================================================== */
@media (max-width: 600px) {
  .service {
    padding-top: 80px;
  }

  .service__inner {
    padding-inline: 40px;
  }

  .service__line {
    width: 43px;
    margin-left: -40px;
  }

  .service__eyebrow-group {
    gap: 5px;
  }

  .service__eyebrow {
    font-size: 12px;
    font-weight: 500;
  }

  .service__heading {
    padding-left: calc(43px + 5px);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 34.4px;
  }

  .service__grid {
    margin-top: 40px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .service__card {
    width: 295px;
    height: 695px;
    padding: 50px 20px;
  }

  .service__num {
    font-size: 13px;
    font-weight: 500;
  }

  .service__card-title {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 500;
  }

  .service__card-text {
    margin-top: 50px;
    font-size: 15px;
    font-weight: 400;
    line-height: 27.5px;
  }

  .service__card-img--01 {
    margin-top: 50px;
    width: 195.5px;
    height: 172.5px;
  }
  .service__card-img--02 {
    margin-top: 50px;
    width: 242px;
    height: 129.5px;
  }
  .service__card-img--03 {
    margin-top: 50px;
    width: 205.5px;
    height: 168px;
  }

  .service__card-img--01 + .service__tag {
    margin-top: 50px;
  }
  .service__card-img--02 + .service__tag {
    margin-top: 50px;
  }
  .service__card-img--03 + .service__tag {
    margin-top: 53px;
  }

  .service__tag {
    width: 84.5px;
    height: 26px;
    font-size: 15px;
    font-weight: 400;
  }

  .service__price-desc {
    margin-top: 20px;
    font-size: 15px;
    font-weight: 400;
  }

  .service__price {
    margin-top: 12px;
    font-size: 19px;
    font-weight: 500;
  }

  .service__viewmore-wrap {
    margin-top: 32px;
  }

  .service__squiggle {
    width: 150px;
    top: 85px;
  }
}

/* ==========================================================================
   Profile section
   ========================================================================== */
.profile {
  position: relative;
  background: var(--color-next-bg);
  padding-top: 44.9px;
  padding-bottom: 0;
  container-type: inline-size;
}

.profile__inner {
  max-width: 1536px;
  margin: 0 auto;
  padding-inline: clamp(24px, 6.51cqw, 100px);
}

.profile__eyebrow-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile__line {
  display: block;
  width: 160px;
  height: 1px;
  background: var(--color-text);
  flex: 0 0 auto;
}

.profile__eyebrow {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  flex: 0 0 auto;
  white-space: nowrap;
}

.profile__heading {
  margin-top: 16px;
  padding-left: calc(160px + 20px);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #493c33;
}

.profile__content {
  margin-top: 60px;
  display: flex;
  align-items: flex-start;
  gap: 100px;
}

.profile__photo {
  flex: 0 0 auto;
  width: 300.29px;
  height: 304px;
  border-radius: 50%;
  object-fit: cover;
}

.profile__text {
  flex: 1 1 auto;
  padding-top: 8px;
}

.profile__name-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.profile__name {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.profile__name-kana {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.profile__desc {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}
.profile__desc:first-of-type {
  margin-top: 50px;
}
.profile__desc + .profile__desc {
  margin-top: 30px;
}

@media (max-width: 900px) {
  .profile__content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .profile__name-row {
    justify-content: center;
  }
}

/* ==========================================================================
   Contact / Footer section
   ========================================================================== */
.contact {
  position: relative;
  background: var(--color-next-bg);
  overflow: hidden;
  padding-bottom: 28px;
}

.contact__arc-text {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  height: 28vw;
  top: 24.21vw;
  overflow: visible;
  pointer-events: none;
}
.contact__arc-text-label {
  font-family: var(--font-walk, var(--font-en));
  font-size: 39.6px;
  letter-spacing: 0.15em;
  fill: #b2b1b1;
}

.contact__person {
  position: relative;
  z-index: 2;
  display: block;
  margin: 14.323vw auto 0;
  width: 16.714vw;
  aspect-ratio: 256.72 / 306.35;
}

.contact__bg-fill {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 51.37vw;
  bottom: 0;
  background: var(--color-bg);
}

.contact__arc-wrap {
  position: absolute;
  z-index: 3;
  left: 0;
  width: 100%;
  height: 28vw;
  top: 24.21vw;
  pointer-events: none;
  overflow: hidden;
}

.contact__arc-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.contact__inner {
  position: relative;
  z-index: 4;
  max-width: 1536px;
  margin: 50px auto 0;
  padding-inline: clamp(24px, 6.51cqw, 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact__eyebrow {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-teal);
}

.contact__heading {
  margin-top: 25px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: var(--color-teal);
}

.contact__text {
  margin-top: 60px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 28px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.contact__button {
  position: relative;
  margin-top: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px 72px;
  text-decoration: none;
}
.contact__button-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: contactButtonLoop 8s linear infinite;
}
@keyframes contactButtonLoop {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -360;
  }
}
.contact__button-label {
  position: relative;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.1em;
  color: var(--color-orange);
}

.contact__bottom {
  position: relative;
  margin-top: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: clamp(24px, 6.51cqw, 100px);
  max-width: 1536px;
  margin-inline: auto;
}

.contact__privacy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-jp);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.contact__copyright {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: #0f8f88;
}

.contact__sp-nav {
  display: none;
  position: relative;
  z-index: 1;
}
.contact__sp-band {
  display: none;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   SP（スマホ）— Profileセクション
   ========================================================================== */
@media (max-width: 600px) {
  .profile {
    padding-top: 40px;
  }

  .profile__inner {
    padding-inline: 40px;
  }

  .profile__line {
    width: 43px;
    margin-left: -40px;
  }

  .profile__eyebrow-group {
    gap: 5px;
  }

  .profile__eyebrow {
    font-size: 12px;
    font-weight: 500;
  }

  .profile__heading {
    padding-left: calc(43px + 5px);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 34.4px;
  }

  .profile__content {
    margin-top: 40px;
    gap: 24px;
  }

  .profile__text {
    padding-top: 0;
  }

  .profile__photo {
    width: 192.125px;
    height: 194.5px;
  }

  .profile__name-row {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .profile__name {
    font-size: 20px;
    font-weight: 500;
  }

  .profile__name-kana {
    font-size: 15px;
    font-weight: 500;
  }

  .profile__desc {
    text-align: left;
    font-size: 15px;
    font-weight: 400;
  }
  .profile__desc:first-of-type {
    margin-top: 32px;
  }
  .profile__desc + .profile__desc {
    margin-top: 30px;
  }
}

/* ==========================================================================
   SP（スマホ）— Contact / Footerセクション
   ========================================================================== */
@media (max-width: 600px) {
  .contact__person {
    margin-top: 102.5px;
    width: 100px;
    aspect-ratio: 100 / 119.5;
  }

  .contact__arc-wrap {
    top: 190px; /* 178pxから引き下げ、隙間を詰める */
  }

  .contact__arc-text {
    top: 230px; /* arc-wrapの調整に合わせて12px引き下げ */
  }

  .contact__inner {
    margin-top: 67.5px;
    padding-inline: 40px;
  }

  .contact__bg-fill {
    top: 284px;
  }

  .contact__eyebrow {
    font-size: 12px;
    font-weight: 400;
  }

  .contact__heading {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 500;
  }

  .contact__text {
    margin-top: 44px;
    font-size: 15px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
  }

  .contact__button {
    margin-top: 32px;
    padding: 20px 34px;
  }

  .contact__button-label {
    font-size: 16px;
    font-weight: 500;
  }

  .contact {
    padding-bottom: 0;
  }

  .contact__arc-text-label {
    font-size: 26px;
  }

  .contact__sp-nav {
    display: block;
    margin-top: 68px;
    padding: 40px 40px 0;
    background: var(--color-next-bg);
  }
  .contact__sp-nav-row {
    display: flex;
    justify-content: center;
    gap: 30px;
  }
  .contact__sp-nav-row + .contact__sp-nav-row {
    margin-top: 24px;
  }
  .contact__sp-nav a {
    font-family: var(--font-en);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--color-teal);
  }

  .contact__bottom {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: 47px;
    padding-bottom: 47px;
    background: var(--color-next-bg);
    justify-content: center;
  }
  .contact__bottom .contact__copyright {
    display: none;
  }

  .contact__sp-band {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    background: var(--color-teal);
  }
  .contact__sp-copyright {
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    color: #ffffff;
  }
}
/* ==========================================================================
   カスタムカーソル
   ========================================================================== */
body.has-custom-cursor,
body.has-custom-cursor * {
  cursor: none;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--color-teal);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease,
    border-color 0.25s ease;
  will-change: transform;
}

.custom-cursor.is-hover {
  width: 57.6px;
  height: 57.6px;
  background: rgba(16, 143, 136, 0.15);
  border-color: transparent;
}

@media (max-width: 900px) {
  .custom-cursor {
    display: none !important;
  }
}

/* ==========================================================================
   ローディング画面（ページ読み込み中に表示。読み込み完了でフェードアウト）
   ========================================================================== */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--color-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}
.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.page-loader__logo {
  width: 120px;
  height: auto;
  animation: pageLoaderPulse 1.6s ease-in-out infinite;
}

@keyframes pageLoaderPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.page-loader__dots {
  display: flex;
  gap: 10px;
}
.page-loader__dots span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-teal);
  animation: pageLoaderDot 1.2s ease-in-out infinite;
}
.page-loader__dots span:nth-child(2) {
  animation-delay: 0.15s;
  background: var(--color-orange);
}
.page-loader__dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes pageLoaderDot {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  40% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader__logo,
  .page-loader__dots span {
    animation: none;
  }
}