/* =========================================================
   TOP 下半分（Figma: 01_top_修正 / y=7242〜17056）
   PC 幅 1440px のデザイン座標を、各セクションの上端からの相対値で配置する。
   ========================================================= */

/* ---------- 共通 ---------- */
.stone {
  position: relative;
  overflow: hidden;
}

/* 石壁の柄（Figma: ishikabe。コーポレートサイトの texture.svg と同じ並び）。
   assets/img/deco/stone.svg は黒をごく薄く重ねた長方形のタイルなので、背景色を変えるだけで白地・灰色地に使える */
.stone--white,
.stone--gray {
  background-image: url("../../img/deco/stone.svg");
  background-size: calc(621.6 * var(--uc)) calc(551.84 * var(--uc));
}

.stone--white {
  background-color: var(--color-white);
}

.stone--gray {
  background-color: #e6e6e6;
}

.section-heading {
  position: absolute;
  left: 50%;
  z-index: 4;
  translate: -50% 0;
  text-align: center;
}

.section-heading__label {
  display: grid;
  place-items: center;
  margin: 0;
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-en-cond);
  font-size: calc(80 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.wave-line {
  display: block;
  width: calc(360 * var(--u));
  height: calc(12 * var(--u));
  margin: calc(24 * var(--u)) auto 0;
  overflow: visible;
  /* 細かい波の縁取りがある、淡い水色の太い帯 */
  color: #8ec4e8;
  transform-origin: left center;
}

.wave-line path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7; /* viewBox（360 × 12）の単位。SVG ごと --u で伸縮する */
  stroke-linecap: butt;
}

.wave-line--light {
  color: #ccecff;
}

/* ---------- THANKS MESSAGE（ページ y=7242〜11084） ---------- */
.thanks {
  height: calc(3842 * var(--u));
  scroll-margin-top: var(--header-h);
}

.thanks__card {
  position: absolute;
  top: calc(160 * var(--u));
  left: calc(170 * var(--u));
  width: calc(1100 * var(--u));
  height: calc(3099 * var(--u));
  background: var(--color-white);
  box-shadow: 0 calc(24 * var(--u)) calc(72 * var(--u)) rgba(0, 0, 0, 0.14);
}

.thanks__label {
  position: absolute;
  top: calc(160 * var(--u));
  left: 50%;
  width: calc(731 * var(--u));
  height: calc(123 * var(--u));
  translate: -50% 0;
}

.thanks__wave {
  position: absolute;
  top: calc(466 * var(--u));
  left: 50%;
  margin: 0;
  translate: -50% 0;
}

.thanks__sub {
  position: absolute;
  top: calc(320 * var(--u));
  left: 50%;
  width: calc(900 * var(--u));
  margin: 0;
  translate: -50% 0;
  font-size: calc(29 * var(--u));
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: calc(56 * var(--u));
  text-align: center;
}

.thanks__sub span {
  display: block;
}

/* 「地域の宝 こども食堂」に付ける ※（下の注釈 .thanks__note と対応） */
.thanks__ref {
  margin-left: 0.1em;
  font-size: 0.6em;
  letter-spacing: 0;
  vertical-align: top;
}

/* ※ は、行を分けないときは文末（開きます。※）、SP で「開きます。」を次の行にするときは「こども食堂」の後ろに置く */
.thanks__ref--mid {
  display: none;
}

.thanks__body {
  position: absolute;
  top: calc(541 * var(--u));
  left: calc(28 * var(--u));
  width: calc(1044 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: calc(44 * var(--u));
  text-align: center;
}

.thanks__body p {
  margin: 0 0 calc(44 * var(--u));
}

.thanks__body p:last-child {
  margin-bottom: 0;
}

.thanks__body span {
  display: block;
  white-space: nowrap;
}

.thanks__captain {
  position: absolute;
  top: calc(2640 * var(--u));
  left: calc(363 * var(--u));
  width: calc(369 * var(--u));
  margin: 0;
  text-align: center;
}

.thanks__captain img {
  width: calc(369 * var(--u));
  height: calc(211 * var(--u));
  object-fit: cover;
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.14);
}

