/* ============================================================
   動くイラストのスタイル（外壁塗装の C）の見た目と動き（iso.css）

   - base.css とテーマの変数の上に、方眼紙の地・等角図のイラスト・流れ続ける写真の帯・
     ゆれるボタンなどを足す。対象は <html class="iso"> のページだけ
   - 動きは <html> の3つの印で切り替える（美容室の D と同じ考え方。止める設定も同じ pm-motion を使う）
       .iso-js    … head の短いスクリプトが付ける。ヒーローの組み立ての演出を、最初の描画から動かす
       .iso-live  … iso.js が動いている。スクロールで出す前の「隠した状態」と、流れ続ける動きは、この印があるときだけ
       .is-still  … 動きを止めている（OS の「視差効果を減らす」か、ページの「動きを止める」ボタン）
     JavaScript が動かないときと .is-still のときは、すべて最初から見える止まった表示になる
   - 色はテーマの変数（--c-*・--iso-*）から取る。値は themes/paint.css の paint-c
   - イラストの SVG は scripts/iso.py が作る。色は下の「イラストの色」のクラス名で決める
   ============================================================ */

.iso {
  --iso-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --iso-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --iso-gap: 20px;
  scroll-padding-top: 76px;
}

/* 方眼紙の地（14px のマス目） */
.iso body {
  overflow-x: clip;
  background-color: var(--iso-paper);
  background-image:
    linear-gradient(var(--iso-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--iso-grid) 1px, transparent 1px);
  background-size: 14px 14px;
}

.iso .section,
.iso .cta--top {
  position: relative;
  background: transparent;
}

.iso .section {
  padding-block: clamp(48px, 7vw, 88px);
}

/* ============ イラストの色（scripts/iso.py のクラス） ============ */
.iso-svg {
  display: block;
  overflow: visible;
}

.iso-svg * {
  vector-effect: non-scaling-stroke;
}

