/* =====================================================================
   トップ（2026-10-21 イラレ案「店舗サポートLP_PC_縦長.ai」をそのまま部品にしたもの）
   部品（assets/top/）と位置（css/top-parts.css）は tools/ai_parts.py が書き出す。形・色・文字の輪郭はイラレのまま
   1 --d ＝ イラレの 1pt。画面が 1440 より狭いときは全部を画面の幅に合わせて縮める
   1440 より広いときは、背景の面だけ横にのびる。イラスト・文字・吹き出し・ロゴは 1440 のときの大きさのまま、まん中に置く（2026-10-21 本人指示）
   ===================================================================== */

/* ---------- 上のメニュー（イラレ案：白い帯、左にロゴ、右に水色のメニュー） ---------- */
.hd { --d: calc(min(100vw, 1440px) / 1440); --ox: calc((100vw - 1440 * var(--d)) / 2); height: calc(100 * var(--d)); padding: calc(14 * var(--d)) calc(var(--ox) + 56 * var(--d)) 0 calc(var(--ox) + 69 * var(--d)); align-items: flex-start; background: #fff; }
.hd-brand { filter: none; }
.hd-brand-mark { width: calc(236 * var(--d)); aspect-ratio: 739 / 186; background: url(../assets/top/img-logo.webp) center / contain no-repeat; -webkit-mask: none; mask: none; }
.hd-nav { width: calc(669 * var(--d)); height: calc(44 * var(--d)); padding: calc(4 * var(--d)); gap: 0; justify-content: space-between; align-items: center; background: #29abe2; }
.hd-nav a { font-size: max(9px, calc(11.5 * var(--d))); padding: 0 calc(10 * var(--d)); height: 100%; display: flex; align-items: center; color: #fff; }
.hd-nav a[aria-current="page"] { background: #fdd23c; color: #29abe2; }

/* ---------- 部品の置き場 ---------- */
.t-top {
  --k: .85;
  --gap: 160;
  --gap2: calc(1730 + var(--zemiH, 1540) - 1540);   /* 140 ＋ ラーメン運営ゼミナールのぶん 1370 ＋ 問いかけのぶん 220（2026-10-25） */
  container-type: inline-size;
  position: relative; overflow: hidden; background: #fff;
  --h0: 700;   /* 最初の画面（水色の面）を縦に広げた分。これより下の部品はすべてこの分だけ下がる（2026-10-25） */
  height: calc((11759 + var(--gap) + var(--gap2) + var(--h0)) * min(100vw, 1440px) * var(--k) / 1440);   /* インサイドツアーの本文の下まで（2026-10-21 下の区画を足した） */
}
.t-top * {
  --d: calc(min(100cqw, 1440px) * var(--k) / 1440);   /* イラスト・文字の 1pt（1440 より大きくしない） */
  --bd: calc(100cqw / 1440);                    /* 背景の面の横の 1pt（画面の幅いっぱい） */
  --ox: calc((100cqw - 1440 * var(--d)) / 2);  /* 広い画面で、まん中に置くための左の余白 */
}
.tp {
  position: absolute; display: block; max-width: none;
  left: calc(var(--ox) + (var(--x) - var(--gx, 0)) * var(--d));
  top: calc((var(--y) + var(--dy, 0) + var(--h0, 0) - var(--gy, 0)) * var(--d));
  width: calc(var(--w) * var(--d));
  height: calc(var(--h) * var(--d));
}
/* 背景の面：横は画面の幅いっぱいにのびる。縦はイラストと同じ */
.tp[class*="tp-bg-"] { left: calc(var(--x) * var(--bd)); width: calc(var(--w) * var(--bd)); }
/* 端から端までの面は、左右の端を画面の端にぴったり合わせる（イラレでは黄色が x=3.8 から始まっていて、左に白いすき間が出たため。2026-10-21 本人指示） */
.tp.tp-bg-hero, .tp.tp-bg-yellow, .tp.tp-bg-red, .tp.tp-bg-blue, .tp.tp-bg-blue2 { left: 0; width: 100%; }
/* かたまり（まとめて動かす部品）。中の部品の位置は、かたまりの左上から測る */
.tg > .tp { --ox: 0px; --h0: 0; }   /* かたまりの中は、かたまりの位置から測る */
.tg { position: absolute; left: calc(var(--ox) + var(--gx) * var(--d)); top: calc((var(--gy) + var(--h0, 0)) * var(--d)); width: 0; height: 0; padding: 0; border: 0; background: none; }
.t-badge { z-index: 9; }
.t-box { z-index: 10; }
.t-bubble { cursor: pointer; font: inherit; }
.t-bubble.is-teal { z-index: 13; }
.t-bubble.is-red { z-index: 14; }
.t-bubble.is-purple { z-index: 15; }
.t-bubble.is-orange { z-index: 16; }
.t-bubble:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.t-logos { list-style: none; margin: 0; padding: 0; }
.t-logos li { position: static; }

/* 店舗ロゴの区画（白い形・下の青い面・ロゴ・説明文）を --gap だけ下げ、赤い面はそのぶん下へのばす */
.tp-bg-blue, .tp-bg-white, .t-logos .tp, .tp-tx-brands { --dy: var(--gap); }
.tp.tp-bg-red { height: calc((var(--h) + var(--gap)) * var(--d)); }
/* 白い形（吹き出しのような形）は、背景ではなくロゴに合わせる：ロゴと同じ大きさ・同じ位置関係で置く（2026-10-21 本人指示） */
.tp.tp-bg-white { left: calc(var(--ox) + var(--x) * var(--d)); width: calc(var(--w) * var(--d)); }

/* 下の区画（コンサルとは違う・インサイドツアー）は、店舗ロゴの区画と同じく --gap だけ下げる */
.tp-low { --dy: var(--gap); }
.tp-low.tp-tour { --dy: calc(var(--gap) + var(--gap2)); }

/* インサイドツアーのボタン（イラレ案の「仕組み見学ツアー」のピンクと INSIDE TOUR の紺に合わせる） */
.t-tour-btn {
  display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--d));
  background: #e40055; color: #fff; border-radius: 999px; text-decoration: none;
  font-weight: 900; font-size: calc(30 * var(--d)); letter-spacing: .08em;
  box-shadow: 0 calc(7 * var(--d)) 0 #182987;
  transition: transform .15s, box-shadow .15s;
}
.t-tour-btn::after { content: "→"; display: grid; place-items: center; width: calc(46 * var(--d)); height: calc(46 * var(--d)); border-radius: 50%; background: #fff000; color: #182987; font-family: var(--num); }
.t-tour-btn:hover { transform: translateY(calc(4 * var(--d))); box-shadow: 0 calc(3 * var(--d)) 0 #182987; }

/* Support の区画（18:12 版）も、インサイドツアーと同じだけ下げる */
.tp-sup { --dy: calc(var(--gap) + var(--gap2)); }
.tp-photo-sup-staff, .tp-photo-sup-staff2 { object-fit: cover; border-radius: calc(28 * var(--d)); border: calc(8 * var(--d)) solid #fff; box-shadow: 0 calc(10 * var(--d)) calc(30 * var(--d)) rgba(0,40,90,.25); }
.t-sup-cap { margin: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap;
  font-family: "Zen Maru Gothic", var(--display); font-weight: 500; font-size: calc(36 * var(--d)); letter-spacing: .16em; color: #000; }   /* イラレの「客単価UP」などと同じ丸ゴシックの細め（2026-10-21「フォント合わせる」） */
/* 動画の再生ボタン：写真の上に丸い三角。押すと消えて、動画が操作つきで再生される */
.t-play { padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: calc(28 * var(--d)); }
.t-play span { width: calc(110 * var(--d)); aspect-ratio: 1; border-radius: 50%; background: rgba(228,0,85,.92); box-shadow: 0 calc(6 * var(--d)) 0 #182987; display: grid; place-items: center; transition: transform .2s; }
.t-play span::after { content: ""; margin-left: 10%; border-style: solid; border-width: calc(22 * var(--d)) 0 calc(22 * var(--d)) calc(36 * var(--d)); border-color: transparent transparent transparent #fff; }
.t-play:hover span { transform: scale(1.08); }
.t-play.is-hidden { display: none; }
/* 写真・シートと、その下の文字の間を空ける（2026-10-21 本人指示「間あけて 文字と写真」） */
.tp-tx-sup-up, .tp-tx-sup-loss, .tp-tx-sup-sheet, .tp-tx-sup-eg, .tp-tx-sup-seminar, .t-sup-cap { --dy: calc(var(--gap) + var(--gap2) + 40); }
/* Support の色の面は横に伸ばさない（伸ばすと弧がつぶれて尖る。2026-10-21 本人指摘「尖りすぎ」）
   形はイラレの比率のまま、ほかの部品と同じ位置に置く。画面の端までの足りない所は、同じ色の影で埋める（平らな側だけ） */
.tp.tp-bg-sup-yellow, .tp.tp-bg-sup-blue, .tp.tp-bg-sup-gray, .tp.tp-bg-sup-blue2 { left: calc(var(--ox) + var(--x) * var(--d)); width: calc(var(--w) * var(--d)); }
.tp.tp-bg-sup-yellow { box-shadow: calc(-1 * var(--ox) - 4px) 0 0 0 #fcef00; }   /* 左が平ら */
.tp.tp-bg-sup-gray   { box-shadow: calc(-1 * var(--ox) - 4px) 0 0 0 #cccccc; }
.tp.tp-bg-sup-blue, .tp.tp-bg-sup-blue2 { box-shadow: calc(var(--ox) + 4px) 0 0 0 #00aee7; }   /* 右が平ら */

/* 写真と動画の見分け（2026-10-21 本人指示）
   動画：紺の画面枠＋左上に「▶ 動画 0:53」の札。写真：白いふちのスナップ写真（少し傾ける） */
.tp-photo-sup-staff { border-color: #182987; background: #000; }
.t-video-badge {
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: #e40055; color: #fff; font-family: "Zen Maru Gothic", var(--display); font-weight: 700;
  font-size: calc(22 * var(--d)); letter-spacing: .08em; box-shadow: 0 calc(4 * var(--d)) 0 #182987; pointer-events: none;
}
.tp-photo-sup-staff2 { border-radius: calc(6 * var(--d)); border-width: calc(14 * var(--d)); rotate: 3deg; }

/* 「BETTER RAMEN, BETTER BUSINESS.」と悩みの吹き出し4つの間が詰まっていたので、英語の4行を上へ、吹き出しを下へずらして空ける（2026-10-23 本人「スペース空けて、キツい」） */
/* 英語の4行を上げたらヘッダーに近すぎた（本人「文字を下げて、ヘッダーとの余白を多く」）ので、元より少し下げ、そのぶん吹き出しをさらに下げる */
/* 4行の上下の間も広げる（本人「文字と文字の上下に余白、まだきつい」）。1行ごとに 22pt ずつ広げる */
.tp-tx-hero-1 { --dy: 12; } .tp-tx-hero-2 { --dy: 34; } .tp-tx-hero-3 { --dy: 56; } .tp-tx-hero-4 { --dy: 78; }   /* 4行目が青い面の下の弧にかからない所まで */
.tg.t-bubble { top: calc((var(--gy) + 140 + var(--h0, 0)) * var(--d)); }

/* ---------- ラーメン運営ゼミナール（2026-10-25 仮）：青い区画（下の端 y=5452）とインサイドツアーの間。大きさはすべてイラレの pt（--d） ---------- */
.t-zemi {
  position: absolute; z-index: 20; left: var(--ox); width: calc(1440 * var(--d));
  top: calc((5452 + var(--gap) + var(--h0)) * var(--d)); height: calc(var(--zemiH, 1540) * var(--d));
  padding: calc(110 * var(--d)) calc(120 * var(--d)) 0;
  background: #fcef00; box-shadow: 0 0 0 100vw #fcef00; clip-path: inset(0 -100vw);   /* 背景は黄色、画面の幅いっぱい（2026-10-25 本人指示「背景黄色」）。上は青い区画のすぐ下から */ text-align: center; color: #1f1f1f; font-family: "Zen Maru Gothic", var(--display);
}
.t-zemi p, .t-zemi h2, .t-zemi h3, .t-zemi ul { margin: 0; }
.t-zemi .zemi-label { display: inline-block; background: #e40055; color: #fff; font-weight: 700; letter-spacing: .14em;
  font-size: calc(26 * var(--d)); padding: calc(10 * var(--d)) calc(34 * var(--d)); border-radius: 999px; }
.t-zemi .zemi-title { margin-top: calc(40 * var(--d)) !important; font-weight: 700; letter-spacing: .1em; line-height: 1.4; font-size: calc(64 * var(--d)); }
.t-zemi .zemi-lead { margin-top: calc(36 * var(--d)) !important; font-weight: 700; letter-spacing: .08em; line-height: 1.8; font-size: calc(26 * var(--d)); color: #e40055; }
.t-zemi .zemi-list { list-style: none; padding: 0; margin-top: calc(50 * var(--d)) !important;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(20 * var(--d)); }
.t-zemi .zemi-list li { display: grid; grid-template-rows: auto 1fr auto; text-align: left; overflow: hidden;
  background: color-mix(in srgb, var(--c) 10%, #fff); border-radius: calc(30 * var(--d)); }
.t-zemi .zemi-list h3 { background: var(--c); color: #fff; font-weight: 700; letter-spacing: .04em; line-height: 1.45;
  font-size: calc(18 * var(--d)); padding: calc(16 * var(--d)) calc(20 * var(--d)); word-break: keep-all; overflow-wrap: anywhere; }
.t-zemi .zemi-q { padding: calc(20 * var(--d)) calc(20 * var(--d)) calc(10 * var(--d)); font-weight: 700; line-height: 1.6;
  font-size: calc(20 * var(--d)); word-break: keep-all; overflow-wrap: anywhere; }
.t-zemi .zemi-a { margin: 0 calc(20 * var(--d)) calc(22 * var(--d)) !important; padding-top: calc(14 * var(--d));
  border-top: calc(2 * var(--d)) dotted color-mix(in srgb, var(--c) 45%, #fff); font-weight: 500; line-height: 1.8; font-size: calc(15 * var(--d)); }
.t-zemi .zemi-a::before { content: "支援すること"; display: block; color: var(--c); font-weight: 700; font-size: .85em; letter-spacing: .1em; }
.t-zemi .zemi-note { margin-top: calc(40 * var(--d)) !important; font-weight: 500; letter-spacing: .08em; line-height: 2; font-size: calc(20 * var(--d)); }
.t-zemi .zemi-btn {   /* 下のインサイドツアーのボタンと同じ形（ピンクに紺の影、黄色い丸の矢印） */
  display: inline-flex; align-items: center; gap: calc(16 * var(--d)); margin-top: calc(36 * var(--d));
  background: #e40055; color: #fff; font-weight: 700; letter-spacing: .1em; font-size: calc(28 * var(--d));
  padding: calc(18 * var(--d)) calc(20 * var(--d)) calc(18 * var(--d)) calc(44 * var(--d)); border-radius: 999px; box-shadow: 0 calc(6 * var(--d)) 0 #182987;
  transition: transform .15s, box-shadow .15s;
}
.t-zemi .zemi-btn::after { content: "→"; display: grid; place-items: center; width: calc(46 * var(--d)); height: calc(46 * var(--d)); border-radius: 50%; background: #fff000; color: #182987; font-family: var(--num); }
.t-zemi .zemi-btn:hover { transform: translateY(calc(3 * var(--d))); box-shadow: 0 calc(3 * var(--d)) 0 #182987; }


/* 最初の画面（2026-10-25）：英語の4行は 0.3 倍にして上に1行で並べ、その下に「ラゼミ」。大きさはイラレの pt（--d） */
.t-top .tp-tx-hero-1 { --dy: 0; --x: 265;    --y: 875; --w: 187.5; --h: 43.5; }
.t-top .tp-tx-hero-2 { --dy: 0; --x: 472.5; --y: 875; --w: 210;   --h: 52.5; }
.t-top .tp-tx-hero-3 { --dy: 0; --x: 702.5; --y: 875; --w: 265.5; --h: 45.6; }
.t-top .tp-tx-hero-4 { --dy: 0; --x: 910;   --y: 875; --w: 265.5; --h: 45; }
/* のれん：紺の布を3枚に割り、白抜きで1文字ずつ。上の帯に正式名。文字は Dela Gothic One（ラーメン屋の看板の太いゴシック） */
.t-top .t-noren { z-index: 10; --navy: #182987; }
.t-noren .noren-rod { position: absolute; left: calc(-14 * var(--d)); right: calc(-14 * var(--d)); top: 0; height: calc(16 * var(--d)); border-radius: 999px; background: #0e1a5e; box-shadow: 0 calc(4 * var(--d)) 0 rgba(14, 26, 94, .35); }
.t-noren .noren-band {
  position: absolute; left: 0; right: 0; top: calc(10 * var(--d)); height: calc(58 * var(--d)); margin: 0;
  display: grid; place-items: center; background: var(--navy); color: #fcef00;
  font-family: "Zen Maru Gothic", var(--display); font-weight: 900; font-size: calc(28 * var(--d)); letter-spacing: .32em; text-indent: .32em; white-space: nowrap;
}
.t-noren .noren-cloth { position: absolute; left: 0; right: 0; top: calc(66 * var(--d)); bottom: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--d)); }
.t-noren .noren-cloth span {
  display: grid; place-items: center; background: var(--navy); color: #fff;
  border-radius: 0 0 calc(10 * var(--d)) calc(10 * var(--d));
  font-family: "Dela Gothic One", var(--display); font-size: calc(172 * var(--d)); line-height: 1; padding-bottom: calc(10 * var(--d));
  transform-origin: 50% 0; animation: noren-in 1.4s cubic-bezier(.3, 1.5, .5, 1) both;
}
.t-noren .noren-cloth span:nth-child(2) { animation-delay: .12s; }
.t-noren .noren-cloth span:nth-child(3) { animation-delay: .24s; }
.t-noren:hover .noren-cloth span { animation: noren-sway .9s ease-in-out; }
.t-noren:hover .noren-cloth span:nth-child(2) { animation-delay: .06s; }
.t-noren:hover .noren-cloth span:nth-child(3) { animation-delay: .12s; }
@keyframes noren-in { 0% { transform: rotateX(80deg) skewX(6deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes noren-sway { 0%, 100% { transform: none; } 30% { transform: skewX(-4deg); } 65% { transform: skewX(2.5deg); } }

/* 入校ボタン：ふつうの丸いボタン（2026-10-25 本人指示「ふつうのボタン」。食券の形はやめた）。ピンクに紺の影、黄色い丸の矢印 */
.t-top .t-ticket, .t-zemi .zemi-ticket {
  z-index: 10; display: flex; align-items: center; justify-content: center; gap: calc(18 * var(--d));
  background: #e40055; color: #fff; border-radius: 999px; box-shadow: 0 calc(8 * var(--d)) 0 #182987;
  font-family: "Zen Maru Gothic", var(--display); font-weight: 700; font-size: calc(36 * var(--d)); letter-spacing: .08em; white-space: nowrap;
  transition: transform .15s, box-shadow .15s;
}
.t-top .t-ticket::after, .t-zemi .zemi-ticket::after { content: "→"; display: grid; place-items: center; width: calc(54 * var(--d)); height: calc(54 * var(--d)); border-radius: 50%; background: #fff000; color: #182987; font-family: var(--num); font-size: .9em; }
.t-top .t-ticket:hover, .t-zemi .zemi-ticket:hover { transform: translateY(calc(4 * var(--d))); box-shadow: 0 calc(3 * var(--d)) 0 #182987; }
.t-top .t-ticket:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .t-noren .noren-cloth span, .t-noren:hover .noren-cloth span { animation: none; } }

/* 5つのポイント：大きく、名前だけ（2026-10-25 本人指示「大きくして、ポイントだけで」） */
.t-zemi .zemi-points { list-style: none; padding: 0; margin: calc(84 * var(--d)) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(44 * var(--d)) calc(48 * var(--d)); max-width: calc(1020 * var(--d)); }   /* 2段（3つ・2つ）で大きく（2026-10-25 本人指示「２段にして大きく」） */
.t-zemi .zemi-points li { width: calc(300 * var(--d)); }
.t-zemi .zemi-points li {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  background: var(--c); color: #fff; box-shadow: 0 calc(8 * var(--d)) 0 color-mix(in srgb, var(--c) 55%, #182987);
}
.t-zemi .zemi-points span { font-weight: 900; font-size: calc(46 * var(--d)); letter-spacing: .04em; line-height: 1.3; text-align: center; white-space: nowrap; }
.t-zemi .zemi-points small { display: inline-block; margin-top: calc(10 * var(--d)); font-size: calc(23 * var(--d)); font-weight: 700; letter-spacing: .02em; }
.t-zemi .zemi-ticket { width: calc(520 * var(--d)); height: calc(100 * var(--d)); margin: calc(80 * var(--d)) auto 0; text-align: left; }   /* 区画の下の入校券（最初の画面と同じ形） */
.t-noren .noren-cloth span { animation-play-state: paused; }   /* 青い面が画面に入ったら動かす（js/main.js が .t-top に .is-in を付ける） */
.t-top.is-in .t-noren .noren-cloth span { animation-play-state: running; }

/* 最初の画面の名前（2026-10-25）：のれんをやめて、ふつうのゴシック2行。大きさはイラレの pt（--d） */
.t-top .t-hero-name2 { z-index: 10; margin: 0; color: #fff; font-family: "Zen Kaku Gothic New", var(--display); font-weight: 900; font-size: calc(150 * var(--d)); line-height: 1.2; text-align: center; letter-spacing: .02em; white-space: nowrap; }
.t-top .t-hero-name2 span { display: block; }
.t-top .t-hero-name2 em { font-style: normal; color: #fff000; }
.t-top { margin-top: calc(-100.5 * min(100vw, 1440px) * var(--k) / 1440); }   /* 上の白い余白を、上の赤い面（運営学）の下に隠す（2026-10-25） */
/* 最初の画面（2026-10-25 本人指示「文字真ん中、大きく。どんどんどんって文字が出てくる」「（黄色い丸と人物を）もっとしたに」）
   名前は1文字ずつ <i> に分け、js/main.js で順に大きい所から押しつけるように出す。英語の1行とボタンも真ん中に。人物は黄色い丸と一緒に右下へ */
.t-top .t-hero-name2 i { display: inline-block; font-style: normal; }
.t-top .tp-img-chara-arms { --x: 489; --y: 240; --w: 456; --h: 412; }   /* 人物：真ん中に、1.08 倍（2026-10-25） */
.t-top .t-badge { translate: calc((720 - 196.5 - 938.8) * var(--d)) calc((404 - 443) * var(--d)); scale: 1.08; transform-origin: 0 0; }   /* 黄色い丸：人物の下、真ん中に、1.08 倍 */   /* 中の部品はイラレの座標のままなので、かたまりごとずらす */
/* ツアーの上の問いかけ（2026-10-25）：黄色い区画（〜y=7152）とねこ（y=7466）の間 */
.t-top .t-tour-q {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc((5452 + var(--gap) + var(--zemiH, 1540) + 90 + var(--h0)) * var(--d)); margin: 0;
  text-align: center; color: #1f1f1f; font-family: "Zen Kaku Gothic New", var(--display); font-weight: 900;
  font-size: calc(68 * var(--d)); letter-spacing: .06em; line-height: 1.3;
}
/* 最初の画面の配置（2026-10-25 本人指摘「バランス悪い、配置を考えろ スペースが命」）
   左の列：英語（y=320）→ 名前（y=400〜700）→ 入校ボタン（y=790〜886）を左ぞろえで縦に積み、青い面の上下の真ん中に。
   右の列：人物と黄色い丸はイラレの位置から 80 下げて、左の列と高さをそろえる。列の間は 80 以上あける */
/* 最初の画面の配置（2026-10-25 本人指示「中央 大きく どんどんどんって出てくる文字」「（人物と黄色い丸）は（名前）の上、中央少し大きくして」）
   上から：人物（y=240）＋黄色い丸（y≈404〜829）→ 英語（y=875）→ 名前 2行（y=945〜1305）→ 入校ボタン（y=1390〜1486）。
   水色の面は --h0（420）だけ縦にのばし、それより下の部品はすべて同じだけ下げている */
.t-top .tp-bg-hero { height: calc((var(--h) + 680) * var(--d)); --h0: 0; }   /* 水色の面を 480 だけ（下の区画は --h0＝540 下げて、ボタンと吹き出しの間をあける）縦にのばす（上の位置は動かさない） */
.t-top .t-hero-sub2, .t-top .t-hero-arc, .t-top .tp-tx-hero-1, .t-top .tp-tx-hero-2, .t-top .tp-tx-hero-3, .t-top .tp-tx-hero-4, .t-top .t-hero-name2, .t-top .t-ticket, .t-top .tp-img-chara-arms, .t-top .t-badge { --h0: 0; }
.t-top .t-sup-title2 { z-index: 20; margin: 0; color: #1f1f1f; font-family: "Zen Kaku Gothic New", var(--display); font-weight: 900; font-size: calc(84 * var(--d)); letter-spacing: .04em; line-height: calc(150 * var(--d)); white-space: nowrap; }
/* 円にそった英語（2026-10-25）：2段。円の中心は (720, 640)、外の段 半径 495・内の段 半径 427 */
.t-top .tp-tx-hero-1, .t-top .tp-tx-hero-2, .t-top .tp-tx-hero-3, .t-top .tp-tx-hero-4 { display: none; }
.t-top .t-hero-arc { z-index: 10; overflow: visible; }
.t-hero-arc text { fill: #fff; font-family: "Archivo", var(--num); font-weight: 600; font-stretch: 100%; font-size: 52px; letter-spacing: .14em; }   /* 2段・真ん中（2026-10-25） */
.t-hero-arc .y { fill: #fff000; }
.t-top .t-sup-title2 { text-align: center; }   /* 見出しは真ん中に、吹き出しより上（2026-10-25） */
.t-top .t-hero-sub2 { z-index: 10; margin: 0; text-align: center; color: #fff; font-family: "Zen Kaku Gothic New", var(--display); font-weight: 900; font-size: calc(50 * var(--d)); letter-spacing: .1em; line-height: calc(70 * var(--d)); white-space: nowrap; }   /* 名前の下の一言（2026-10-25 本人指示） */
/* 文字の大きさの段階にそろえる（2026-10-25。段階は css/unei.css の :root） */
@media (min-width: 761px) {   /* スマホは .t-top 全体を PC の絵のまま縮めているので、段階の最小値（px）を当てるとはみ出す。PC だけ */
  .t-zemi .zemi-title, .t-top .t-tour-q, .t-top .t-sup-title2 { font-size: var(--fs-h2); }
  .t-top .t-sup-title2 { line-height: calc(150 * var(--d)); }
  .t-zemi .zemi-lead, .t-top .t-hero-sub2 { font-size: var(--fs-lead); }
  .t-zemi .zemi-note { font-size: var(--fs-body); }
  .t-zemi .zemi-ticket, .t-top .t-ticket { font-size: var(--fs-lead); }
}
/* 上のメニュー：画面の幅をせまくするとボタンが白い帯からはみ出していた。帯の高さをボタンに合わせる（2026-10-25 本人指摘「幅変えたら、ボタンのずれ」） */
.hd { height: auto; min-height: calc(100 * var(--d)); padding-bottom: 12px; align-items: center; }
.hd .hd-nav { margin-top: 10px; }

/* ---------- スマホ（〜760px）：TOP の HTML の文字とボタンに下限の大きさ（2026-10-26 確認係の指摘「文字 5〜11px、ボタンの高さ約21px」）
   ラゼミの区画は中身に合わせて高さが伸びる。伸びた分は js/main.js が --zemiH に入れ、下の部品（問いかけ・ツアー以降）を同じだけ下げる ---------- */
@media (max-width: 760px) {
  .t-top .t-hero-sub2 { font-size: 15px; line-height: 1.5; height: auto; }
  .t-top .t-ticket { width: max-content; height: auto; min-height: 46px; left: 50%; translate: -50% 0; padding: 10px 14px 10px 22px; font-size: 15px; gap: 10px; box-shadow: 0 4px 0 #182987; }
  .t-top .t-ticket::after { width: 28px; height: 28px; }
  .t-zemi { padding: 28px 18px 32px; }
  .t-zemi .zemi-label { font-size: 13px; padding: 6px 16px; }
  .t-zemi .zemi-title { font-size: 22px; margin-top: 14px !important; word-break: auto-phrase; }
  .t-zemi .zemi-lead { font-size: 15px; margin-top: 12px !important; }
  .t-zemi .zemi-points { gap: 10px; margin-top: 22px !important; max-width: 340px; }
  .t-zemi .zemi-points li { width: calc((100% - 20px) / 3); }
  .t-zemi .zemi-points span { font-size: 14px; white-space: normal; }
  .t-zemi .zemi-points small { font-size: 10px; margin-top: 2px; letter-spacing: 0; }
  .t-zemi .zemi-ticket { width: max-content; height: auto; min-height: 46px; padding: 10px 14px 10px 22px; font-size: 15px; gap: 10px; margin-top: 40px; box-shadow: 0 4px 0 #182987; }
  .t-zemi .zemi-ticket::after { width: 28px; height: 28px; }
  .t-top .t-tour-q { font-size: 20px; }
}
@media (max-width: 760px) {   /* スマホは文字に下限があるぶん場所をとるので、水色の面と問いかけの下を広げる（2026-10-26） */
  .t-top { --h0: 920; --gap2: calc(1880 + var(--zemiH, 1540) - 1540); }
  .t-top .tp-bg-hero { height: calc((var(--h) + 900) * var(--d)); }
  .t-top .t-ticket { top: calc(1500 * var(--d)); }
}
@media (max-width: 760px) { .t-zemi .zemi-points small { font-size: 9px; white-space: nowrap; letter-spacing: -.03em; } }
@media (max-width: 760px) { .t-top .t-ticket { left: 0; right: 0; margin: 0 auto; translate: none; } }   /* GSAP が translate を消すので、左右 0＋margin auto で真ん中に */

/* ---------- スマホ（〜760px）：赤い面・青い区画・INSIDE TOUR の本文（2026-10-26 本人指摘「スマホ用が文字小さい」）
   本文はイラレの輪郭（SVG）で、PC の絵を縮めると 7〜8px になっていた。スマホだけ、輪郭の画像を隠して同じ文の HTML（.t-spb）を画面の幅いっぱいに出す。
   のびた高さは js/main.js の fitSpBody が --ex1（赤い面）・--ex2（青い区画）・--ex3（INSIDE TOUR）に入れ、下の部品をそのぶん下げる ---------- */
@media (max-width: 760px) {
  .t-top { --gap: calc(160 + var(--ex1, 0) + var(--ex2, 0)); --gap2: calc(1880 + var(--zemiH, 1540) - 1540 + var(--ex3, 0)); }
  .t-top .tp-tx-know-body, .t-top .tp-tx-consul-body, .t-top .tp-tx-tour-body { display: none; }
  .t-top .t-spb {
    position: absolute; z-index: 20; left: 20px; right: 20px; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    margin: 0; font-family: "Zen Maru Gothic", var(--display); font-weight: 700; font-size: 15px; line-height: 1.85; letter-spacing: .06em;
  }
  /* 見出しも輪郭の画像をやめて HTML に。本文は見出しのすぐ下（見出しの高さは JS が --hh1・--hh2 に px で入れる） */
  .t-top .tp-tx-know-1, .t-top .tp-tx-know-2, .t-top .tp-tx-consul-1, .t-top .tp-tx-consul-2 { display: none; }
  .t-top .t-sph {
    position: absolute; z-index: 20; left: 20px; right: 20px; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    margin: 0; color: #fff000; font-family: "Zen Maru Gothic", var(--display); font-weight: 900; font-size: 20px; line-height: 1.5; letter-spacing: .06em;
  }
  .t-top .t-sph-know { top: calc((2450 + var(--h0)) * var(--d)); }
  .t-top .t-sph-consul { top: calc((4392 + var(--gap) - var(--ex2, 0) + var(--h0)) * var(--d)); }
  .t-top .t-spb-know { top: calc((2450 + var(--h0)) * var(--d) + var(--hh1, 0px) + 14px); color: #fff; }
  .t-top .t-spb-consul { top: calc((4392 + var(--gap) - var(--ex2, 0) + var(--h0)) * var(--d) + var(--hh2, 0px) + 14px); color: #fff; }
  /* 肩を組む2人は本文の下へ（本文の終わり＝ 4392＋見出し・本文の高さ＋ --gap − --ex2。JS が --ex2 に 2人の分 520 を足している） */
  .t-top .tp-img-chara-partner { --dy: calc(var(--gap) - 131); }
  /* 店舗ロゴの下の一言 */
  .t-top .t-spb-brands {
    position: absolute; z-index: 10; left: 0; right: 0; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    top: calc((4062 + var(--gap) - var(--ex2, 0) + var(--h0)) * var(--d)); margin: 0; text-align: center;
    color: #1f1f1f; font-family: "Zen Maru Gothic", var(--display); font-weight: 700; font-size: 13px; line-height: 1.6; letter-spacing: .04em;
  }
  .t-top .tp-tx-brands { display: none; }
  /* INSIDE TOUR の詳細ボタン */
  .t-top .t-tour-btn { width: max-content; height: auto; min-height: 48px; left: 0; right: 0; margin: 0 auto; padding: 10px 14px 10px 22px; font-size: 15px; gap: 10px; box-shadow: 0 4px 0 #182987; }
  .t-top .t-tour-btn::after { width: 28px; height: 28px; }
  .t-top .t-spb-tour { top: calc((6480 + var(--gap) + var(--gap2) - var(--ex3, 0) + var(--h0)) * var(--d)); color: #1f1f1f; }
  /* 赤い面：つけ麺は本文の下へ。のびたぶん赤い面ものばす。店舗ロゴの区画は --ex1 だけ下げる（--ex2 は足さない） */
  .t-top .tp-photo-tsukemen { --dy: var(--ex1, 0); }
  .t-top .tp.tp-bg-red { height: calc((var(--h) + var(--gap) - var(--ex2, 0)) * var(--d)); }
  .t-top .tp-bg-blue, .t-top .tp-bg-white, .t-top .t-logos .tp, .t-top .tp-tx-brands { --dy: calc(var(--gap) - var(--ex2, 0)); }
  /* 青い区画：見出しと面は --ex1 だけ下げ、面は --ex2 だけのばす。肩を組む2人は本文の下へ */
  .t-top .tp-bg-blue2, .t-top .tp-tx-consul-1, .t-top .tp-tx-consul-2 { --dy: calc(var(--gap) - var(--ex2, 0)); }
  .t-top .tp.tp-bg-blue2 { height: calc((var(--h) + var(--ex2, 0)) * var(--d)); }
  /* INSIDE TOUR：本文より上の部品は --ex3 を引き、詳細ボタンから下はそのまま（--gap2 に入っている） */
  .t-top .tp-low.tp-tour { --dy: calc(var(--gap) + var(--gap2) - var(--ex3, 0)); }
  .t-top .tp-low.tp-tour.t-tour-btn { --dy: calc(var(--gap) + var(--gap2) - 150); }   /* 下の「見学で見られる、仕組み」との間を 150 あける（JS の --ex3 に足してある） */
}

/* スマホ（〜760px）の文字の大きさを段階にそろえる（2026-10-26 本人指摘「文字の大きさがバラバラ」）
   段階は css/unei.css の :root：見出し --fs-h2（28px）／リード --fs-lead（20px）／本文 --fs-body（16px）／注記 --fs-small（13px）。ボタンは本文と同じ */
@media (max-width: 760px) {
  .t-top .t-tour-q, .t-zemi .zemi-title, .t-top .t-sup-title2 { font-size: var(--fs-h2); line-height: 1.4; }
  .t-top .t-sup-title2 { white-space: normal; height: auto; word-break: auto-phrase; }
  .t-top .t-hero-sub2, .t-zemi .zemi-lead, .t-top .t-sph { font-size: var(--fs-lead); }
  .t-top .t-spb { font-size: var(--fs-body); }
  .t-zemi .zemi-points span { font-size: min(var(--fs-body), 3.9vw); }   /* 丸の中。360px でも「売上・利益」が丸に入る大きさ */
  .t-top .t-ticket, .t-zemi .zemi-ticket, .t-top .t-tour-btn { font-size: var(--fs-body); }
  .t-top .t-spb-brands, .t-zemi .zemi-label, .t-top .t-sup-cap { font-size: var(--fs-small); }
}
@media (max-width: 760px) {
  /* 28px だと「運用の「詰まり」を、」が1行に入らず「を、」だけ折れるので、スマホの TOP の見出しは画面の幅に合わせて少しだけ下げる */
  .t-top .t-tour-q, .t-zemi .zemi-title, .t-top .t-sup-title2 { font-size: min(var(--fs-h2), 6.6vw); }
  .t-zemi .zemi-lead { letter-spacing: .04em; font-size: min(var(--fs-lead), 5vw); }
  /* 写真の下の一言（動画面接の様子／3年で特定技能2号取得）が横に重なっていたので、折り返す */
  .t-top .t-sup-cap { white-space: normal; height: auto; text-align: center; line-height: 1.4; padding: 0 4px; }
}
@media (max-width: 760px) { .lastcta .lastcta-btn { font-size: var(--fs-body); white-space: nowrap; } }

/* =====================================================================
   スマホ（〜760px）の組み直し その2（2026-10-26 本人指摘「大きく」「ずれ」「スマホにしたら、それぞれのスペースあけて」）
   部品を大きくするときは、その部品だけ --d（1pt）を s 倍にする。--d0 は元の 1pt
   ・最初の画面の人物・黄色い丸・円の英語：1.45 倍（上の端 y=60 を支点）。名前から下は 350 下げる
   ・悩みの吹き出し4つ：1.6 倍、人物は 1.3 倍。2段に並べ直して間をあける。そのぶん下の部品は 980 下げる
   ・INSIDE TOUR の絵（ねこ〜本気の証）：1.6 倍（ねこの上の端 y=5576 を支点）。本文から下は 520 下げる
   ===================================================================== */
.t-top * { --d0: calc(min(100cqw, 1440px) * var(--k) / 1440); }
@media (max-width: 760px) {
  .t-top { --h0: 2620; --hb: 1350; }   /* 920 ＋最初の画面 350 ＋吹き出しと人物 1200 ＋「悩んでいませんか？」の枠 150 */
  /* 最初の画面 */
  .t-top .t-hero-arc, .t-top .tp-img-chara-arms, .t-top .t-badge, .t-top .t-badge * { --d: calc(var(--d0) * 1.45); }
  .t-top .t-hero-arc, .t-top .tp-img-chara-arms { --gy: 18.62; }   /* 60 ×（1 − 1/1.45）：上の端を動かさない */
  .t-top .t-badge { top: calc(60 * var(--d0) + (var(--gy) - 60) * var(--d)); }
  .t-top .t-hero-name2, .t-top .t-hero-sub2 { --dy: 350; }
  .t-top .t-ticket { top: calc(1850 * var(--d0)); }
  .t-top .tp-bg-hero { height: calc((var(--h) + 1250) * var(--d)); }
  /* 黄色い面：吹き出しの下げた分だけ上を戻し、のばす */
  .t-top .tp-bg-yellow { --dy: calc(var(--hb) * -1); height: calc((var(--h) + var(--hb)) * var(--d)); }
  /* 悩みの吹き出し：2段（上：人間関係・人材教育／下：人員不足・売上利益）、まん中に人物 */
  .t-top .t-bubble, .t-top .t-bubble * { --d: calc(var(--d0) * 1.6); }
  .t-top .tg.t-bubble { left: calc((100cqw - 1440 * var(--d0)) / 2 + var(--L) * var(--d0)); top: calc((var(--T) + var(--h0) - var(--hb)) * var(--d0)); }
  .t-top .t-bubble.is-purple { --L: 10; --T: 1240; }   /* 4つは間をあけず、少し重ねる（2026-10-26 本人指示「吹き出しを近く スペース無くす 重ねる」） */
  .t-top .t-bubble.is-red { --L: 700; --T: 1210; }
  .t-top .t-bubble.is-orange { --L: -40; --T: 1800; }
  .t-top .t-bubble.is-teal { --L: 590; --T: 1830; }
  /* 人物は吹き出し2段の下、まん中に 1.5 倍（2026-10-26 本人指示「吹き出しをうえに２段でならべてから、ひとだな」） */
  .t-top .tp-img-chara-worried { left: calc((100cqw - 1440 * var(--d0)) / 2 + 494 * var(--d0)); top: calc((2540 + var(--h0) - var(--hb)) * var(--d0)); width: calc(452 * var(--d0)); height: calc(537 * var(--d0)); }
  /* INSIDE TOUR の絵 */
  .t-top .tp-low.tp-tour:not(.t-tour-btn):not(.tp-tx-tour-body) { --d: calc(var(--d0) * 1.6); --gy: calc((var(--gap) + var(--gap2) - var(--ex3, 0) + var(--h0) + 5576) * (1 - 1 / 1.6)); }
  .t-top .t-spb-tour { top: calc((7000 + var(--gap) + var(--gap2) - var(--ex3, 0) + var(--h0)) * var(--d)); }
  /* ラゼミの入校ボタン：.t-top .t-ticket の margin: 0 auto で上の空きが消え、丸に重なっていた */
  .t-top .t-zemi .zemi-ticket { margin: 40px auto 0; }
  /* 店舗ロゴの下の一言：白い形の下の弧にかからないよう上げる */
  .t-top .t-spb-brands { top: calc((4010 + var(--gap) - var(--ex2, 0) + var(--h0)) * var(--d)); line-height: 1.5; }
  /* 本文の左右の空きを広げる */
  .t-top .t-sph, .t-top .t-spb { left: 28px; right: 28px; }
  /* 見学で見られる、仕組み：写真と一言を少し大きく */
  .t-top .t-sup-img, .t-top .tp-tx-sup-up, .t-top .tp-tx-sup-loss, .t-top .tp-tx-sup-sheet, .t-top .tp-tx-sup-eg, .t-top .tp-tx-sup-seminar { scale: 1.15; }
}
@media (max-width: 760px) {
  /* 「悩んでいませんか？」の枠も 1.6 倍、まん中に */
  .t-top .t-box, .t-top .t-box * { --d: calc(var(--d0) * 1.6); }
  .t-top .tg.t-box { left: calc((100cqw - 1440 * var(--d0)) / 2 + 149 * var(--d0)); top: calc((1929 + var(--h0) - 150) * var(--d0)); }
  /* 赤い面の見出しが面の上の弧にかかっていたので 100 下げる（JS の高さの元 762 も 100 減らしてある） */
  .t-top .t-sph-know { top: calc((2700 + var(--h0)) * var(--d)); }   /* さらに 150 下げた（2026-10-26 本人指示「たいとるしたにずらす」。JS の高さの元も 150 減らしてある） */
  .t-top .t-spb-know { top: calc((2700 + var(--h0)) * var(--d) + var(--hh1, 0px) + 14px); }
}
@media (max-width: 760px) {
  /* 店舗ロゴの白い吹き出し：中のロゴごと 1.3 倍（白い形の上の端 y=2957 を支点）。一言はそのぶん下げ、青い区画の見出しから下は 380 下げる
     （2026-10-26 本人指示「白の吹き出し大きく」。380 は JS の --ex2 に足してある） */
  .t-top .tp-bg-white, .t-top .t-logos .tp { --d: calc(var(--d0) * 1.3); --gy: calc((var(--gap) - var(--ex2, 0) + var(--h0) + 2957) * (1 - 1 / 1.3)); }
  .t-top .t-spb-brands { top: calc((4326 + var(--gap) - var(--ex2, 0) + var(--h0)) * var(--d)); }
  .t-top .t-sph-consul { top: calc((4772 + var(--gap) - var(--ex2, 0) + var(--h0)) * var(--d)); }
  .t-top .t-spb-consul { top: calc((4772 + var(--gap) - var(--ex2, 0) + var(--h0)) * var(--d) + var(--hh2, 0px) + 14px); }
}
@media (max-width: 760px) {
  /* 見学で見られる、仕組み：人員不足の吹き出しが上の「客単価UP」にかかっていたので、人員不足の中身と人材教育の吹き出しを 120 下げる
     （2026-10-26 本人指示「隙間を空ける。吹き出しのところね」）。色の面は動かさない（SVG は縦横比を保つので、のばすと形がずれて白い地が出た） */
  .t-top .tp-sup-bubble-orange, .t-top .tp-photo-sup-staff, .t-top .tp-photo-sup-staff2, .t-top .t-play, .t-top .t-video-badge { --dy: calc(var(--gap) + var(--gap2) + 120); }
  .t-top .tp-sup-bubble-red { --dy: calc(var(--gap) + var(--gap2) + 260); }   /* 写真の下の一言にかからない所まで */
  .t-top .tp-cap-staff, .t-top .tp-cap-staff2 { --dy: calc(var(--gap) + var(--gap2) + 160); }
}
@media (max-width: 760px) {
  /* 「ラーメン運営ゼミナール」を大きく（2026-10-26 本人指示「ゼミナールの文字を大きく もっと大きく」）。のびた 170 だけ、下の一言・入校ボタン・水色の面・下の部品を下げる */
  .t-top { --h0: 2790; }
  .t-top .t-hero-name2 { font-size: 13vw; height: auto; line-height: 1.15; }
  .t-top .t-hero-sub2 { --dy: 520; }
  .t-top .t-ticket { top: calc(2020 * var(--d0)); }
  .t-top .tp-bg-hero { height: calc((var(--h) + 1420) * var(--d)); }
  /* 赤い面のつけ麺：大きくして（1.2 倍）、本文から空けて下へ。白い吹き出しは 200 上げて赤い面にかぶせ、つけ麺の下の端を白にかぶせる。白い吹き出しと青い区画の見出しの間は 200 広げた（本人「白の吹き出しと下の字のスペース空ける」）
     （2026-10-26 本人指示「写真を大きくして下に 文字との余白 白をピンクと青に被らせる」。本文の下の空きは JS の --ex1 に足してある） */
  .t-top .tp-photo-tsukemen { left: calc((100cqw - 1440 * var(--d0)) / 2 - 110 * var(--d0)); top: calc((2610 + var(--ex1, 0) + var(--h0)) * var(--d0)); width: calc(895 * var(--d0)); height: calc(918 * var(--d0)); }
  .t-top .tp-bg-white, .t-top .t-logos .tp { --gy: calc((var(--gap) - var(--ex2, 0) - 200 + var(--h0) + 2957) * (1 - 1 / 1.3) + 200); }
  .t-top .t-spb-brands { top: calc((4126 + var(--gap) - var(--ex2, 0) + var(--h0)) * var(--d)); }
  .t-top .t-sph-consul { top: calc((4772 + var(--gap) - var(--ex2, 0) + var(--h0)) * var(--d)); }
  .t-top .t-spb-consul { top: calc((4772 + var(--gap) - var(--ex2, 0) + var(--h0)) * var(--d) + var(--hh2, 0px) + 14px); }
}
@media (max-width: 760px) {
  /* 「悩んでいませんか？」の枠を矢印ごと 2 倍に（2026-10-26 本人指示「やじるしを文字も一緒に大きくする」）。のびた 100 だけ下の部品を下げる */
  .t-top { --h0: 2890; --hb: 1450; }
  .t-top .t-box, .t-top .t-box * { --d: calc(var(--d0) * 2); }
  .t-top .tg.t-box { left: calc((100cqw - 1440 * var(--d0)) / 2 + 6 * var(--d0)); top: calc((1929 + var(--h0) - 250) * var(--d0)); }
}
@media (max-width: 760px) {
  /* 青い区画の肩を組む2人：1.35 倍にして、まん中に。本文との間を 120 空ける（2026-10-26 本人指示「イラスト少し大きくして まん中 文字とのスペース空ける」）
     本文の下の終わり＝ 4585 ＋ --gap（JS の --ex2 の空き 1060 から決まる） */
  .t-top .tp-img-chara-partner { left: calc((100cqw - 1440 * var(--d0)) / 2 + 427 * var(--d0)); top: calc((4705 + var(--gap) + var(--h0)) * var(--d0)); width: calc(587 * var(--d0)); height: calc(684 * var(--d0)); }
}
@media (max-width: 760px) {
  /* 黄色い面の下の弧と、赤い面の上の弧：縦にのばした画像だと円がとがって見えたので、スマホでは同じ色の面を CSS の楕円で描く（画像は枠の外へ出して見せない）
     （2026-10-26 本人指示「黄色とピンクのアールを緩やかに 円がとがりすぎ」） */
  .t-top .tp.tp-bg-yellow, .t-top .tp.tp-bg-red { object-fit: none; object-position: -9999px 0; }
  .t-top .tp.tp-bg-yellow { background: #fff000; border-radius: 0 0 50% 50% / 0 0 30vw 30vw; }
  .t-top .tp.tp-bg-red { background: #ea545d; border-radius: 50% 50% 0 0 / 30vw 30vw 0 0; }
}