.thanks__captain figcaption {
  margin-top: calc(25 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: calc(33 * var(--u));
}

.thanks__captain figcaption span {
  display: block;
}

/* カードの外、下に置く注釈（Figma: 文字の上端 y=10539.6）。Figma では x=593 だが、これは短い文のときに中央になる位置のため、
   文の長さが変わっても中央に来るよう、中央そろえで置く */
.thanks__note {
  position: absolute;
  top: calc(3288 * var(--u));
  left: 50%;
  margin: 0;
  translate: -50% 0;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: calc(33 * var(--u));
  white-space: nowrap;
}

/* ---------- 雲〜SS TOWN（ページ y=11084〜13489） ---------- */
/*
 * 空と街の画像（2026-10-09 のデザイン。Figma: x=-13.9, y=10910.7, 1469.57 × 2612.18）は、幅 1469.57px までの画面では Figma の大きさのまま置く。
 * それより広い画面では、比率を保ったまま画面幅まで拡大する。拡大の基準は画像の上端で、
 * 横並びの画像の上端（画像の上から 2306.3）までが伸びた分だけ、このセクションを縦に伸ばして横並びの画像から下を押し下げる。
 */
.town {
  --town-image-width: max(calc(1469.57 * var(--u)), 100vw);
  --town-extra: calc(var(--town-image-width) * 2306.3 / 1469.57 - 2306.3 * var(--u));
  position: relative;
  height: calc(2405 * var(--u) + var(--town-extra));
  overflow: visible;
  /* 画像の下端は透明に抜けていき、石壁の柄に溶け込む（Figma と同じ見え方）。
     柄は下端に合わせて並べ、続くカードのセクションの柄とつなげる */
  background: var(--color-white) url("../../img/deco/stone.svg") left bottom / calc(621.6 * var(--uc)) calc(551.84 * var(--uc));
}

/* 雲（Figma: cloud。x=-465, y=9085, 2371 × 595）。広い画面では横だけ画面幅まで伸ばす */
.town__cloud {
  position: absolute;
  top: calc(-554 * var(--u));
  left: 50%;
  z-index: 5;
  width: max(calc(2371 * var(--u)), calc(100vw + 100 * var(--u)));
  height: calc(595 * var(--u));
  object-fit: fill;
  translate: -50% 0;
  will-change: transform;
}

/* 虹（Figma: 虹。x=-560, 2559 × 1279。SVG はぼかしの分だけ上下左右に大きい）。
   縦位置は 9/28 時点の座標から計算した値より 47 上げて、見本（reference/figma-top-0.5x.png）に合わせている */
.town__rainbow {
  position: absolute;
  top: calc(17 * var(--u));
  left: calc(-605.5 * var(--u));
  z-index: 2;
  width: calc(2650 * var(--u));
  height: calc(1355 * var(--u));
  transform-origin: center bottom;
  pointer-events: none;
}

.section-heading--town {
  top: calc(327 * var(--u));
  width: calc(680 * var(--u));
}

.section-heading--town .section-heading__label {
  width: calc(479 * var(--u));
  height: calc(122 * var(--u));
  margin: 0 auto;
}

.town__sub {
  margin: calc(40 * var(--u)) 0 0;
  color: var(--color-white);
  font-size: calc(28 * var(--u));
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: calc(53 * var(--u));
}

.town__sub span,
.town__lead span {
  display: block;
}

.section-heading--town .wave-line {
  margin-top: calc(13 * var(--u));
}

.town__lead {
  position: absolute;
  top: calc(657 * var(--u));
  left: 50%;
  z-index: 4;
  width: calc(1000 * var(--u));
  margin: 0;
  translate: -50% 0;
  color: var(--color-white);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: calc(40 * var(--u));
  text-align: center;
}

/* 空と街（Figma: Mask group。x=-124, y=10951, 1679 × 2306 のマスクの中に、画像を x=-13.9, y=10910.7, 1469.57 × 2612.18 で置く）。
   マスクの上端より上（画像の上から 1.54%）は見せず、マスクの下から 15% はだんだん透明にする（画像の高さに対して 76.58%〜89.82%） */
.town__image {
  position: absolute;
  top: calc(-173.3 * var(--u));
  left: calc(720.8 * var(--u));
  z-index: 1;
  width: var(--town-image-width);
  height: calc(var(--town-image-width) * 2612.18 / 1469.57);
  object-fit: cover;
  translate: -50% 0;
  -webkit-mask-image: linear-gradient(transparent 1.54%, #000 1.54%, #000 76.58%, transparent 89.82%);
  mask-image: linear-gradient(transparent 1.54%, #000 1.54%, #000 76.58%, transparent 89.82%);
}

/* 背景は透明にして、画像のすき間から下の街の画像と石壁の柄を見せる */
.town-carousel {
  position: absolute;
  top: calc(2133 * var(--u) + var(--town-extra));
  left: calc((100% - 100vw) / 2);
  z-index: 6;
  width: max(calc(1440 * var(--u)), 100vw);
  height: calc(268 * var(--u));
  overflow: hidden;
}

.town-carousel__track,
.town-carousel__set {
  display: flex;
  flex-shrink: 0;
  width: max-content;
}

.town-carousel__track {
  will-change: transform;
}

.town-carousel__set {
  gap: calc(41 * var(--u));
  padding-right: calc(41 * var(--u));
}

.town-carousel img {
  flex: 0 0 calc(430 * var(--u));
  width: calc(430 * var(--u));
  height: calc(268 * var(--u));
  object-fit: cover;
}

/* ---------- カード6枚（ページ y=13489〜15689）
   2026-10-08 のデザイン：見出しは「SS TOWN／コンテンツ一覧」の吹き出し、リード文はカードの下。
   公開状況は、ボタンに見えないよう、画像の右上の小さな札にする ---------- */
.town-cards {
  height: calc(2200 * var(--u));
}

.town-cards__callout {
  position: absolute;
  top: calc(77 * var(--u));
  left: calc(482 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(480 * var(--u));
  height: calc(130 * var(--u));
  margin: 0;
  border-radius: calc(12 * var(--u));
  background: var(--color-blue);
  color: var(--color-white);
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: calc(46 * var(--u));
  text-align: center;
}

.town-cards__callout::after {
  content: "";
  position: absolute;
  bottom: calc(-16 * var(--u));
  left: 50%;
  border-top: calc(16 * var(--u)) solid var(--color-blue);
  border-right: calc(12.5 * var(--u)) solid transparent;
  border-left: calc(12.5 * var(--u)) solid transparent;
  translate: -50% 0;
}

.town-cards__callout span {
  display: block;
}

.town-cards__lead {
  position: absolute;
  top: calc(1833 * var(--u));
  left: 50%;
  width: calc(1000 * var(--u));
  margin: 0;
  translate: -50% 0;
  font-size: calc(17 * var(--u));
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: calc(40 * var(--u));
  text-align: center;
}

.town-cards__lead span {
  display: block;
}

.town-cards__grid {
  position: absolute;
  inset: 0;
}

.town-cards__slider {
  position: absolute;
  inset: 0;
}

.town-card {
  position: absolute;
  display: block;
  width: calc(393 * var(--u));
  height: calc(400 * var(--u));
  overflow: hidden;
  border-radius: calc(12 * var(--u));
  background: var(--color-white);
  box-shadow: 0 calc(14 * var(--u)) calc(36 * var(--u)) rgba(0, 0, 0, 0.15);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
}

.town-card:nth-child(odd) {
  left: calc(295 * var(--u));
}

.town-card:nth-child(even) {
  left: calc(752 * var(--u));
}

.town-card:nth-child(1) { top: calc(275 * var(--u)); }
.town-card:nth-child(2) { top: calc(307 * var(--u)); }
.town-card:nth-child(3) { top: calc(803 * var(--u)); }
.town-card:nth-child(4) { top: calc(834 * var(--u)); }
.town-card:nth-child(5) { top: calc(1330 * var(--u)); }
.town-card:nth-child(6) { top: calc(1361 * var(--u)); }

.town-card__number {
  position: absolute;
  top: calc(32 * var(--u));
  left: calc(32 * var(--u));
  z-index: 2;
  display: grid;
  place-items: start center;
  width: calc(46 * var(--u));
  height: calc(62 * var(--u));
  padding-top: calc(6 * var(--u));
  background: var(--color-blue);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  color: var(--color-white);
  font-family: var(--font-en-cond);
  font-size: calc(26 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}

.town-card--locked .town-card__number {
  background: #666666;
}

.town-card__image {
  position: absolute;
  top: calc(32 * var(--u));
  left: 0;
  width: calc(392 * var(--u));
  height: calc(240 * var(--u));
  object-fit: contain;
}

.town-card__image--gate,
.town-card__image--history {
  left: calc(32 * var(--u));
  width: calc(329 * var(--u));
  object-fit: contain;
}

.town-card__image--gate {
  height: calc(236 * var(--u));
}

.town-card__image--history {
  height: calc(244 * var(--u));
}

.town-card__title,
.town-card__description,
.town-card__badge {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
}

.town-card__title {
  top: calc(279 * var(--u));
  font-family: var(--font-en-geo);
  font-size: calc(22 * var(--u));
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: calc(36 * var(--u));
}

.town-card__description {
  top: calc(320 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: calc(26 * var(--u));
}

.town-card__badge {
  top: calc(431 * var(--u));
  display: grid;
  place-items: center;
  width: calc(209 * var(--u));
  height: calc(46 * var(--u));
  border-radius: calc(23 * var(--u));
  background: #666666;
  color: var(--color-white);
  font-family: var(--font-en-geo);
  font-size: calc(18 * var(--u));
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}

.town-card--locked .town-card__badge {
  top: calc(309 * var(--u));
}

/* Figma では、右の列の準備中カードはバッジが左の列より少し下にある */
.town-card--locked:nth-child(even) .town-card__badge {
  top: calc(312.5 * var(--u));
}

/* 02 は画像が 01 より縦に長いため、Figma では文字が 8 下にある */
.town-card:nth-child(2) .town-card__title {
  top: calc(287 * var(--u));
}

.town-card:nth-child(2) .town-card__description {
  top: calc(328 * var(--u));
}

.town-card__badge--live {
  top: calc(32 * var(--u));
  right: calc(32 * var(--u));
  left: auto;
  width: auto;
  height: calc(32 * var(--u));
  padding: 0 calc(9 * var(--u));
  border-radius: 0;
  background: var(--color-blue);
  font-family: var(--font-ja);
  font-size: calc(14 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  translate: none;
}

.town-cards__button {
  position: absolute;
  top: calc(1993 * var(--u));
  left: calc(440 * var(--u));
  display: flex;
  align-items: center;
  width: calc(560 * var(--u));
  height: calc(140 * var(--u));
  padding-left: calc(116 * var(--u));
  border-radius: calc(70 * var(--u));
  background: var(--color-blue);
  box-shadow: 0 calc(16 * var(--u)) calc(32 * var(--u)) rgba(0, 71, 157, 0.24);
  color: var(--color-white);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.town-cards__button:hover,
.town-cards__button:focus-visible {
  background: var(--color-blue-logo);
  box-shadow: 0 calc(20 * var(--u)) calc(42 * var(--u)) rgba(0, 71, 157, 0.3);
}

.town-cards__button:active {
  background: #003f8d;
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 71, 157, 0.22);
}

.town-cards__arrow {
  position: absolute;
  right: calc(49 * var(--u));
  display: grid;
  place-items: center;
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-blue);
  font-family: sans-serif;
  font-size: calc(28 * var(--u));
  line-height: 1;
}

/* ---------- 画面右下の SS TOWN アバター ---------- */
.floating-avatar {
  position: fixed;
  right: calc(11 * var(--u));
  bottom: calc(71 * var(--u));
  z-index: 40;
  display: block;
  width: calc(144 * var(--u));
  color: var(--color-white);
  text-decoration: none;
}

/* fixed の配置と GSAP の登場・浮遊を別要素で受け持つ */
/* 入れ物を分けて、動きどうしがぶつからないようにしている（avatar.js）
   - .floating-avatar__motion：登場と、ふわふわ上下する動き
   - .floating-avatar__hop：マウスを乗せている間、吹き出しとキャラクターがいっしょに跳ねる動き */
.floating-avatar__motion {
  display: block;
  width: 100%;
  will-change: transform;
}

.floating-avatar__hop {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.floating-avatar__bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(132 * var(--u));
  height: calc(51.9 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--color-blue-logo);
  /* フッターや波など、同じ青の上に来たときも形が分かるよう、白い細いふちを付ける（影の 1 つめ） */
  box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--color-white), 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 71, 157, 0.18);
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: calc(16 * var(--u));
  text-align: center;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.floating-avatar__bubble::after {
  content: "";
  position: absolute;
  bottom: calc(-10.8 * var(--u));
  left: 50%;
  width: calc(12.2 * var(--u));
  height: calc(10.8 * var(--u));
  background: var(--color-blue-logo);
  clip-path: polygon(0 0, 100% 0, 58% 89%, 55% 96%, 50% 100%, 45% 96%, 42% 89%);
  translate: -50% 0;
  transition: background-color 0.3s ease;
}

.floating-avatar img {
  width: calc(144 * var(--u));
  height: calc(216 * var(--u));
  margin-top: calc(11.1 * var(--u));
  object-fit: contain;
}

.floating-avatar:hover .floating-avatar__bubble,
.floating-avatar:focus-visible .floating-avatar__bubble {
  background: var(--color-sky);
  box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--color-white), 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 71, 157, 0.3);
}

.floating-avatar:hover .floating-avatar__bubble::after,
.floating-avatar:focus-visible .floating-avatar__bubble::after {
  background: var(--color-sky);
}

body.is-loading .floating-avatar__motion {
  visibility: hidden;
  opacity: 0;
}

/* ---------- 2本目の帯＋TOPに戻る（ページ y=16088〜16588） ---------- */
.lower-end {
  height: calc(500 * var(--u));
}

.band--footer {
  top: 0;
}

.back-to-top {
  position: absolute;
  top: calc(380 * var(--u));
  left: calc(627.5 * var(--u));
  width: calc(185 * var(--u));
  height: calc(45 * var(--u));
  padding: 0;
  border: 0;
  border-radius: calc(6 * var(--u));
  background: var(--color-sky);
  color: var(--color-white);
  font: 700 calc(16 * var(--u))/1 var(--font-ja);
  cursor: pointer;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: #318dcc;
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 71, 157, 0.25);
}

.back-to-top:active {
  background: #2885c4;
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 71, 157, 0.2);
}

.back-to-top::before {
  content: "";
  position: absolute;
  top: calc(-10 * var(--u));
  left: 50%;
  border-right: calc(10 * var(--u)) solid transparent;
  border-bottom: calc(10 * var(--u)) solid var(--color-sky);
  border-left: calc(10 * var(--u)) solid transparent;
  translate: -50% 0;
}

/* ---------- フッター（波形を含むページ y=16558〜17056） ---------- */
.footer {
  position: relative;
  height: calc(468 * var(--u));
  background: var(--color-blue);
  color: var(--color-white);
}

.footer::before {
  content: "";
  position: absolute;
  top: calc(-30 * var(--u));
  left: 0;
  width: 100%;
  height: calc(31 * var(--u));
  /* 波 1 つ分（幅 154。真ん中が山）の絵を、画面の中央が山になるように横に並べる。画面幅に合わせて横に伸び縮みさせないので、どの幅でも同じ形の波になる */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 154 31' preserveAspectRatio='none'%3E%3Cpath d='M0 31V22C38 22 38 0 77 0S116 22 154 22V31z' fill='%2300479d'/%3E%3C/svg%3E") center bottom / calc(154 * var(--u)) 100% repeat-x;
}

.footer__anniversary {
  position: absolute;
  top: calc(105 * var(--u));
  left: calc(265 * var(--u));
  width: calc(203 * var(--u));
  height: calc(210 * var(--u));
}

.footer__divider {
  position: absolute;
  top: calc(105 * var(--u));
  left: calc(527 * var(--u));
  width: 1px;
  height: calc(203 * var(--u));
  background: rgba(255, 255, 255, 0.55);
}

.footer__nextwave {
  position: absolute;
  top: calc(140 * var(--u));
  left: calc(588 * var(--u));
  width: calc(577 * var(--u));
  height: auto;
}

.footer__links {
  position: absolute;
  top: calc(357 * var(--u));
  left: 0;
  width: 100%;
  height: calc(43 * var(--u));
}

.footer__social,
.footer__official {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  transition: filter 0.35s ease, opacity 0.35s ease, background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.footer__social:hover,
.footer__social:focus-visible {
  filter: drop-shadow(0 calc(8 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.24));
}

.footer__social:active {
  opacity: 0.82;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.18));
}

