/* 下層ページ共通のタイトル帯。タイトル・英字ラベル・パンくずだけを各ページで差し替えます。 */

.utk-page-hero {
  position: relative;
  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-page-hero__inner {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 207px;
  height: 207px;
  margin: 0;
  place-items: center;
}

.utk-page-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-page-hero__kicker {
  display: flex;
  margin: 0 0 2px;
  align-items: baseline;
  justify-content: center;
  gap: .45em;
  color: var(--utk-blue);
  font-family: var(--utk-font-rounded);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.utk-page-hero__kicker--pink {
  color: var(--utk-pink);
  letter-spacing: .18em;
}

.utk-page-hero__kicker-small {
  color: var(--utk-blue);
}

.utk-page-hero__wordmark {
  font-size: 1.15em;
  letter-spacing: .12em;
}

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

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

.utk-page-hero h1 {
  margin: 0 0 4px;
  color: var(--utk-ink);
  font-family: var(--utk-font-rounded);
  font-size: clamp(1.8rem, 3.2vw, 2.65rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .04em;
}

.utk-page-hero__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-page-hero__breadcrumb ol {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  gap: 7px;
  list-style: none;
}

.utk-page-hero__breadcrumb li + li::before {
  margin-right: 7px;
  color: #b9a79e;
  content: "›";
}

.utk-page-hero__breadcrumb a:hover,
.utk-page-hero__breadcrumb a:focus-visible {
  color: var(--utk-pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.utk-page-hero__breadcrumb a:focus-visible {
  outline: 3px solid var(--utk-yellow);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.utk-page-hero__road {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 207px;
}

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

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

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

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

.utk-page-hero__trees { opacity: .92; }
.utk-page-hero__road-surface { fill: #f8f3e8; }

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

.utk-page-hero__road-edge { stroke: #625850; stroke-width: 4; }
.utk-page-hero__road-sketch { stroke: rgb(117 103 93 / 48%); stroke-width: 1.8; }
.utk-page-hero__road-center { stroke: #d59b1c; stroke-width: 4; stroke-dasharray: 42 34; }

.utk-page-hero__vehicle {
  position: absolute;
  z-index: 2;
  right: auto;
  bottom: -2px;
  left: 0;
  width: clamp(150px, 12vw, 190px);
  opacity: 0;
  will-change: transform, opacity;
}

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

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

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

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

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

.utk-page-hero__wheel {
  position: absolute;
  z-index: 3;
  bottom: var(--utk-page-hero-wheel-y);
  width: var(--utk-page-hero-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-page-hero-wheel-spin .48s linear infinite;
}

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

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

.utk-page-hero__smoke {
  position: absolute;
  z-index: 1;
  right: -4%;
  bottom: 14%;
  width: clamp(9px, 1vw, 14px);
  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-page-hero-smoke 1.5s ease-out infinite;
}

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

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

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

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

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

@media (max-width: 700px) {
  .utk-page-hero__copy {
    padding-inline: 16px;
    transform: translateY(-15px);
  }

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

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

  .utk-page-hero__truck,
  .utk-page-hero__wheel,
  .utk-page-hero__smoke { animation: none; }

  .utk-page-hero__smoke { display: none; }
}

.no-js .utk-page-hero__vehicle {
  right: 2%;
  left: auto;
  opacity: .82;
  transform: none;
  animation: none;
}

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