/* ---------- ページ全体の背景アニメーション ---------- */

body {
  isolation: isolate;
  background: #fff;
}

body.utk-home-page,
body.utk-faq-body,
body.post-type-archive-utakuru_news,
body.tax-news_category,
body.single-utakuru_news {
  background: rgb(232 248 253 / 68%);
}

.utk-background-motion {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  user-select: none;
}

body > main {
  position: relative;
  z-index: 1;
}

.utk-hero__copy {
  width: min(calc(100vw - 64px), 1280px);
  margin-inline: auto;
  padding: clamp(48px, 5vw, 72px) clamp(40px, 6vw, 88px);
  text-align: center;
  background: #fff;
  backdrop-filter: none;
}

.utk-hero__inner {
  width: min(calc(100% - 32px), 1600px);
}

.utk-hero__wordmark-main {
  width: auto;
  max-width: 100%;
  justify-content: center;
  gap: .12em;
  font-size: clamp(3.4rem, 5.4vw, 5rem);
}

.utk-hero__wordmark-sub {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
}

.utk-hero__eyebrow {
  display: block;
  width: fit-content;
  margin: 0 auto 20px;
  padding-inline: .25em;
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  font-weight: 900;
  letter-spacing: .08em;
  perspective: 700px;
}

.utk-hero__eyebrow-character {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 8px, -520px) scale(.18);
  transform-origin: center;
}

.utk-hero__eyebrow.is-popping .utk-hero__eyebrow-character {
  animation: utk-eyebrow-pop-forward 920ms cubic-bezier(.18, .86, .22, 1.28) both;
  animation-delay: calc(var(--utk-pop-index) * 58ms);
}

.utk-hero__eyebrow.is-pop-complete .utk-hero__eyebrow-character {
  opacity: 1;
  transform: none;
}

