/**
 * Service page
 */

.page--service {
  overflow-x: clip;
}

/* Intro — title sits below fixed header KV logo (same inset as header) */
.service-intro {
  padding: calc(40px + 86px + clamp(1rem, 2.5vw, 1.5rem)) var(--space-md)
    clamp(2.5rem, 6vw, 6rem);
}

.service-intro__inner {
  display: flex;
  flex-direction: column;
}

.service-intro__diagram {
  position: relative;
  width: min(100%, 700px);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}

.service-intro__diagram-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  animation: ichigo-service-diagram-spin 180s linear infinite;
}

@keyframes ichigo-service-diagram-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

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

.service-intro__diagram-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.js .service-intro__diagram-label {
  opacity: 0;
  animation: ichigo-kv-fade-in 1.15s var(--motion-ease-in-out) 0.65s both;
}

@media (prefers-reduced-motion: reduce) {
  .js .service-intro__diagram-label {
    animation: none;
    opacity: 1;
  }
}

.service-intro__diagram-commitment {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-heading);
  font-size: clamp(28px, 4.8vw, 50px);
  line-height: 1.44;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.service-intro__diagram-tagline {
  margin: 0.35em 0 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-heading);
  font-size: clamp(18px, 2.8vw, 30px);
  line-height: 1.47;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

/* Philosophy */
.service-philosophy {
  padding: 0 var(--space-md) clamp(4rem, 13vw, 10rem);
}

.service-philosophy__inner {
  max-width: var(--container-width);
  margin-inline: auto;
}

.service-philosophy__catch {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-heading);
  font-size: var(--text-section-size);
  line-height: var(--text-section-lh);
  letter-spacing: var(--tracking-heading);
  text-align: center;
}

.service-philosophy__catch-line {
  display: block;
}

.service-philosophy__body {
  display: flex;
  flex-direction: column;
  gap: 3.5em;
  max-width: 882px;
  margin: clamp(2.5rem, 6vw, 5rem) auto 0;
  text-align: center;
}

.service-philosophy__group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-philosophy__paragraph {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-heading);
  font-size: var(--page-body-size);
  line-height: var(--page-body-lh);
  letter-spacing: var(--tracking-body);
  color: var(--color-text);
}

/* Features */
.service-feature {
  padding-block: 0 0;
  overflow-x: clip;
  --service-feature-visual-width: 490px;
  --motion-duration-photo: 0.65s;
  --motion-delay-photo: 0s;
  --motion-duration-layer: 0.52s;
  --motion-delay-layer-back: 0.28s;
  --motion-duration-layer-mid: 0.46s;
  --motion-delay-layer-mid: 0.38s;
  --motion-ease-stack: var(--motion-ease-out);
  --motion-ease-slide: var(--motion-ease-out);
  --motion-slide-offset: 4%;
}

.service-feature__inner {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
}

.service-feature__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-feature__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-block: clamp(1.5rem, 3.5vw, 3rem);
  --service-feature-column-gap: clamp(2.5rem, 5vw, 4.5rem);
  --service-feature-body-edge-gap: clamp(2rem, 4vw, 4rem);
}

.service-feature__item:first-child {
  padding-top: 0;
}

.service-feature__highlight-slot {
  list-style: none;
  padding: 0;
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
}

.service-feature__visual {
  width: var(--service-feature-visual-width);
  margin-inline: auto;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.service-feature__frame {
  width: 100%;
}

.service-feature__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding-top: 1rem;
  padding-inline: var(--space-md);
  overflow: visible;
  text-align: left;
}

.service-feature__name {
  align-self: stretch;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-heading);
  font-size: clamp(28px, 4.8vw, 45px);
  line-height: 1.44;
  letter-spacing: 0.06em;
  text-align: center;
}

.service-feature__name-line {
  display: block;
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  height: 1px;
  margin: clamp(0.5rem, 1.5vw, 0.875em) 0 clamp(0.75rem, 1.5vw, 0.875em);
  border: none;
  background-color: #c98726;
  transform: scaleY(0.5);
  transform-origin: left center;
  pointer-events: none;
}

.service-feature__text {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-heading);
  font-size: var(--page-body-size);
  line-height: var(--page-body-lh);
  letter-spacing: var(--tracking-body);
  color: var(--color-text);
}

.service-feature__text + .service-feature__text {
  margin-top: 0.5em;
}

/* Feature — photo slide + watercolor extend (front-step 準拠) */
.js .service-feature__frame:not(.is-layer-visible) .framed-image__layer {
  opacity: 0;
}

.js
  .service-feature__frame.framed-image--peek-right:not(.is-layer-visible)
  .framed-image__layer {
  transform: translate(-2%, -1%) scale(0.96);
}