/* LINE の公式アイコンは、影などの効果を付けることがガイドラインで禁止されているため、押したときも見た目を変えない */
.footer__line:hover,
.footer__line:focus-visible,
.footer__line:active {
  opacity: 1;
  filter: none;
}

.footer__social svg,
.footer__social img {
  width: 100%;
  height: 100%;
}

.footer__youtube {
  left: calc(272 * var(--u));
  width: calc(44 * var(--u));
  height: calc(30 * var(--u));
}

.footer__instagram {
  left: calc(352 * var(--u));
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
}

.footer__line {
  left: calc(420 * var(--u));
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
}

.footer__official {
  left: calc(488 * var(--u));
  display: grid;
  place-items: center;
  width: calc(237 * var(--u));
  height: calc(43 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: calc(22 * var(--u));
  color: var(--color-white);
  font-size: calc(12 * var(--u));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.footer__official:hover,
.footer__official:focus-visible {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-blue);
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.18);
}

.footer__official:active {
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-blue);
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.14);
}

.footer__copyright {
  position: absolute;
  top: calc(368 * var(--u));
  right: calc(280 * var(--u));
  font-family: var(--font-en-cond);
  font-size: calc(10 * var(--u));
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: calc(20 * var(--u));
}

@media (prefers-reduced-motion: reduce) {
  .floating-avatar__bubble,
  .floating-avatar__bubble::after,
  .town-cards__button,
  .back-to-top,
  .footer__social,
  .footer__official {
    transition: none;
  }

  body.is-loading .floating-avatar__motion {
    visibility: visible;
    opacity: 1;
  }
}