@keyframes utk-eyebrow-pop-forward {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, -520px) scale(.18);
  }

  48% {
    opacity: 1;
    transform: translate3d(0, -5px, 90px) scale(1.42, .82);
  }

  68% {
    transform: translate3d(0, 2px, -18px) scale(.9, 1.12);
  }

  82% {
    transform: translate3d(0, -1px, 12px) scale(1.06, .96);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.utk-hero__title {
  font-size: clamp(3.8rem, 7.4vw, 7.35rem);
  font-feature-settings: "palt" 0;
  font-kerning: none;
  letter-spacing: .055em;
}

.utk-hero__message {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}

/* SKSキャラクターは白いタイトルパネルより前へ表示します。 */
.utk-hero__jumper {
  z-index: 5;
  right: auto;
  bottom: 96px;
  left: calc(50% + min(34vw, 430px));
  width: clamp(210px, 20vw, 300px);
  translate: -50% 0;
}

.utk-hero__jumper img {
  filter: none;
}

.utk-hero__jumper:hover img,
.utk-hero__jumper:focus-visible img {
  filter: none;
}

/* ヒーロー内に留まりながら、ゆっくり浮かぶ手描きの背景装飾です。 */
.utk-hero__decorations {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.utk-hero-decoration {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: .84;
  will-change: transform;
}

.utk-hero-decoration__image {
  display: block;
  width: 100%;
  height: auto;
}

.utk-hero-decoration--cloud-one {
  width: clamp(220px, 24vw, 360px);
}

.utk-hero-decoration--cloud-two {
  width: clamp(200px, 22vw, 330px);
}

.utk-hero-decoration--note {
  width: clamp(120px, 15vw, 210px);
}

.utk-hero-decoration--sun {
  width: clamp(140px, 17vw, 240px);
}

.utk-site-footer {
  position: relative;
  z-index: 2;
}

/* ページの土台は白一色。動く素材とコンテンツパネルを明確に分けます。 */
.utk-hero::after {
  content: none;
}

body > main > .utk-intro,
.utk-flow,
.utk-reasons,
.utk-instagram-feed,
.utk-faq-page,
.utk-news-archive,
.utk-news-single-page,
.utk-about-page,
.utk-about-hero,
.utk-about-concept,
.utk-about-features,
.utk-about-how,
.utk-about-cta {
  background: transparent;
}

/* 参考サイトの白い商品枠のように、内容だけを四角い面へまとめます。 */
.utk-home-news__inner,
.utk-home-works__inner,
.utk-flow__inner,
.utk-reasons__inner,
.utk-instagram-feed__inner,
.utk-faq__inner,
.utk-news-container,
.utk-news-single-container,
.utk-about-section-inner,
.utk-about-cta__inner {
  margin-inline: auto;
  padding: clamp(32px, 4.5vw, 64px) clamp(20px, 4vw, 56px);
  border: 1px solid #ececec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 18px rgb(54 39 32 / 8%);
}

.utk-home-news__inner,
.utk-home-works__inner,
.utk-flow__inner,
.utk-reasons__inner,
.utk-instagram-feed__inner,
.utk-faq__inner,
.utk-news-container,
.utk-news-single-container {
  width: calc(100% - 32px);
  max-width: 1480px;
}

.utk-about-section-inner,
.utk-about-cta__inner {
  width: min(calc(100% - 40px), 1320px);
}

/* ご利用の流れは6枚のカードと文字をゆったり見せる余白にします。 */
.utk-flow__inner {
  padding-inline: clamp(28px, 3vw, 48px);
}

/* 選ばれる理由も、アイコンと文章を大きく見せられる余白にします。 */
.utk-reasons__inner {
  padding-inline: clamp(28px, 3.5vw, 52px);
}

.utk-about-concept__layout {
  display: grid;
}

.utk-about-cta {
  color: var(--utk-ink);
}

.utk-about-cta .utk-about-kicker {
  color: var(--utk-pink);
}

.utk-background-motion__item {
  position: absolute;
  display: block;
  pointer-events: none;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.utk-background-motion__truck {
  top: var(--utk-bg-top);
  left: 0;
  width: var(--utk-bg-size);
  max-width: 43vw;
  opacity: var(--utk-bg-opacity);
  animation-name: utk-page-truck-cross;
  animation-duration: var(--utk-bg-duration);
  animation-delay: var(--utk-bg-delay);
}

.utk-background-motion__truck--high {
  --utk-bg-drift: 46px;
}

.utk-background-motion__truck--middle {
  --utk-bg-drift: -68px;
}

.utk-background-motion__truck--low {
  --utk-bg-drift: 30px;
}

.utk-background-motion__truck .utk-background-motion__media {
  width: 100%;
  height: auto;
  filter: saturate(1.04) contrast(1.02) drop-shadow(0 8px 7px rgb(54 39 32 / 16%));
  animation: utk-page-truck-float var(--utk-bg-float-duration) ease-in-out infinite alternate;
}

.utk-background-motion__note {
  bottom: -190px;
  left: var(--utk-bg-left);
  width: var(--utk-bg-size);
  opacity: var(--utk-bg-opacity);
  mix-blend-mode: multiply;
  animation-duration: var(--utk-bg-duration);
  animation-delay: var(--utk-bg-delay);
}

.utk-background-motion__note--rise {
  animation-name: utk-page-note-rise;
}

.utk-background-motion__note--diagonal-right {
  animation-name: utk-page-note-diagonal-right;
}

.utk-background-motion__note--diagonal-left {
  animation-name: utk-page-note-diagonal-left;
}

.utk-background-motion__note--drift {
  animation-name: utk-page-note-drift;
}

.utk-background-motion__note .utk-background-motion__media {
  width: 100%;
  height: auto;
  border-radius: 22%;
  animation: utk-page-note-float var(--utk-bg-float-duration) ease-in-out infinite alternate;
}

.utk-background-motion__microphone {
  bottom: -180px;
  left: var(--utk-bg-left);
  width: var(--utk-bg-size);
  opacity: var(--utk-bg-opacity);
  mix-blend-mode: multiply;
  animation-duration: var(--utk-bg-duration);
  animation-delay: var(--utk-bg-delay);
}

.utk-background-motion__microphone--rise {
  animation-name: utk-page-note-rise;
}

.utk-background-motion__microphone--diagonal-right {
  animation-name: utk-page-note-diagonal-right;
}

.utk-background-motion__microphone--diagonal-left {
  animation-name: utk-page-note-diagonal-left;
}

.utk-background-motion__microphone--drift {
  animation-name: utk-page-note-drift;
}

.utk-background-motion__microphone .utk-background-motion__media {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  filter: contrast(1.08);
  animation: utk-page-microphone-float var(--utk-bg-float-duration) ease-in-out infinite alternate;
}

.utk-background-paused .utk-background-motion__item,
.utk-background-paused .utk-background-motion__media,
.utk-background-paused .utk-hero-decoration {
  animation-play-state: paused;
}

.utk-background-motion.is-running .utk-background-motion__item,
.utk-background-motion.is-running .utk-background-motion__media {
  will-change: transform, opacity;
}

@keyframes utk-page-truck-cross {
  0% {
    opacity: 0;
    transform: translate3d(calc(100vw + 18%), 0, 0) scale(.9) rotate(.25deg);
  }
  6% {
    opacity: var(--utk-bg-opacity);
  }
  30% {
    transform: translate3d(69vw, 15px, 0) scale(1.02) rotate(-.18deg);
  }
  60% {
    transform: translate3d(27vw, var(--utk-bg-drift), 0) scale(.96) rotate(.14deg);
  }
  93% {
    opacity: var(--utk-bg-opacity);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-100% - 18vw), 0, 0) scale(.88) rotate(-.22deg);
  }
}

@keyframes utk-page-truck-float {
  from { transform: translate3d(0, -3px, 0) rotate(.14deg); }
  to { transform: translate3d(0, 5px, 0) rotate(-.14deg); }
}

@keyframes utk-page-note-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-14deg); }
  11% { opacity: var(--utk-bg-opacity); }
  50% { transform: translate3d(32px, -62vh, 0) rotate(7deg); }
  89% { opacity: var(--utk-bg-opacity); }
  100% { opacity: 0; transform: translate3d(-20px, -132vh, 0) rotate(28deg); }
}