.js
  .service-feature__frame.framed-image--peek-left:not(.is-layer-visible)
  .framed-image__layer {
  transform: translate(2%, -1%) scale(0.96);
}

.js
  .service-feature__frame.framed-image--peek-right:not(.is-layer-visible)
  .framed-image__photo {
  opacity: 0;
  transform: translateX(calc(-1 * var(--motion-slide-offset)));
}

.js
  .service-feature__frame.framed-image--peek-left:not(.is-layer-visible)
  .framed-image__photo {
  opacity: 0;
  transform: translateX(var(--motion-slide-offset));
}

.js
  .service-feature__frame.framed-image--peek-right.is-layer-visible
  .framed-image__photo {
  animation: ichigo-step-photo-slide-left var(--motion-duration-photo)
    var(--motion-ease-slide) var(--motion-delay-photo) both;
}

.js
  .service-feature__frame.framed-image--peek-left.is-layer-visible
  .framed-image__photo {
  animation: ichigo-step-photo-slide-right var(--motion-duration-photo)
    var(--motion-ease-slide) var(--motion-delay-photo) both;
}

.js .service-feature__frame.is-layer-visible .framed-image__layer--back {
  animation: ichigo-step-layer-extend var(--motion-duration-layer)
    var(--motion-ease-stack) var(--motion-delay-layer-back) both;
}

.js .service-feature__frame.is-layer-visible .framed-image__layer--mid {
  animation: ichigo-step-layer-extend-mid var(--motion-duration-layer-mid)
    var(--motion-ease-stack) var(--motion-delay-layer-mid) both;
}

.js
  .service-feature__frame.framed-image--peek-right.is-layer-visible
  .framed-image__layer--back {
  --layer-stack-x: 8%;
  --layer-stack-y: -10%;
  --layer-stack-opacity: var(--framed-image-layer-back-opacity);
  --layer-start-x: -2%;
  --layer-start-y: -1%;
}

.js
  .service-feature__frame.framed-image--peek-right.is-layer-visible
  .framed-image__layer--mid {
  --layer-stack-x: 4%;
  --layer-stack-y: -5%;
  --layer-stack-opacity: var(--framed-image-layer-mid-opacity);
  --layer-start-x: -1%;
  --layer-start-y: -0.5%;
}

.js
  .service-feature__frame.framed-image--peek-left.is-layer-visible
  .framed-image__layer--back {
  --layer-stack-x: -8%;
  --layer-stack-y: -10%;
  --layer-stack-opacity: var(--framed-image-layer-back-opacity);
  --layer-start-x: 2%;
  --layer-start-y: -1%;
}

.js
  .service-feature__frame.framed-image--peek-left.is-layer-visible
  .framed-image__layer--mid {
  --layer-stack-x: -4%;
  --layer-stack-y: -5%;
  --layer-stack-opacity: var(--framed-image-layer-mid-opacity);
  --layer-start-x: 1%;
  --layer-start-y: -0.5%;
}