.iso-svg :is(polygon, path, rect, ellipse, circle, line) {
  stroke: var(--iso-ink);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.iso-svg .f-none { fill: none; }
.iso-svg .f-paper { fill: var(--iso-paper); }
.iso-svg .f-ink { fill: var(--iso-ink); }
.iso-svg .f-yellow { fill: var(--iso-yellow); }
.iso-svg .f-yellow-d { fill: var(--iso-yellow-d); }
.iso-svg .f-coral { fill: var(--iso-coral); }
.iso-svg .f-mint { fill: var(--iso-mint); }
.iso-svg .f-sky { fill: var(--iso-sky); }
.iso-svg .f-cream { fill: var(--iso-cream); }
.iso-svg .f-lawn { fill: var(--iso-lawn); }
.iso-svg .f-lawn-l { fill: var(--iso-lawn-l); }
.iso-svg .f-lawn-r { fill: var(--iso-lawn-r); }
.iso-svg .f-concrete { fill: var(--iso-concrete); }
.iso-svg .f-concrete-d { fill: var(--iso-concrete-d); }
.iso-svg .f-found { fill: var(--iso-concrete-d); }
.iso-svg .f-road { fill: var(--iso-road); }
.iso-svg .f-road-d { fill: var(--iso-road-d); }
.iso-svg .f-roof { fill: var(--iso-roof); }
.iso-svg .f-roof-d { fill: var(--iso-roof-d); }
.iso-svg .f-roof-dd { fill: var(--iso-roof-dd); }
.iso-svg .f-glass { fill: var(--iso-glass); }
.iso-svg .f-glass-a { fill: rgba(191, 227, 255, 0.6); }
.iso-svg .f-sill { fill: var(--iso-paper); }
.iso-svg .f-door { fill: var(--iso-door); }
.iso-svg .f-tree { fill: var(--iso-tree); }
.iso-svg .f-skin { fill: var(--iso-skin); }
.iso-svg .f-can { fill: #f4f6f8; }
.iso-svg .f-overall { fill: #e9eef5; }
.iso-svg .f-stain { fill: rgba(60, 50, 40, 0.18); }
.iso-svg .f-shadow { fill: rgba(31, 35, 40, 0.14); }
/* 町の建物（上の面は明るく、右の面は暗く） */
.iso-svg .f-sky-t { fill: #d6ebff; }
.iso-svg .f-sky-d { fill: #4f9de8; }
.iso-svg .f-cream-t { fill: #fffaf0; }
.iso-svg .f-cream-d { fill: #f0d9a8; }
.iso-svg .f-mint-t { fill: #c9f0df; }
.iso-svg .f-mint-d { fill: #3fb88a; }
.iso-svg .f-coral-t { fill: #ffd6c8; }
.iso-svg .f-coral-d { fill: #ec7552; }
.iso-svg .iso-lid--1 { fill: var(--iso-coral); }
.iso-svg .iso-lid--2 { fill: var(--iso-mint); }
.iso-svg .iso-lid--3 { fill: var(--iso-sky); }

.iso-svg .s-none { stroke: none; }
.iso-svg .s-thin { stroke-width: 1.5; }
.iso-svg .s-thick { stroke-width: 4; }
.iso-svg .s-grass { stroke: #4f9f47; stroke-width: 1.5; }
.iso-svg .s-crack { stroke-width: 1.5; }
.iso-svg .s-glint { stroke: #ffffff; stroke-width: 2.5; }
.iso-svg .s-roofline { stroke: var(--iso-roof-dd); stroke-width: 1.5; }
.iso-svg .s-ridge { stroke-width: 3.5; }
.iso-svg .s-pole { stroke-width: 3; }
.iso-svg .s-pole--thin { stroke-width: 2; }
.iso-svg .s-trunk { stroke: var(--iso-trunk); stroke-width: 5; }
.iso-svg .s-arm { stroke-width: 3; }
.iso-svg .s-dash { stroke: #ffffff; stroke-width: 2; stroke-dasharray: 6 7; }
.iso-svg .s-win { stroke: rgba(31, 35, 40, 0.5); stroke-width: 3; stroke-linecap: butt; }
.iso-svg .s-roller { stroke: var(--iso-coral); stroke-width: 9; }
.iso-svg .s-check { stroke: #1f8f58; stroke-width: 4; }

/* ヒーローの壁：色は iso.js が塗る。止まった表示では、塗り終えた家（1色目）にする */
.iso-svg .iso-wall { fill: #fff1cf; }
.iso-svg .iso-wall-side { fill: #f2dcae; }
.iso-svg [data-strips] rect { fill: transparent; }
.iso-svg .iso-stain { display: none; }
.iso-svg .is-before .iso-stain { display: inline; }
.iso-svg .iso-roller { display: none; }
.iso-svg .iso-roller__head { fill: var(--roller, #f2dcae); }

/* 町の地図 */
.iso-svg .iso-area {
  fill: rgba(255, 143, 107, 0.12);
  stroke: var(--iso-coral);
  stroke-width: 2.5;
  stroke-dasharray: 9 7;
}

.iso-svg .iso-ripple {
  fill: none;
  stroke: var(--iso-coral);
  stroke-width: 2;
  opacity: 0;
}

/* ============ ヘッダー（左上の屋号・右上のつり下げの札・丸いボタン） ============ */
.iso-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 0;
}

.iso-logo {
  position: absolute;
  top: 14px;
  left: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 2px solid var(--iso-ink);
  border-radius: 999px;
  background: var(--iso-paper);
  box-shadow: 3px 3px 0 var(--iso-ink);
  color: var(--iso-ink);
  font-family: var(--font-label);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform 0.4s var(--iso-ease), opacity 0.3s;
}

.iso-logo__mark {
  width: 34px;
  height: 34px;
}

.iso-logo__house {
  fill: var(--iso-paper);
  stroke: var(--iso-ink);
  stroke-width: 3;
  stroke-linejoin: round;
}

.iso-logo__drip {
  fill: var(--iso-yellow);
  stroke: var(--iso-ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.iso-tabs {
  position: absolute;
  top: 0;
  right: calc(var(--gutter) + 116px);
  display: none;
  gap: 8px;
  transition: transform 0.4s var(--iso-ease);
}

.iso-tab {
  display: grid;
  place-items: center;
  width: 118px;
  min-height: 58px;
  padding: 10px 8px 14px;
  border: 2px solid var(--iso-ink);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: 3px 3px 0 var(--iso-ink);
  color: var(--iso-ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform 0.2s var(--iso-ease), padding 0.2s var(--iso-ease);
}

.iso-tab--line {
  background: var(--iso-yellow);
}

.iso-tab--tel {
  background: var(--iso-sky);
}

.iso-tab:hover {
  padding-top: 18px;
}

.iso-fab {
  position: absolute;
  top: 12px;
  right: var(--gutter);
  display: none;
  gap: 8px;
}

.iso-live .iso-fab {
  display: flex;
}

.iso-round {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 2px solid var(--iso-paper);
  border-radius: 50%;
  background: var(--iso-ink);
  box-shadow: 0 0 0 2px var(--iso-ink);
  color: var(--iso-paper);
  cursor: pointer;
}

.iso-round:focus-visible {
  outline-offset: 4px;
}

.iso-burger__lines,
.iso-burger__lines::before,
.iso-burger__lines::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--iso-ease), background-color 0.2s;
}

.iso-burger__lines {
  position: relative;
}

.iso-burger__lines::before,
.iso-burger__lines::after {
  content: "";
  position: absolute;
  left: 0;
}

.iso-burger__lines::before {
  top: -7px;
}

.iso-burger__lines::after {
  top: 7px;
}

.is-nav-open .iso-burger__lines {
  background-color: transparent;
}

.is-nav-open .iso-burger__lines::before {
  transform: translateY(7px) rotate(45deg);
}

.is-nav-open .iso-burger__lines::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* 動きを止める・戻す（止めているあいだは再生の三角） */
.iso-motion__icon {
  position: relative;
  width: 14px;
  height: 14px;
}

.iso-motion__icon::before,
.iso-motion__icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 14px;
  border-radius: 1px;
  background: currentColor;
}

.iso-motion__icon::before {
  left: 1px;
}

.iso-motion__icon::after {
  right: 1px;
}

.is-still .iso-motion__icon::before {
  left: 2px;
  width: 12px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.is-still .iso-motion__icon::after {
  display: none;
}

/* ページ内のメニュー（丸いボタンで開く、画面いっぱいの方眼紙） */
.iso-nav {
  display: none;
}

.is-nav-open .iso-nav {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 88px var(--gutter) 40px;
  background-color: var(--iso-paper);
  background-image:
    linear-gradient(var(--iso-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--iso-grid) 1px, transparent 1px);
  background-size: 14px 14px;
}

.iso-nav__list {
  display: grid;
  gap: 12px;
  width: min(100%, 26rem);
}

.iso-nav__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: 2px solid var(--iso-ink);
  border-radius: 14px;
  background: var(--iso-paper);
  box-shadow: 4px 4px 0 var(--iso-ink);
  color: var(--iso-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.iso-nav__list a span {
  color: var(--c-accent);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 400;
}

.iso-nav__list a:hover {
  background: var(--iso-yellow);
}

/* ============ 1. ヒーロー ============ */
.iso .iso-hero {
  position: relative;
  display: block;
  padding-bottom: clamp(24px, 5vw, 56px);
  background: transparent;
  color: var(--iso-ink);
}

.iso-hero__stage {
  position: relative;
  width: min(100%, 1180px);
  margin-inline: auto;
  padding: 76px var(--gutter) 0;
  overflow-x: clip;
}

/* 絵と屋号の入れ物。スマホでは絵を少し大きくして、左右の何もない角を切る */
.iso-hero__scene {
  position: relative;
  width: 116%;
  margin: 104px 0 0 -8%;
}

.iso-scene {
  width: 100%;
  height: auto;
}

/* 屋号：家の正面の壁と同じ向きに傾けて、絵の左上の空に置く。白い縁と黄色の影で読みやすくする */
.iso .iso-hero__title {
  position: absolute;
  top: -92px;
  left: 11%;
  z-index: 2;
  margin: 0;
  color: var(--iso-ink);
  font-size: clamp(2rem, 9.6vw, 2.75rem);
  line-height: 1.08;
  pointer-events: none;
}

.iso-hero__slant {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: skewY(30deg);
  transform-origin: 0 0;
}

.iso-hero__line {
  display: block;
  text-shadow:
    3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
    2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
    6px 6px 0 var(--iso-yellow), 7px 7px 0 var(--iso-yellow);
}

.iso-hero__line + .iso-hero__line {
  margin-left: 0.5em;
}

.iso .iso-hero__card {
  position: relative;
  z-index: 3;
  color: var(--hero-text);
  width: min(100% - var(--gutter) * 2, 26rem);
  max-width: none;
  margin: -8px auto 0;
  padding: 18px 22px 20px;
  border: 2px solid var(--iso-ink);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--iso-yellow);
}

.iso .hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
}

.iso .hero__eyebrow::before {
  content: "";
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.iso .hero__lead {
  margin-top: 0.5em;
  font-size: clamp(1rem, 3.4vw, 1.125rem);
  font-weight: 700;
  line-height: 1.7;
}

/* ============ 2・9. 連絡ボタン（押すと沈む、厚みのあるボタン） ============ */
.iso .cta__lead {
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.iso .cta__buttons {
  gap: 18px;
  margin-top: 20px;
}

.iso .btn {
  position: relative;
  border-color: var(--iso-ink);
  box-shadow: 0 6px 0 var(--iso-ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s;
}

.iso .btn:hover {
  filter: none;
  transform: translateY(2px);
  box-shadow: 0 4px 0 var(--iso-ink);
}

.iso .btn:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 var(--iso-ink);
}

.iso .btn--secondary:hover {
  background: var(--iso-cream);
}

.iso .cta__note {
  color: var(--c-muted);
}

/* ============ 3〜8. 見出し（英字は家の形の札） ============ */
.iso .section__head {
  margin-bottom: clamp(28px, 5vw, 52px);
}

.iso .section__label {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  min-width: 6.4em;
  min-height: 3.6em;
  margin-bottom: 14px;
  padding: 1.25em 1em 0.45em;
  color: var(--iso-ink);
  --label-fill: var(--iso-yellow);
}

.iso .section__label::before,
.iso .section__label::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%);
}

.iso .section__label::before {
  inset: 0;
  background: var(--iso-ink);
}

.iso .section__label::after {
  inset: 3px 2.5px 2.5px;
  background: var(--label-fill);
}

.iso .menu .section__label { --label-fill: var(--iso-coral); }
.iso .works .section__label { --label-fill: var(--iso-mint); }
.iso .news .section__label { --label-fill: var(--iso-sky); }
.iso .access .section__label { --label-fill: var(--iso-yellow); }
.iso .contact .section__label { --label-fill: var(--iso-coral); }

.iso .section__title {
  color: var(--iso-ink);
}

/* ============ 3. 何をしているのか ============ */
.iso .about__intro {
  gap: clamp(28px, 5vw, 56px);
}

.iso .about__media {
  border: 2px solid var(--iso-ink);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--iso-mint);
}

.iso .about__text p:not(.about__sign) {
  line-height: 2;
}

.iso .about__sign {
  display: inline-block;
  padding: 2px 12px;
  border: 2px solid var(--iso-ink);
  border-radius: 999px;
  background: var(--iso-paper);
  color: var(--iso-ink);
  font-weight: 700;
}

.iso .points {
  gap: 36px var(--gap);
  margin-top: clamp(44px, 8vw, 72px);
}

.iso .point {
  position: relative;
  padding: 0 22px 22px;
  border: 2px solid var(--iso-ink);
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--iso-ink);
}

.iso-point__icon {
  display: block;
  margin: 0 -22px 18px;
  padding: 22px 0 12px;
  border-bottom: 2px solid var(--iso-ink);
  border-radius: 14px 14px 0 0;
  background: var(--iso-yellow);
}

.iso .point:nth-child(2) .iso-point__icon {
  background: var(--iso-mint);
}

.iso .point:nth-child(3) .iso-point__icon {
  background: var(--iso-sky);
}

.iso-point__icon svg {
  width: auto;
  height: 88px;
  margin-inline: auto;
}

.iso .point__num {
  position: absolute;
  top: -16px;
  left: 16px;
  box-shadow: 3px 3px 0 var(--iso-ink);
}

.iso .point__title {
  margin-top: 0;
}

/* ============ 4. サービスと料金（色見本のカード） ============ */
.iso .menu__list {
  counter-reset: chip;
}

.iso .menu-item {
  --chip: var(--iso-yellow);
  position: relative;
  counter-increment: chip;
  padding: 40px 20px 20px;
  border: 2px solid var(--iso-ink);
  background: linear-gradient(var(--chip) 0 18px, var(--iso-ink) 18px 20px, var(--iso-paper) 20px);
  box-shadow: 5px 5px 0 var(--iso-ink);
  transition: translate 0.25s var(--iso-ease), box-shadow 0.25s var(--iso-ease);
}

.iso .menu-item:nth-child(6n + 2) { --chip: var(--iso-coral); }
.iso .menu-item:nth-child(6n + 3) { --chip: var(--iso-mint); }
.iso .menu-item:nth-child(6n + 4) { --chip: var(--iso-sky); }
.iso .menu-item:nth-child(6n + 5) { --chip: var(--iso-cream); }

.iso .menu-item:nth-child(6n) {
  --chip: var(--iso-yellow);
  background:
    linear-gradient(90deg, var(--iso-yellow) 0 25%, var(--iso-coral) 25% 50%, var(--iso-mint) 50% 75%, var(--iso-sky) 75%) 0 0 / 100% 18px no-repeat,
    linear-gradient(var(--iso-ink) 18px 20px, var(--iso-paper) 20px);
}

.iso .menu-item::after {
  content: "No." counter(chip, decimal-leading-zero);
  content: "No." counter(chip, decimal-leading-zero) / "";
  position: absolute;
  top: 30px;
  right: 14px;
  color: var(--c-muted);
  font-family: var(--font-num);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

.iso .menu-item__name {
  padding-right: 3.5em;
}

.iso .menu-item__desc {
  margin-top: 4px;
}

.iso .menu-item__price small {
  font-family: var(--font-body);
  font-weight: 700;
}

.iso .menu-item__price {
  align-self: end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px dashed var(--c-line);
}

@media (hover: hover) {
  .iso .menu-item:hover {
    translate: -2px -3px;
    box-shadow: 8px 9px 0 var(--iso-ink);
  }
}

/* ============ 5. 実績（施工の前と後の組が、横に流れ続ける） ============ */
.iso-ticker {
  overflow: hidden;
  padding-block: 6px 18px;
}

.iso-ticker__track {
  display: flex;
}

.iso .iso-ticker__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--iso-gap);
  width: 100%;
  margin: 0;
  padding-inline: var(--gutter);
}

.iso-pair {
  display: grid;
  flex: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 520px);
  padding: 12px 12px 14px;
  border: 2px solid var(--iso-ink);
  border-radius: 16px;
  background: var(--iso-paper);
  box-shadow: 5px 5px 0 var(--iso-ink);
}

.iso-pair figure {
  min-width: 0;
}

.iso .iso-pair .work__media {
  aspect-ratio: 4 / 3;
  border: 2px solid var(--iso-ink);
  border-radius: 10px;
}

.iso-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  padding: 1px 8px 2px;
  border-radius: 4px;
  background: var(--iso-ink);
  color: #ffffff;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}

.iso-tag--after {
  border: 2px solid var(--iso-ink);
  background: var(--iso-yellow);
  color: var(--iso-ink);
}

.iso .iso-pair figcaption {
  margin-top: 8px;
  color: var(--c-muted);
  font-size: 0.8125rem;
}

/* 色見本の帯（飾り） */
.iso-ticker--chips {
  padding-block: 10px 6px;
}

.iso .iso-ticker--chips .iso-ticker__list {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: auto;
  gap: 14px;
  padding-inline: 0 14px;
}

.iso-chip {
  flex: none;
  width: 104px;
  overflow: hidden;
  border: 2px solid var(--iso-ink);
  border-radius: 10px;
  background: var(--iso-paper);
  box-shadow: 3px 3px 0 var(--iso-ink);
}

.iso-chip::before {
  content: "";
  display: block;
  height: 56px;
  border-bottom: 2px solid var(--iso-ink);
  background: var(--chip);
}

.iso-chip span {
  display: block;
  padding: 4px 10px 6px;
  color: var(--iso-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 流れている表示（iso.js が並びの写しを足し、1周ぶんの幅 --shift と時間 --dur を決める） */
.iso-live:not(.is-still) .iso-ticker__track {
  width: max-content;
  animation: iso-marquee var(--dur, 60s) linear infinite;
}

.iso-live:not(.is-still) .iso-ticker--rev .iso-ticker__track {
  animation-direction: reverse;
}

.iso-live:not(.is-still) .iso-ticker__list {
  flex: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: auto;
  padding-inline: 0 var(--iso-gap);
}

.iso-live:not(.is-still) .iso-ticker--chips .iso-ticker__list {
  padding-inline: 0 14px;
}

.iso-live:not(.is-still) .iso-pair {
  width: clamp(300px, 80vw, 500px);
}

.iso-ticker:hover .iso-ticker__track,
.iso-ticker:focus-within .iso-ticker__track {
  animation-play-state: paused;
}

.iso-ticker__clone {
  display: none;
}

.iso-live:not(.is-still) .iso-ticker__clone {
  display: flex;
}

@keyframes iso-marquee {
  to {
    transform: translateX(var(--shift, -50%));
  }
}

/* ============ 6. お知らせ（方眼の上に置いた墨の板） ============ */
.iso .news {
  background: transparent;
}

.iso-board {
  --s-bg: var(--iso-board-bg);
  --s-text: var(--iso-board-text);
  --s-muted: var(--iso-board-muted);
  --s-accent: var(--iso-board-accent);
  --s-line: var(--iso-board-line);
  max-width: 54rem;
  margin-inline: auto;
  padding: clamp(8px, 2vw, 16px) clamp(20px, 4vw, 40px);
  border: 2px solid var(--iso-ink);
  border-radius: 18px;
  background: var(--s-bg);
  box-shadow: 8px 8px 0 var(--iso-sky);
  color: var(--s-text);
}

.iso .news__list {
  border-top: 0;
}

.iso .news-item:last-child {
  border-bottom: 0;
}

.iso .news-item__date {
  white-space: nowrap;
}

.iso .news-item__date::before {
  content: "▶ ";
  content: "▶ " / "";
  color: var(--iso-yellow);
  font-size: 0.75em;
}

.iso .news-item__tag {
  border-radius: 4px;
}

/* ============ 7. 対応エリア（等角図の町） ============ */
.iso .map-ph {
  display: grid;
  place-items: center;
  padding: 16px 12px 52px;
  border: 2px solid var(--iso-ink);
  border-radius: 16px;
  background: #eef7ff;
  box-shadow: 6px 6px 0 var(--iso-ink);
}

.iso-town {
  position: absolute;
  top: 14px;
  left: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 66px);
}

.iso .map-ph__label {
  border: 2px solid var(--iso-ink);
  border-radius: 10px;
  background: var(--iso-paper);
  color: var(--iso-ink);
}

.iso .access__list li::before {
  top: 0.55em;
  width: 0.75em;
  height: 0.75em;
  border: 2px solid var(--iso-ink);
  border-radius: 3px;
  background: var(--iso-yellow);
}

/* ============ 8. 営業時間・連絡先 ============ */
.iso .info {
  padding: 6px clamp(18px, 4vw, 32px);
  border: 2px solid var(--iso-ink);
  border-radius: 16px;
  background: var(--iso-paper);
  box-shadow: 6px 6px 0 var(--iso-yellow);
}

.iso .info__row {
  border-bottom: 2px dashed var(--c-line);
}

.iso .info__row:last-child {
  border-bottom: 0;
}

/* ============ 9. 下の連絡帯（グラデーションの上で、ボタンがゆっくり上下する） ============ */
.iso .cta--bottom {
  position: relative;
  overflow: hidden;
  border-block: 2px solid var(--iso-ink);
  background-color: var(--iso-sky);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px),
    var(--iso-grad);
  background-size: 14px 14px, 14px 14px, auto;
  --c-focus: var(--iso-ink);
}

.iso .cta--bottom .cta__lead {
  position: relative;
  z-index: 1;
  letter-spacing: 0.06em;
}

.iso .cta--bottom .cta__buttons,
.iso .cta--bottom .cta__note {
  position: relative;
  z-index: 1;
}

.iso .cta--bottom .cta__note {
  color: var(--iso-ink);
}

.iso-cta__deco {
  position: absolute;
  bottom: 18px;
  left: max(16px, calc(50% - 600px));
  display: none;
  width: 170px;
}

/* ============ フッター ============ */
.iso .site-footer {
  position: relative;
  padding-top: 52px;
}

.iso .site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 10px;
  background: linear-gradient(90deg, var(--iso-yellow) 0 25%, var(--iso-coral) 25% 50%, var(--iso-mint) 50% 75%, var(--iso-sky) 75%);
}

.iso .footer__name {
  font-family: var(--font-label);
  font-weight: 400;
}

/* ============ ページの先頭へ（ローラーの形。読み進めると右下に出る） ============ */
.iso-top {
  position: fixed;
  right: 10px;
  bottom: 14px;
  z-index: 40;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 64px;
  color: var(--iso-ink);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.3s, transform 0.4s var(--iso-spring), visibility 0.3s;
}

.iso-top.is-shown,
.iso:not(.iso-live) .iso-top {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.iso-top__roller {
  width: 42px;
  height: auto;
  overflow: visible;
}

.iso-top__head {
  fill: var(--iso-yellow);
  stroke: var(--iso-ink);
  stroke-width: 3;
}

.iso-top__frame {
  fill: none;
  stroke: var(--iso-ink);
  stroke-width: 4;
  stroke-linejoin: round;
}

.iso-top__grip {
  fill: var(--iso-coral);
  stroke: var(--iso-ink);
  stroke-width: 3;
}

.iso-top__label {
  padding: 0 8px;
  border: 2px solid var(--iso-ink);
  border-radius: 999px;
  background: var(--iso-paper);
  font-family: var(--font-label);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

/* ============ 画面幅ごとの切り替え ============ */
@media (min-width: 560px) {
  .iso .cta__buttons {
    grid-template-columns: repeat(2, minmax(0, 18rem));
  }
}

@media (min-width: 768px) {
  .iso-tabs {
    display: flex;
  }

  .iso-logo {
    top: 18px;
    padding-right: 16px;
    font-size: 1.125rem;
  }

  .iso-logo__mark {
    width: 40px;
    height: 40px;
  }

  .iso-hero__stage {
    padding: 84px var(--gutter) 24px;
  }

  .iso-hero__scene {
    width: min(100%, 780px);
    margin: 0 auto;
  }

  .iso .iso-hero__title {
    top: 6%;
    left: 0;
    font-size: clamp(2.75rem, 6.4vw, 4.25rem);
  }

  .iso .iso-hero__card {
    position: absolute;
    right: var(--gutter);
    bottom: 24px;
    width: min(46%, 25rem);
    margin: 0;
  }

  .iso .about__intro {
    align-items: center;
  }

  .iso .news-item {
    grid-template-columns: 9.5em 6.5em minmax(0, 1fr);
  }

  .iso-cta__deco {
    display: block;
  }
}

@media (min-width: 960px) {
  .iso .point:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 58px;
    right: calc(-1 * var(--gap) / 2 - 14px);
    z-index: 1;
    width: 28px;
    height: 28px;
    border: 2px solid var(--iso-ink);
    border-radius: 50%;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 5.5 15.5 12 9 18.5 7.6 17.1 12.7 12 7.6 6.9Z'/%3E%3C/svg%3E") center / 18px no-repeat,
      var(--iso-ink);
  }

  .iso .menu__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .iso .iso-hero__title {
    top: 10%;
    left: -17%;
  }
}

/* ============ 動き ============ */

/* 開いたときの組み立て（地面 → 家 → 足場 → 小物 → 屋号） */
.iso-js:not(.is-still) .iso-in {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: iso-rise 0.8s var(--iso-spring) both;
}

.iso-js:not(.is-still) .iso-in--ground {
  animation-name: iso-drop;
  animation-delay: 0.05s;
}

.iso-js:not(.is-still) .iso-in--house {
  animation-delay: 0.35s;
}

.iso-js:not(.is-still) .iso-in--scaffold {
  animation-name: iso-fade-up;
  animation-delay: 0.75s;
}

.iso-js:not(.is-still) .iso-in--prop {
  animation-name: iso-pop;
  animation-delay: 0.95s;
}

.iso-js:not(.is-still) .iso-hero__line {
  animation: iso-slide 0.8s var(--iso-spring) both;
  animation-delay: 1.05s;
}

.iso-js:not(.is-still) .iso-hero__line + .iso-hero__line {
  animation-delay: 1.18s;
}

.iso-js:not(.is-still) .iso-hero__card {
  animation: iso-fade-up 0.7s var(--iso-ease) 1.3s both;
}

@keyframes iso-drop {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
}

@keyframes iso-rise {
  from {
    opacity: 0;
    transform: scaleY(0.1);
  }
}

@keyframes iso-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes iso-pop {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
}

@keyframes iso-slide {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
}

/* ずっと続く動き（iso.js が動いていて、止めていないときだけ） */
.iso-live:not(.is-still) .iso-roller {
  display: inline;
}

.iso-live:not(.is-still) .iso-hero__slant {
  animation: iso-bob 2.6s ease-in-out infinite alternate;
}

.iso-live:not(.is-still) .iso-cloud {
  animation: iso-drift 18s ease-in-out infinite alternate;
}

.iso-live:not(.is-still) .iso-cloud--2 {
  animation-duration: 24s;
  animation-direction: alternate-reverse;
}

.iso-live:not(.is-still) .iso-cloud--3 {
  animation-duration: 30s;
}

.iso-live:not(.is-still) .iso-worker__arm {
  transform-box: fill-box;
  transform-origin: 100% 100%;
  animation: iso-brush 0.8s ease-in-out infinite alternate;
}

.iso-live:not(.is-still) .iso-pin__body {
  animation: iso-bob 1.4s ease-in-out infinite alternate;
}

.iso-live:not(.is-still) .iso-ripple {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: iso-ripple 2.4s ease-out infinite;
}

.iso-live:not(.is-still) .iso-area {
  animation: iso-ants 1.6s linear infinite;
}

.iso-live:not(.is-still) .iso-bob {
  animation: iso-bob-small 1.8s ease-in-out infinite alternate;
}

.iso-live:not(.is-still) .iso-bob:hover,
.iso-live:not(.is-still) .iso-bob:focus-within {
  animation-play-state: paused;
}

.iso-live:not(.is-still) .iso-top.is-shown .iso-top__roller {
  animation: iso-bob-small 1.2s ease-in-out infinite alternate;
}

@keyframes iso-bob {
  to {
    translate: 0 -10px;
  }
}

@keyframes iso-bob-small {
  to {
    translate: 0 -6px;
  }
}

@keyframes iso-drift {
  to {
    translate: 48px 0;
  }
}

@keyframes iso-brush {
  from {
    rotate: -14deg;
  }

  to {
    rotate: 16deg;
  }
}

@keyframes iso-ripple {
  from {
    opacity: 0.9;
    scale: 0.3;
  }

  to {
    opacity: 0;
    scale: 1.4;
  }
}

@keyframes iso-ants {
  to {
    stroke-dashoffset: -32;
  }
}

/* スクロールで出す（iso.js が動いていて、止めていないときだけ隠す） */
.iso-live:not(.is-still) [data-reveal] {
  transition:
    opacity 0.6s var(--iso-ease),
    transform 0.75s var(--iso-spring);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.iso-live:not(.is-still) [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
}

/* メニューを開いたとき、項目を順に出す */
.iso-live:not(.is-still).is-nav-open .iso-nav__list li {
  animation: iso-fade-up 0.5s var(--iso-spring) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}

/* 読み進めると、左上の屋号と右上の札は上へ隠れる（丸いボタンは残る） */
.iso-header.is-scrolled .iso-logo,
.iso-header.is-scrolled .iso-tabs {
  transform: translateY(-150%);
}

.iso-header.is-scrolled .iso-logo {
  opacity: 0;
}

.iso-header .iso-logo:focus-visible,
.iso-header .iso-tabs:focus-within {
  opacity: 1;
  transform: none;
}

.is-nav-open .iso-tabs {
  visibility: hidden;
}

.is-nav-open .iso-header .iso-logo {
  opacity: 1;
  transform: none;
}