@keyframes utk-page-note-diagonal-right {
  0% { opacity: 0; transform: translate3d(-20vw, 0, 0) rotate(-22deg); }
  11% { opacity: var(--utk-bg-opacity); }
  50% { transform: translate3d(7vw, -58vh, 0) rotate(4deg); }
  89% { opacity: var(--utk-bg-opacity); }
  100% { opacity: 0; transform: translate3d(24vw, -130vh, 0) rotate(30deg); }
}

@keyframes utk-page-note-diagonal-left {
  0% { opacity: 0; transform: translate3d(18vw, 0, 0) rotate(20deg); }
  11% { opacity: var(--utk-bg-opacity); }
  50% { transform: translate3d(-5vw, -64vh, 0) rotate(-8deg); }
  89% { opacity: var(--utk-bg-opacity); }
  100% { opacity: 0; transform: translate3d(-23vw, -134vh, 0) rotate(-32deg); }
}

@keyframes utk-page-note-drift {
  0% { opacity: 0; transform: translate3d(-30vw, 0, 0) rotate(-10deg); }
  10% { opacity: var(--utk-bg-opacity); }
  50% { transform: translate3d(8vw, -52vh, 0) rotate(12deg); }
  90% { opacity: var(--utk-bg-opacity); }
  100% { opacity: 0; transform: translate3d(34vw, -126vh, 0) rotate(34deg); }
}

@keyframes utk-page-note-float {
  from { transform: translate3d(0, -7px, 0) rotate(-5deg) scale(.96); }
  to { transform: translate3d(0, 11px, 0) rotate(6deg) scale(1.04); }
}

@keyframes utk-page-microphone-float {
  from { transform: translate3d(-4px, -8px, 0) rotate(-11deg) scale(.96); }
  to { transform: translate3d(7px, 12px, 0) rotate(9deg) scale(1.04); }
}

@media (max-width: 900px) {
  .utk-hero__copy {
    width: calc(100vw - 40px);
    padding: 44px 40px 50px;
  }

  .utk-hero__wordmark-main {
    gap: .11em;
    font-size: clamp(2.8rem, 6.8vw, 3.7rem);
  }

  .utk-hero__wordmark-sub {
    font-size: clamp(1rem, 2.4vw, 1.25rem);
  }

  .utk-hero__eyebrow {
    font-size: clamp(1.55rem, 3.8vw, 2rem);
  }

  .utk-hero__title {
    font-size: clamp(3.15rem, 8.8vw, 4.9rem);
    letter-spacing: .05em;
  }

  .utk-hero__message {
    font-size: clamp(1.2rem, 3vw, 1.55rem);
  }

  .utk-hero__jumper {
    right: auto;
    bottom: 62px;
    left: calc(50% + 32vw);
    width: min(42vw, 260px);
    translate: -50% 0;
  }

  .utk-background-motion__truck {
    max-width: 48vw;
  }
}

