/* 「うたクルとは」ページ専用。共通ヘッダー・フッターは style.css を使用します。 */

.utk-about-page {
  overflow: hidden;
  background: var(--utk-cream);
}

.utk-about-page h1,
.utk-about-page h2,
.utk-about-page h3,
.utk-about-kicker,
.utk-about-button {
  font-family: var(--utk-font-rounded);
}

.utk-about-page h1,
.utk-about-page h2,
.utk-about-page h3,
.utk-about-page p {
  margin-top: 0;
}

.utk-about-breadcrumb {
  width: min(100% - 40px, var(--utk-page-width));
  margin: 0 auto;
  padding: 6px 0 5px;
  color: #755f55;
  font-size: .75rem;
  line-height: 1.45;
}

.utk-about-breadcrumb ol {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 9px;
  list-style: none;
}

.utk-about-breadcrumb li + li::before {
  margin-right: 9px;
  content: "/";
  color: #b9a79e;
}

.utk-about-breadcrumb a:hover,
.utk-about-breadcrumb a:focus-visible {
  color: var(--utk-pink);
  text-decoration: underline;
}

.utk-about-hero {
  position: relative;
  min-height: 620px;
  background:
    radial-gradient(circle at 8% 25%, rgb(246 200 62 / 18%) 0 5px, transparent 6px),
    radial-gradient(circle at 92% 18%, rgb(216 60 115 / 14%) 0 7px, transparent 8px),
    linear-gradient(145deg, #fffdf8 0%, #fff7df 48%, #eaf8fb 100%);
}

.utk-about-hero::after {
  position: absolute;
  right: -5%;
  bottom: -72px;
  left: -5%;
  height: 130px;
  border-radius: 50% 50% 0 0;
  content: "";
  background: var(--utk-cream);
}

.utk-about-hero__inner {
  display: grid;
  width: min(100% - 40px, var(--utk-page-width));
  min-height: 580px;
  margin: 0 auto;
  align-items: center;
  grid-template-columns: .9fr 1.2fr;
  gap: clamp(20px, 4vw, 60px);
}

.utk-about-hero__copy {
  position: relative;
  z-index: 2;
}

.utk-about-kicker {
  margin-bottom: 9px;
  color: var(--utk-blue);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.utk-about-hero h1 {
  margin-bottom: 28px;
  color: var(--utk-ink);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: .06em;
}

.utk-about-hero__lead {
  margin-bottom: 22px;
  font-family: var(--utk-font-rounded);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.65;
}

.utk-about-hero__lead strong {
  color: var(--utk-pink);
  font-size: 1.22em;
  font-weight: 900;
  background: linear-gradient(transparent 67%, rgb(246 200 62 / 55%) 0);
}

.utk-about-hero__copy > p:last-child {
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 2;
}

.utk-about-hero__visual {
  position: relative;
  z-index: 1;
  height: clamp(350px, 34vw, 450px);
  overflow: hidden;
}

.utk-about-hero__visual::before {
  position: absolute;
  z-index: -1;
  inset: 2% -7% 0;
  border-radius: 48% 52% 44% 56% / 53% 42% 58% 47%;
  content: "";
  background: rgb(255 253 248 / 64%);
  box-shadow: 0 24px 65px rgb(8 127 167 / 10%);
}

.utk-about-hero__road {
  position: absolute;
  z-index: 0;
  inset: 4% -10% 0;
  width: 120%;
  height: 96%;
  overflow: visible;
  transform: rotate(-1.5deg);
}

.utk-about-hero__road-edge,
.utk-about-hero__road-sketch,
.utk-about-hero__road-center,
.utk-about-hero__road-scribble {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.utk-about-hero__road-edge {
  stroke: #75675d;
  stroke-width: 5;
}

.utk-about-hero__road-sketch {
  stroke: rgb(117 103 93 / 48%);
  stroke-width: 2;
}

.utk-about-hero__road-center {
  stroke: #d7a936;
  stroke-width: 5;
  stroke-dasharray: 44 34;
}

.utk-about-hero__road-scribble {
  stroke: rgb(117 103 93 / 52%);
  stroke-width: 3;
}

.utk-about-hero__vehicle {
  position: absolute;
  z-index: 2;
  bottom: 5%;
  left: 0;
  width: clamp(310px, 31vw, 440px);
  will-change: transform, opacity;
}

.js .utk-about-hero__vehicle {
  animation: utk-about-drive 11s linear .4s infinite both;
}

.utk-about-hero__truck {
  --utk-about-wheel-front-x: 13.7%;
  --utk-about-wheel-rear-x: 69.1%;
  --utk-about-wheel-y: 7.1%;
  --utk-about-wheel-size: 13%;

  position: relative;
  z-index: 2;
  animation: utk-about-truck-bounce .58s ease-in-out infinite alternate;
}

.utk-about-hero__truck-image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 9px rgb(54 39 32 / 20%));
}

.utk-about-hero__ground-shadow {
  position: absolute;
  z-index: 1;
  bottom: 3%;
  left: 10%;
  width: 82%;
  height: 7%;
  border-radius: 50%;
  background: rgb(54 39 32 / 24%);
  filter: blur(6px);
  transform: scaleY(.52);
}

.utk-about-hero__wheel {
  position: absolute;
  z-index: 3;
  bottom: var(--utk-about-wheel-y);
  width: var(--utk-about-wheel-size);
  aspect-ratio: 1;
  border: clamp(4px, .55vw, 8px) solid #17202b;
  border-radius: 50%;
  background: conic-gradient(#9eabb5 0 12.5%, #3e4c58 12.5% 25%, #9eabb5 25% 37.5%, #3e4c58 37.5% 50%, #9eabb5 50% 62.5%, #3e4c58 62.5% 75%, #9eabb5 75% 87.5%, #3e4c58 87.5%);
  box-shadow: inset 0 0 0 3px #dfe6eb;
  animation: utk-about-wheel-spin .48s linear infinite;
}

.utk-about-hero__wheel::after {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  content: "";
  background: #e9eef2;
}

.utk-about-hero__wheel--front { left: var(--utk-about-wheel-front-x); }
.utk-about-hero__wheel--rear { left: var(--utk-about-wheel-rear-x); }

.utk-about-hero__smoke {
  position: absolute;
  z-index: 1;
  right: -4%;
  bottom: 14%;
  width: clamp(12px, 1.7vw, 22px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 0 0 2px rgb(117 103 93 / 10%);
  animation: utk-about-smoke 1.5s ease-out infinite;
}

.utk-about-hero__smoke--two { right: -11%; bottom: 20%; animation-delay: .38s; }
.utk-about-hero__smoke--three { right: -18%; bottom: 15%; animation-delay: .76s; }

@keyframes utk-about-drive {
  0% { opacity: 0; transform: translateX(150%); }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-155%); }
}

@keyframes utk-about-truck-bounce {
  from { transform: translateY(0) rotate(.2deg); }
  to { transform: translateY(-3px) rotate(-.15deg); }
}

@keyframes utk-about-wheel-spin {
  to { transform: rotate(-360deg); }
}

@keyframes utk-about-smoke {
  from { opacity: .8; transform: translate(0, 0) scale(.5); }
  to { opacity: 0; transform: translate(38px, -20px) scale(1.45); }
}

.utk-about-hero__note {
  position: absolute;
  color: var(--utk-pink);
  font-family: var(--utk-font-rounded);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 900;
}

.utk-about-hero__note--one { top: 3%; left: 3%; transform: rotate(-13deg); }
.utk-about-hero__note--two { top: 5%; right: 6%; color: var(--utk-blue); transform: rotate(12deg); }

.utk-about-section-inner {
  width: min(100% - 40px, 1080px);
  margin-inline: auto;
}

.utk-about-concept {
  padding: clamp(72px, 9vw, 115px) 0;
  background: #fff;
}

.utk-about-concept__layout {
  display: grid;
  width: min(100% - 40px, 1280px);
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(350px, 460px);
  gap: clamp(45px, 6vw, 82px);
}

.utk-about-concept__copy h2,
.utk-about-heading h2,
.utk-about-cta h2 {
  margin-bottom: 24px;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .035em;
  text-wrap: balance;
}

.utk-about-concept__copy h2 {
  max-width: 720px;
  margin-bottom: clamp(30px, 4vw, 48px);
  font-size: clamp(1.85rem, 3.1vw, 2.75rem);
  line-height: 1.6;
  letter-spacing: .02em;
  text-align: left;
}

.utk-about-concept__copy h2 span {
  display: block;
  white-space: nowrap;
}

.utk-about-concept__copy > p:not(.utk-about-kicker):not(.utk-about-concept__wordmark) {
  max-width: 680px;
  margin-bottom: 22px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 2.05;
  text-wrap: pretty;
}

.utk-about-concept__wordmark {
  display: grid;
  width: fit-content;
  margin: 0 0 clamp(34px, 5vw, 58px);
  font-family: var(--utk-font-rounded);
  line-height: 1;
}

.utk-about-concept__wordmark-small {
  margin: 0 0 7px 5px;
  color: var(--utk-blue);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .28em;
}

.utk-about-concept__wordmark-main {
  font-size: clamp(3.9rem, 7.5vw, 7rem);
  font-weight: 900;
  letter-spacing: -.075em;
  white-space: nowrap;
}

.utk-about-concept__letter--blue { color: #3199df; }
.utk-about-concept__letter--green { color: #5ebd36; }
.utk-about-concept__letter--purple { color: #8b50bd; }
.utk-about-concept__letter--pink { color: #ee4b9b; }
.utk-about-concept__letter--cyan { color: #35bcae; }
.utk-about-concept__letter--orange { color: #f59a24; }

.utk-about-concept__person {
  position: relative;
  display: flex;
  min-height: 650px;
  align-items: flex-end;
  justify-content: center;
}

.utk-about-concept__person img {
  position: relative;
  z-index: 2;
  width: min(92%, 430px);
  max-height: 620px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 15px 12px rgb(54 39 32 / 13%));
}

.utk-about-features {
  position: relative;
  padding: clamp(75px, 10vw, 120px) 0;
  background: #eaf8fb;
}

.utk-about-features::before,
.utk-about-features::after {
  position: absolute;
  color: rgb(8 127 167 / 9%);
  content: "♪";
  font-family: var(--utk-font-rounded);
  font-size: 9rem;
  font-weight: 900;
  transform: rotate(-12deg);
}

.utk-about-features::before { top: -20px; left: 2%; }
.utk-about-features::after { right: 3%; bottom: -38px; content: "♫"; transform: rotate(10deg); }

.utk-about-heading {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(38px, 6vw, 65px);
  text-align: center;
}

.utk-about-heading h2 { margin-bottom: 12px; }
.utk-about-heading > p:last-child { margin-bottom: 0; }

.utk-about-features__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.utk-about-feature-card {
  position: relative;
  min-width: 0;
  padding: 35px 28px 32px;
  overflow: hidden;
  border-radius: 24px;
  background: #fffdf8;
  box-shadow: 0 14px 35px rgb(25 95 115 / 10%);
}

.utk-about-feature-card__number {
  position: absolute;
  top: -19px;
  right: 9px;
  color: rgb(8 127 167 / 8%);
  font-family: var(--utk-font-rounded);
  font-size: 5.6rem;
  font-weight: 900;
  line-height: 1;
}

.utk-about-feature-card__icon {
  display: grid;
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border-radius: 50%;
  place-items: center;
  color: var(--utk-blue);
  background: #e8f7fa;
}

.utk-about-feature-card:nth-child(2) .utk-about-feature-card__icon { color: var(--utk-pink); background: #fff0f5; }
.utk-about-feature-card:nth-child(3) .utk-about-feature-card__icon { color: var(--utk-orange); background: #fff4df; }

.utk-about-feature-card__icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.utk-about-feature-card h3 {
  position: relative;
  margin-bottom: 13px;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.55;
}

.utk-about-feature-card p {
  position: relative;
  margin-bottom: 0;
  font-size: .93rem;
  line-height: 1.85;
}

.utk-about-how {
  padding: clamp(80px, 11vw, 130px) 0;
  background: #fffdf8;
}

.utk-about-how__list {
  display: grid;
  margin: 0 0 48px;
  padding: 0;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  list-style: none;
  counter-reset: none;
}

.utk-about-how__list li {
  position: relative;
  display: grid;
  text-align: center;
}

.utk-about-how__list li:not(:last-child)::after {
  position: absolute;
  top: 29px;
  right: -34px;
  content: "›";
  color: var(--utk-yellow);
  font-family: var(--utk-font-rounded);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}

.utk-about-how__list span {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border: 3px solid var(--utk-blue);
  border-radius: 50%;
  place-items: center;
  color: var(--utk-blue);
  font-family: var(--utk-font-rounded);
  font-size: 1.5rem;
  font-weight: 900;
  background: #fff;
}

.utk-about-how__list strong {
  margin-bottom: 8px;
  font-family: var(--utk-font-rounded);
  font-size: 1.15rem;
}

.utk-about-how__list small { color: #68554d; font-size: .9rem; line-height: 1.7; }

.utk-about-how__links {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.utk-about-button {
  display: inline-flex;
  min-width: 230px;
  min-height: 58px;
  padding: 13px 25px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--utk-blue);
  border-radius: 999px;
  font-weight: 900;
  line-height: 1.4;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.utk-about-button--primary { color: #fff; background: var(--utk-blue); box-shadow: 0 9px 22px rgb(8 127 167 / 22%); }
.utk-about-button--secondary { color: var(--utk-blue); background: #fff; }

.utk-about-button:hover,
.utk-about-button:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 25px rgb(8 127 167 / 23%); }

.utk-about-button:focus-visible { outline: 3px solid var(--utk-yellow); outline-offset: 4px; }

.utk-about-cta {
  padding: clamp(55px, 8vw, 90px) 20px 0;
  color: #fff;
  background: linear-gradient(135deg, #067a9f, #249eb3);
}

.utk-about-cta__inner {
  display: grid;
  width: min(100%, 940px);
  margin: 0 auto;
  align-items: end;
  grid-template-columns: minmax(0, 1fr);
}

.utk-about-cta__inner > div { padding-bottom: clamp(52px, 7vw, 80px); }
.utk-about-cta .utk-about-kicker { color: #fff0a8; }
.utk-about-cta h2 { margin-bottom: 14px; }
.utk-about-cta p:not(.utk-about-kicker) { margin-bottom: 26px; line-height: 1.9; }

.utk-about-button--instagram {
  min-width: 290px;
  border-color: #fff;
  color: #fff;
  background: linear-gradient(115deg, #ff7a2f, #e43b76 48%, #7137bd);
  box-shadow: 0 10px 25px rgb(35 30 80 / 20%);
}

.utk-about-button--instagram span { margin-left: 15px; font-size: 1.7rem; font-weight: 500; }

@media (max-width: 900px) {
  .utk-about-hero { min-height: auto; }
  .utk-about-hero__inner { min-height: 520px; grid-template-columns: .9fr 1.1fr; gap: 8px; }
  .utk-about-hero__copy > p:last-child br { display: none; }
  .utk-about-concept__layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 40%); gap: 38px; }
  .utk-about-concept__copy h2 { font-size: clamp(1.72rem, 3.45vw, 2.3rem); }
  .utk-about-concept__wordmark-main { font-size: clamp(3.4rem, 7vw, 5.2rem); }
  .utk-about-concept__person { min-height: 570px; }
  .utk-about-features__grid { gap: 14px; }
  .utk-about-feature-card { padding: 30px 20px 27px; }
}

@media (max-width: 700px) {
  .utk-about-breadcrumb { width: min(100% - 32px, var(--utk-page-width)); padding-block: 4px; font-size: .7rem; }
  .utk-about-hero__inner { width: min(100% - 32px, var(--utk-page-width)); padding: 38px 0 80px; grid-template-columns: 1fr; text-align: center; }
  .utk-about-hero__copy { order: 1; }
  .utk-about-hero__visual { order: 2; width: min(100%, 560px); height: clamp(245px, 70vw, 340px); margin: -6px auto 0; }
  .utk-about-hero__vehicle { bottom: 3%; width: clamp(230px, 68vw, 330px); }
  .utk-about-hero h1 { margin-bottom: 22px; }
  .utk-about-hero__copy > p:last-child { font-size: .94rem; }
  .utk-about-section-inner { width: min(100% - 32px, 1080px); }
  .utk-about-concept__layout { grid-template-columns: 1fr; }
  .utk-about-concept__copy { text-align: center; }
  .utk-about-concept__copy h2 { font-size: clamp(1.42rem, 6.4vw, 2rem); text-align: center; }
  .utk-about-concept__copy > p:not(.utk-about-kicker):not(.utk-about-concept__wordmark) { text-align: left; }
  .utk-about-concept__wordmark { margin-inline: auto; }
  .utk-about-concept__wordmark-main { font-size: clamp(2.5rem, 13vw, 4rem); }
  .utk-about-concept__person { min-height: 500px; margin-top: 10px; }
  .utk-about-concept__person img { width: min(88%, 340px); max-height: 470px; }
  .utk-about-features__grid { grid-template-columns: 1fr; gap: 18px; }
  .utk-about-feature-card { width: min(100%, 480px); margin-inline: auto; }
  .utk-about-how__list { grid-template-columns: 1fr; gap: 38px; }
  .utk-about-how__list li:not(:last-child)::after { top: auto; right: 50%; bottom: -40px; transform: translateX(50%) rotate(90deg); }
  .utk-about-how__links { flex-direction: column; align-items: center; }
  .utk-about-button { width: min(100%, 330px); }
  .utk-about-cta { padding-top: 55px; }
  .utk-about-cta__inner { grid-template-columns: 1fr; text-align: center; }
  .utk-about-cta__inner > div { order: 1; padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .utk-about-button { transition: none; }
  .utk-about-hero__vehicle { right: 0; left: auto; opacity: 1; transform: none; animation: none; }
  .utk-about-hero__truck,
  .utk-about-hero__wheel,
  .utk-about-hero__smoke { animation: none; }
  .utk-about-hero__smoke { display: none; }
}

.no-js .utk-about-hero__vehicle {
  right: 0;
  left: auto;
  opacity: 1;
  transform: none;
}

.no-js .utk-about-hero__truck,
.no-js .utk-about-hero__wheel,
.no-js .utk-about-hero__smoke { animation: none; }

/* ---------- 高さ207pxのページタイトル帯 ---------- */

.utk-about-hero {
  min-height: 207px;
  height: 207px;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 105%, rgb(255 255 255 / 88%) 0 22%, transparent 50%),
    linear-gradient(180deg, #dcf4f5 0%, #f3fbef 66%, #d9efbe 100%);
}

.utk-about-hero::after {
  display: none;
}

.utk-about-hero__inner {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  height: 207px;
  margin: 0;
  place-items: center;
  grid-template-columns: 1fr;
}

.utk-about-hero__copy {
  position: relative;
  z-index: 5;
  padding: 14px 24px 10px;
  text-align: center;
  text-shadow:
    0 1px 0 rgb(255 253 248 / 95%),
    0 0 12px rgb(255 253 248 / 92%);
  transform: translateY(-18px);
}

.utk-about-hero .utk-about-kicker {
  display: flex;
  margin-bottom: 2px;
  align-items: baseline;
  justify-content: center;
  gap: .45em;
  font-size: .72rem;
  letter-spacing: .1em;
}

.utk-about-kicker__about {
  color: var(--utk-blue);
}

.utk-about-kicker__wordmark {
  font-size: 1.15em;
  letter-spacing: .12em;
}

.utk-about-kicker__blue { color: #3199df; }
.utk-about-kicker__green { color: #5ebd36; }
.utk-about-kicker__purple { color: #8b50bd; }
.utk-about-kicker__pink { color: #ee4b9b; }
.utk-about-kicker__cyan { color: #35bcae; }
.utk-about-kicker__orange { color: #f59a24; }

.utk-about-hero .utk-about-kicker span {
  text-shadow:
    0 1px 0 #fff,
    0 0 8px rgb(255 255 255 / 90%);
}

.utk-about-hero h1 {
  margin-bottom: 4px;
  font-size: clamp(1.8rem, 3.2vw, 2.65rem);
  line-height: 1.25;
  letter-spacing: .04em;
}

.utk-about-breadcrumb {
  display: inline-flex;
  width: auto;
  margin: 1px auto 0;
  padding: 3px 12px;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 999px;
  color: #68554d;
  font-size: .72rem;
  line-height: 1.4;
  background: rgb(255 253 248 / 88%);
  box-shadow: 0 3px 12px rgb(54 39 32 / 10%);
  backdrop-filter: blur(3px);
}

.utk-about-breadcrumb ol {
  justify-content: center;
  gap: 7px;
}

.utk-about-breadcrumb li + li::before {
  margin-right: 7px;
  content: "›";
}

.utk-about-hero__visual {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 207px;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.utk-about-hero__visual::before {
  display: none;
}

.utk-about-hero__road {
  inset: 0;
  width: 100%;
  height: 207px;
  transform: none;
  opacity: 1;
}

.utk-about-hero__hill {
  fill: #cde9aa;
  stroke: #70a84d;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.utk-about-hero__tree-trunk {
  fill: none;
  stroke: #79583c;
  stroke-linecap: round;
  stroke-width: 8;
}

.utk-about-hero__tree-crown {
  fill: #69a94d;
  stroke: #397732;
  stroke-linejoin: round;
  stroke-width: 3;
}

.utk-about-hero__tree-sketch {
  fill: none;
  stroke: rgb(207 235 170 / 76%);
  stroke-linecap: round;
  stroke-width: 3;
}

.utk-about-hero__trees {
  opacity: .92;
}

.utk-about-hero__road-surface {
  fill: #f8f3e8;
}

.utk-about-hero__road-edge {
  stroke: #625850;
  stroke-width: 4;
}

.utk-about-hero__road-sketch {
  stroke-width: 1.8;
}

.utk-about-hero__road-center {
  stroke: #d59b1c;
  stroke-width: 4;
  stroke-dasharray: 42 34;
}

.utk-about-hero__vehicle {
  right: auto;
  bottom: -2px;
  left: 0;
  width: clamp(150px, 12vw, 190px);
  opacity: 0;
}

.js .utk-about-hero__vehicle {
  animation: utk-about-banner-drive 12s linear .35s infinite both;
}

.utk-about-hero__ground-shadow {
  bottom: 5%;
  filter: blur(4px);
}

.utk-about-hero__smoke {
  width: clamp(9px, 1vw, 14px);
}

@keyframes utk-about-banner-drive {
  0% {
    opacity: 0;
    transform: translateX(calc(100vw + 40%));
  }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translateX(-130%);
  }
}

@media (max-width: 700px) {
  .utk-about-hero,
  .utk-about-hero__inner,
  .utk-about-hero__visual {
    min-height: 207px;
    height: 207px;
  }

  .utk-about-hero__inner {
    width: 100%;
    padding: 0;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .utk-about-hero__copy {
    order: initial;
    padding-inline: 16px;
    transform: translateY(-15px);
  }

  .utk-about-hero__visual {
    order: initial;
    width: 100%;
    margin: 0;
  }

  .utk-about-hero__vehicle {
    bottom: -2px;
    width: clamp(130px, 38vw, 165px);
  }

  .utk-about-hero__road {
    inset: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .utk-about-hero__vehicle {
    right: 2%;
    bottom: -2px;
    left: auto;
    opacity: .82;
    transform: none;
    animation: none;
  }
}

.no-js .utk-about-hero__vehicle {
  right: 2%;
  bottom: -2px;
  left: auto;
  opacity: .82;
  transform: none;
}

/* ---------- うたクル紹介コンテンツ ---------- */

.utk-about-story {
  padding: clamp(64px, 8vw, 112px) 0;
  background: rgb(232 248 253 / 68%);
}

.utk-about-story .utk-about-section-inner {
  width: min(100% - 48px, 1200px);
}

.utk-about-panel + .utk-about-panel {
  margin-top: clamp(64px, 8vw, 112px);
}

.utk-about-panel__inner {
  display: grid;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgb(8 127 167 / 12%);
  border-radius: 28px;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  background: #fff;
  box-shadow: 0 10px 30px rgb(54 39 32 / 7%);
}

.utk-about-story .utk-about-panel__inner {
  padding: 0;
}

.utk-about-panel--reverse .utk-about-panel__copy { order: 2; }
.utk-about-panel--reverse .utk-about-panel__visual { order: 1; }

.utk-about-panel--text-only .utk-about-panel__inner {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
}

.utk-about-panel--concept .utk-about-panel__inner {
  min-height: 0;
  grid-template-rows: auto auto;
}

.utk-about-panel--concept .utk-about-panel__copy {
  position: relative;
  z-index: 3;
  justify-content: flex-start;
}

.utk-about-panel--concept .utk-about-panel__visual {
  display: flex;
  min-height: clamp(420px, 46vw, 600px);
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.utk-about-panel--concept .utk-about-panel__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 901px) {
  .utk-about-panel--concept .utk-about-panel__inner {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  }

  .utk-about-panel--concept .utk-about-panel__copy {
    padding-block: 40px;
    padding-right: 24px;
  }

  .utk-about-panel--concept .utk-about-panel__visual {
    height: clamp(440px, 42vw, 560px);
    min-height: 0;
    overflow: visible;
    align-self: center;
  }

  .utk-about-panel--concept .utk-about-panel__visual img {
    position: relative;
    z-index: 2;
    transform: scale(1.12);
    transform-origin: right center;
  }

}

.utk-about-concept__details {
  grid-column: 1 / -1;
}

.utk-about-concept__details .utk-about-capacity {
  margin: 0;
  padding: 14px clamp(40px, 5vw, 68px);
  border-radius: 0;
  justify-content: center;
  text-align: center;
  background: #fff3d6;
}

.utk-about-concept__details .utk-about-capacity strong {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.5;
}

.utk-about-concept__details .utk-about-capacity span {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.5;
}

.utk-about-concept__details > p {
  margin: 0;
  padding: 16px clamp(40px, 5vw, 68px) 28px;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.9;
  text-align: left;
  text-wrap: pretty;
}

.utk-about-panel__copy {
  display: flex;
  min-width: 0;
  padding: clamp(32px, 3.5vw, 48px);
  flex-direction: column;
  justify-content: center;
}

.utk-about-panel__copy--benefits {
  align-items: stretch;
  text-align: left;
}

.utk-about-panel__copy--benefits .utk-about-check-list {
  width: min(100%, 1000px);
  margin-inline: auto;
}

.utk-about-panel__copy--benefits .utk-about-check-list li {
  text-align: left;
}

.utk-about-panel__copy h2 {
  margin-bottom: 24px;
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .035em;
  text-wrap: balance;
}

.utk-about-panel__copy > p:not(.utk-about-concept__wordmark):not(.utk-about-panel__label) {
  margin-bottom: 15px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.9;
  text-wrap: pretty;
}

.utk-about-panel__visual {
  min-width: 0;
  min-height: 100%;
  background: linear-gradient(145deg, rgb(255 255 255 / 30%), transparent 62%), #eaf8fb;
}

.utk-about-panel:nth-child(2n) .utk-about-panel__visual {
  background: linear-gradient(145deg, rgb(255 255 255 / 38%), transparent 62%), #fff1f6;
}

.utk-about-panel:nth-child(3n) .utk-about-panel__visual {
  background: linear-gradient(145deg, rgb(255 255 255 / 38%), transparent 62%), #fff5df;
}

.utk-about-panel__label {
  margin-bottom: 12px;
  color: var(--utk-blue);
  font-family: var(--utk-font-rounded);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.utk-about-story .utk-about-concept__wordmark {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.utk-about-story .utk-about-concept__wordmark-main {
  font-size: clamp(3.6rem, 6vw, 5.8rem);
}

.utk-about-capacity {
  display: flex;
  margin: 8px 0 20px;
  padding: 18px 20px;
  border-radius: 16px;
  flex-wrap: wrap;
  gap: 8px 20px;
  background: #f1fafb;
}

.utk-about-capacity strong {
  width: 100%;
  color: var(--utk-blue);
  font-size: .9rem;
}

.utk-about-capacity span { font-weight: 900; }

.utk-about-check-list,
.utk-about-scene-list,
.utk-about-flow-list,
.utk-about-requirement-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 14px;
  list-style: none;
}

.utk-about-check-list li,
.utk-about-scene-list li {
  position: relative;
  padding-left: 30px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
}

.utk-about-check-list li::before,
.utk-about-scene-list li::before {
  position: absolute;
  top: .15em;
  left: 0;
  display: grid;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  content: "✓";
  font-size: .75rem;
  font-weight: 900;
  background: var(--utk-blue);
}

.utk-about-scene-list li::before {
  top: .35em;
  width: 18px;
  height: 18px;
  content: "";
  background: #3199df;
}

.utk-about-scene-list li:nth-child(2)::before { background: #5ebd36; }
.utk-about-scene-list li:nth-child(3)::before { background: #8b50bd; }
.utk-about-scene-list li:nth-child(4)::before { background: #ee4b9b; }

.utk-about-scene-list {
  width: min(100%, 1000px);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  column-gap: clamp(32px, 6vw, 88px);
}

.utk-about-scene-list li {
  font-size: 1.15rem;
}

.utk-about-check-list li::before {
  top: .35em;
  width: 18px;
  height: 18px;
  content: "";
  background: #3199df;
}

.utk-about-check-list li:nth-child(2)::before { background: #5ebd36; }
.utk-about-check-list li:nth-child(3)::before { background: #8b50bd; }
.utk-about-check-list li:nth-child(4)::before { background: #ee4b9b; }
.utk-about-check-list li:nth-child(5)::before { background: #35bcae; }
.utk-about-check-list li:nth-child(6)::before { background: #f59a24; }

.utk-about-check-list--users {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: clamp(32px, 6vw, 88px);
}

.utk-about-check-list--users li {
  font-size: 1.15rem;
}

.utk-about-panel__copy--benefits .utk-about-check-list--facilities {
  width: min(100%, 1000px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  column-gap: clamp(32px, 6vw, 88px);
}

.utk-about-check-list--facilities li {
  font-size: 1.15rem;
}

.utk-about-requirement-list {
  margin-bottom: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
}

.utk-about-requirement-list li {
  --utk-requirement-accent: #3199df;
  --utk-requirement-soft: #eaf8fc;

  min-width: 0;
  display: grid;
  min-height: 180px;
  padding: 28px 22px;
  border: 1px solid color-mix(in srgb, var(--utk-requirement-accent) 34%, white);
  border-top: 4px solid var(--utk-requirement-accent);
  border-radius: 22px;
  place-items: center;
  text-align: center;
  background: var(--utk-requirement-soft);
  box-shadow: 0 14px 34px rgb(94 52 42 / 10%);
}

.utk-about-requirement-list li:nth-child(2) {
  --utk-requirement-accent: #ee4b9b;
  --utk-requirement-soft: #fff0f5;
}

.utk-about-requirement-list strong {
  display: block;
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  line-height: 1.6;
}

.utk-about-panel__copy .utk-about-panel__lead {
  margin-bottom: 2px;
  color: var(--utk-pink);
  font-family: var(--utk-font-rounded);
  font-size: 1.12rem;
  font-weight: 900;
}

#utk-about-requirements-title ~ p {
  font-size: clamp(1.2rem, 1.8vw, 1.35rem);
  line-height: 1.8;
  text-align: center;
}

.utk-about-flow-list { gap: 0; }

.utk-about-flow-list li {
  position: relative;
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 18px;
}

.utk-about-flow-list li:not(:last-child)::before {
  position: absolute;
  top: 46px;
  bottom: -16px;
  left: 20px;
  width: 2px;
  content: "";
  background: rgb(8 127 167 / 24%);
}

.utk-about-flow-list span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  font-family: var(--utk-font-rounded);
  font-weight: 900;
  background: var(--utk-blue);
}

.utk-about-flow-list strong {
  font-size: 1.05rem;
  line-height: 1.5;
}

.utk-about-panel--message .utk-about-panel__inner {
  border-color: rgb(238 75 155 / 18%);
}

.utk-about-panel--message .utk-about-panel__visual {
  overflow: hidden;
}

.utk-about-panel--message .utk-about-panel__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.utk-about-message__line {
  display: block;
  width: fit-content;
  white-space: nowrap;
}

.utk-about-panel__copy > .utk-about-message__copy {
  color: #68554d;
}

.utk-about-panel__copy .utk-about-message__name {
  margin: 8px 0 0;
  color: var(--utk-pink);
  font-family: var(--utk-font-rounded);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 900;
  line-height: 1.45;
}

.utk-about-message__name span {
  display: block;
  color: #68554d;
  font-size: .68em;
}

@media (min-width: 901px) {
  .utk-about-panel__copy > p:not(.utk-about-concept__wordmark):not(.utk-about-panel__label),
  .utk-about-check-list li,
  .utk-about-scene-list li {
    font-size: 1.0625rem;
  }

  .utk-about-check-list--users li {
    font-size: 1.25rem;
  }

  .utk-about-check-list--facilities li {
    font-size: 1.25rem;
  }

  .utk-about-scene-list li {
    font-size: 1.25rem;
  }

  .utk-about-check-list--users li:nth-child(3) {
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  .utk-about-panel__inner {
    min-height: 470px;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  }

  .utk-about-panel__copy { padding: 40px 36px; }
  .utk-about-panel--concept .utk-about-panel__copy { padding: 36px 28px; }
  .utk-about-requirement-list { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .utk-about-story { padding-block: 56px 72px; }

  .utk-about-story .utk-about-section-inner {
    width: min(100% - 32px, 1200px);
  }

  .utk-about-panel + .utk-about-panel { margin-top: 48px; }

  .utk-about-panel__inner {
    min-height: 0;
    border-radius: 22px;
    grid-template-columns: 1fr;
  }

  .utk-about-panel__copy,
  .utk-about-panel--reverse .utk-about-panel__copy {
    order: 1;
    padding: 36px 24px 40px;
  }

  .utk-about-panel--concept .utk-about-panel__copy {
    padding: 28px 24px 32px;
  }

  .utk-about-panel__visual,
  .utk-about-panel--reverse .utk-about-panel__visual {
    order: 2;
    min-height: clamp(230px, 66vw, 330px);
  }

  .utk-about-panel--concept .utk-about-panel__visual {
    min-height: clamp(230px, 66vw, 330px);
  }

  .utk-about-concept__details {
    order: 3;
    grid-column: 1;
  }

  .utk-about-concept__details .utk-about-capacity {
    padding-block: 12px;
    padding-inline: 24px;
  }

  .utk-about-concept__details > p {
    padding: 16px 24px 28px;
  }

  .utk-about-check-list--users,
  .utk-about-panel__copy--benefits .utk-about-check-list--facilities {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .utk-about-scene-list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .utk-about-panel__copy h2 { margin-bottom: 20px; }
  .utk-about-panel__copy > p:not(.utk-about-concept__wordmark):not(.utk-about-panel__label) { font-size: 1rem; }

  .utk-about-panel--message .utk-about-panel__copy h2 {
    font-size: min(6.4vw, 2.2rem);
  }

  .utk-about-story .utk-about-concept__wordmark {
    margin-inline: 0;
  }

  .utk-about-story .utk-about-concept__wordmark-main {
    font-size: clamp(2.7rem, 14vw, 4.1rem);
  }
}

@media (max-width: 767px) {
  #utk-about-user-benefits-title {
    font-size: clamp(1.3rem, 5.6vw, 1.7rem);
    letter-spacing: 0;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .utk-about-panel__copy { padding-inline: 20px; }
  .utk-about-capacity { flex-direction: column; }
}

.utk-about-panel--message .utk-about-panel__copy > p.utk-about-message__copy {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
}

.utk-about-panel--message .utk-about-panel__copy > p.utk-about-message__name {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
}