@keyframes ichigo-step-photo-slide-left {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--motion-slide-offset, 4%)));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ichigo-step-photo-slide-right {
  from {
    opacity: 0;
    transform: translateX(var(--motion-slide-offset, 4%));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ichigo-step-layer-extend {
  0% {
    opacity: 0;
    transform: translate(var(--layer-start-x, 0), var(--layer-start-y, 0))
      scale(0.96);
  }

  100% {
    opacity: var(
      --layer-stack-opacity,
      var(--framed-image-layer-back-opacity, 0.58)
    );
    transform: translate(var(--layer-stack-x, -8%), var(--layer-stack-y, -10%))
      scale(1);
  }
}

@keyframes ichigo-step-layer-extend-mid {
  0% {
    opacity: 0;
    transform: translate(var(--layer-start-x, 0), var(--layer-start-y, 0))
      scale(0.97);
  }

  100% {
    opacity: var(
      --layer-stack-opacity,
      var(--framed-image-layer-mid-opacity, 0.68)
    );
    transform: translate(var(--layer-stack-x, -4%), var(--layer-stack-y, -5%))
      scale(1);
  }
}

@media (min-width: 961px) {
  .service-feature__item {
    flex-direction: row;
    align-items: flex-start;
    column-gap: var(--service-feature-column-gap);
  }

  /* body ? visual ? DOM ??row-reverse ?????????? */
  .service-feature__item--image-left {
    flex-direction: row-reverse;
  }

  .service-feature__visual {
    flex: 0 0 var(--service-feature-visual-width);
    width: var(--service-feature-visual-width);
    margin-top: 0;
    margin-inline: 0;
  }

  .service-feature__body {
    flex: 1 1 auto;
    min-width: 0;
  }

  .service-feature__item--image-right .service-feature__body {
    padding-left: var(--service-feature-body-edge-gap);
    padding-right: 0;
  }

  .service-feature__item--image-left .service-feature__body {
    padding-right: var(--service-feature-body-edge-gap);
    padding-left: 0;
  }

  /* 名前行 — body 内側 padding なし分、visual 側へ column-gap だけ伸ばす */
  .service-feature__item--image-right .service-feature__name-line {
    width: calc(100% + var(--service-feature-column-gap));
  }

  .service-feature__item--image-left .service-feature__name-line {
    width: calc(100% + var(--service-feature-column-gap));
    margin-left: calc(-1 * var(--service-feature-column-gap));
    transform-origin: right center;
  }
}

@media (max-width: 960px) {
  .page--service {
    --service-sp-inline: 1rem;
  }

  .service-intro {
    padding: calc(16px + 71px + 1rem) var(--service-sp-inline)
      clamp(2rem, 6vw, 3rem);
  }

  .service-philosophy {
    padding: 0 var(--service-sp-inline) clamp(4rem, 10vw, 7rem);
  }

  .service-intro__diagram-label {
    transform: scale(0.92);
  }

  .service-intro__diagram-commitment {
    font-size: clamp(25px, 4.8vw, 50px);
  }

  .service-intro__diagram-tagline {
    font-size: clamp(16px, 2.8vw, 30px);
  }

  .service-philosophy__catch {
    font-size: clamp(17px, 5.2vw, 32px);
    line-height: var(--page-heading-sp-lh);
    letter-spacing: 0.08em;
  }

  .service-philosophy__catch-line {
    display: block;
    max-width: 100%;
  }

  /* 1行目は「〜おせっかい」で、を1塊に（2行目は別ブロック） */
  .service-philosophy__catch-line:first-child {
    white-space: nowrap;
  }

  @media (max-width: 374px) {
    .service-philosophy__catch {
      font-size: clamp(15px, 4.5vw, 17px);
      letter-spacing: 0.06em;
    }
  }

  .service-philosophy__body {
    gap: 1.3em;
    margin-top: clamp(2rem, 7vw, 3rem);
  }

  .service-philosophy__paragraph {
    font-size: 14px;
    line-height: 2.1;
  }

  .service-feature__body {
    padding-inline: var(--space-md);
    padding-top: clamp(1.75rem, 5vw, 2.5rem);
  }

  .service-feature__highlight-slot {
    padding-inline: var(--service-sp-inline);
    box-sizing: border-box;
  }

  .service-feature__visual {
    order: -1;
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding: clamp(0.75rem, 2.5vw, 1.25rem) 0 0;
    box-sizing: border-box;
  }

  .service-feature__frame {
    width: 86%;
    max-width: 100%;
    margin: 0;
  }

  .service-feature__item--image-left .service-feature__frame {
    margin-right: auto;
    margin-left: 0;
  }

  .service-feature__item--image-right .service-feature__frame {
    margin-left: auto;
    margin-right: 0;
  }

  .service-feature__frame.framed-image--peek-right .framed-image__layer--back {
    transform: translate(9%, -9%);
  }

  .service-feature__frame.framed-image--peek-right .framed-image__layer--mid {
    transform: translate(4.5%, -4.5%);
  }

  .service-feature__frame.framed-image--peek-left .framed-image__layer--back {
    transform: translate(-9%, -9%);
  }

  .service-feature__frame.framed-image--peek-left .framed-image__layer--mid {
    transform: translate(-4.5%, -4.5%);
  }

  .js
    .service-feature__frame.framed-image--peek-right.is-layer-visible
    .framed-image__layer--back {
    --layer-stack-x: 9%;
    --layer-stack-y: -9%;
  }

  .js
    .service-feature__frame.framed-image--peek-right.is-layer-visible
    .framed-image__layer--mid {
    --layer-stack-x: 4.5%;
    --layer-stack-y: -4.5%;
  }

  .js
    .service-feature__frame.framed-image--peek-left.is-layer-visible
    .framed-image__layer--back {
    --layer-stack-x: -9%;
    --layer-stack-y: -9%;
  }

  .js
    .service-feature__frame.framed-image--peek-left.is-layer-visible
    .framed-image__layer--mid {
    --layer-stack-x: -4.5%;
    --layer-stack-y: -4.5%;
  }

  .service-feature__name {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: var(--page-heading-sp-size);
    line-height: var(--page-heading-sp-lh);
    letter-spacing: var(--tracking-heading);
  }

  .service-feature__text {
    font-size: 14px;
    line-height: 2.1;
  }
}