@media (max-width: 600px) {
  .utk-hero__inner {
    width: calc(100% - 20px);
  }

  .utk-hero__copy {
    width: 100%;
    padding: 32px 18px 36px;
  }

  .utk-hero__wordmark,
  .utk-hero__wordmark-main {
    width: calc(100vw - 56px);
    max-width: calc(100vw - 56px);
  }

  .utk-hero__wordmark-main {
    width: auto;
    gap: .1em;
    font-size: clamp(2rem, 8.8vw, 2.45rem);
  }

  .utk-hero__wordmark-sub {
    font-size: clamp(.9rem, 4vw, 1.05rem);
  }

  .utk-hero__eyebrow {
    margin-bottom: 17px;
    font-size: clamp(1.3rem, 5.6vw, 1.55rem);
  }

  .utk-hero__title {
    font-size: clamp(2.25rem, 9.8vw, 2.65rem);
    letter-spacing: .025em;
  }

  .utk-hero__message {
    font-size: clamp(1.08rem, 4.8vw, 1.2rem);
  }

  .utk-hero__jumper {
    right: 12px;
    bottom: 38px;
    left: auto;
    width: min(45vw, 190px);
    translate: none;
  }

  .utk-background-motion__truck {
    max-width: 58vw;
  }

  .utk-background-motion__microphone {
    max-width: 22vw;
  }

  .utk-home-news__inner,
  .utk-home-works__inner,
  .utk-flow__inner,
  .utk-reasons__inner,
  .utk-instagram-feed__inner,
  .utk-faq__inner,
  .utk-news-container,
  .utk-news-single-container,
  .utk-about-section-inner,
  .utk-about-cta__inner {
    width: calc(100% - 24px);
    padding: 28px 14px;
    border-radius: 8px;
  }

  .utk-background-motion__note .utk-background-motion__media {
    border-radius: 28%;
  }
}

@media (max-width: 767px) {
  .utk-hero__jumper {
    right: clamp(12px, 3vw, 22px);
    bottom: 38px;
    left: auto;
    width: min(45vw, 190px);
    translate: none;
  }

  .utk-hero__jumper-callout {
    display: block;
    top: 36%;
    left: 24%;
    padding: 6px 11px;
    font-size: .72rem;
    opacity: 1;
    transform: translate(-55%, -105%) rotate(-2deg);
  }

  .utk-hero__jumper:hover .utk-hero__jumper-callout,
  .utk-hero__jumper:focus-visible .utk-hero__jumper-callout {
    opacity: 1;
    transform: translate(-55%, -105%) rotate(-2deg);
  }

  .utk-hero-decoration--cloud-one {
    width: clamp(190px, 20vw, 315px);
  }

  .utk-hero-decoration--cloud-two {
    width: clamp(175px, 19vw, 290px);
  }

  .utk-hero-decoration--note {
    width: clamp(105px, 13vw, 185px);
  }

  .utk-hero-decoration--sun {
    width: clamp(122px, 15vw, 210px);
  }
}

@media (max-width: 480px) {
  .utk-hero__jumper {
    bottom: 12px;
  }

  .utk-hero__jumper-callout {
    top: 20%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .utk-hero-decoration {
    animation: none !important;
  }

  .utk-hero__eyebrow-character {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .utk-background-motion__item,
  .utk-background-motion__media {
    animation: none !important;
    will-change: auto !important;
  }

  .utk-background-motion__truck {
    top: auto;
    right: -5%;
    bottom: 6%;
    left: auto;
    opacity: .18;
    transform: none;
  }

  .utk-background-motion__note {
    top: 14%;
    bottom: auto;
    opacity: .2;
    transform: none;
  }

  .utk-background-motion__note:nth-of-type(3) {
    top: auto;
    bottom: 12%;
  }

  .utk-background-motion__microphone {
    top: auto;
    right: 14%;
    bottom: 18%;
    left: auto;
    opacity: .18;
    transform: none;
  }
}

@media print {
  .utk-background-motion {
    display: none;
  }
}