@charset "UTF-8";
/* ==========================================================================
   p-top  TOPページ固有スタイル
   出典: Figma TOP_デザイン案2_修正3（node 652-2103・1440×9261）
         SP = TOP_SP レイヤーまでOK（node 668-157・390×10266）
   座標はFigma実測値（01FVグループSVG書き出し＋位置パネル実読・2026-07-29）
   ========================================================================== */
/* --------------------------------------------------------------------------
   FV（ファーストビュー）
   実装方式: 1440×977の「キャンバス」を実測px座標で組み、
             768〜1440px帯は transform: scale(100vw/1440) で比率ごと縮小する
             （タブレット帯でもデザイン比率を維持・座標の書き換え不要）
   実測(PC): キャッチ(167,358) 64px/行間180% / リード(167,606) 24px/行間45px
             大泡(720,299,505×510) / カウンター(738,266) / バスケット(1016,606)
             小泡(1146,262,77×74) / CLSアーク(1142,564,150×141)
             黄泡(77,0) / 青泡(1321,105) / 桃泡(0,609) ※端泡PNGはフレームでクリップ済み
   実測(SP): キャッチ(37,78) 24px / リード(37,173) 16px
             クラスタ(right11,top125,173×234) / 桃泡(0,297,59×62)
   -------------------------------------------------------------------------- */
.p-top__fv {
  position: relative;
  height: min(977px, 67.8472222222vw);
  overflow: hidden; /* スケール時の端泡はみ出し対策 */
}

.p-top__fv-canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  height: 977px;
  /* min()をSASSに評価させないため補間で素通しする。長さ÷長さ=数値 */
  transform: translateX(-50%) scale(min(1, calc(100vw / 1440px)));
  transform-origin: top center;
}

.p-top__fv-bubble,
.p-top__fv-visual img {
  position: absolute;
  pointer-events: none;
}

/* --- 装飾泡（キャンバス実測座標・PNGは可視域でクリップ済み） --- */
.p-top__fv-bubble--yellow {
  top: 0;
  left: 77px;
  width: 274px;
}

.p-top__fv-bubble--blue {
  top: 105px;
  left: 1321px; /* 右クリップ済み・可視幅119 */
  width: 119px;
}

.p-top__fv-bubble--pink {
  top: 609px;
  left: 0; /* 楕円はx-146〜だがPNGはx0でクリップ済み */
  width: 145px;
}

/* SP専用の端泡（クリップ形状が異なるため別書き出し・PC時は非表示） */
.p-top__fv-bubble--yellow-sp,
.p-top__fv-bubble--pink-sp {
  display: none;
}

/* --- テキストブロック --- */
.p-top__fv-text {
  position: absolute;
  top: 358px;
  left: 167px;
  z-index: 2;
}

.p-top__fv-catch {
  color: #005ca7;
  font-family: "Zen Old Mincho", serif;
  font-size: 64px; /* 実測。縮小はキャンバスscaleが担う */
  font-weight: 700;
  line-height: 1.8; /* 実測180% */
  letter-spacing: 0; /* 実測0% */
}

.p-top__fv-lead {
  margin-top: 18px; /* 実測: リードtop606 −(キャッチtop358+2行分230.4) */
  color: #333333;
  font-size: 24px; /* 実測 */
  line-height: 1.875; /* 実測: 45px/24px */
  letter-spacing: 0;
}

/* --- ビジュアル（大泡＋イラスト＋アークテキスト） --- */
.p-top__fv-visual img {
  height: auto;
}

.p-top__fv-illust--bubble {
  top: 299px;
  left: 720px;
  width: 505px;
}

.p-top__fv-illust--counter {
  top: 262px; /* 実体rect(738,266)−影マージン4px＝PNGキャンバス基準 */
  left: 734px;
  z-index: 2;
  width: 340px;
}

.p-top__fv-illust--basket {
  top: 602px; /* 実体rect(1016,606)−影マージン4px */
  left: 1012px;
  z-index: 2;
  width: 196px;
}

.p-top__fv-illust--small {
  top: 262px;
  left: 1146px;
  width: 77px;
}

.p-top__fv-illust--cls {
  top: 564px;
  left: 1142px; /* テンプレートマッチ実測 */
  z-index: 3;
  width: 150px;
}

/* シーン2/3では泡の位置・大きさが違うため、弧テキストも一緒に切り替える。
   位置はシーン1の関係（泡中心から+18.8°方向・距離=半径×1.023）を各泡の半径比で縮尺した値 */
.p-top__fv-illust--cls2 {
  top: 485px;
  left: 1051px;
  width: 119px;
}

.p-top__fv-illust--cls3 {
  top: 474px;
  left: 1056px;
  width: 119px;
}

/* SP専用イラスト（PC時は非表示） */
.p-top__fv-illust--sp {
  display: none;
}

/* --- 中央シーン②③の配置（アニメ指示Bフレーム実測×0.827換算） --- */
.p-top__fv-illust--bubble2 {
  top: 275px;
  left: 716px;
  width: 401px;
}

.p-top__fv-illust--shirt {
  top: 238px;
  left: 876px;
  z-index: 2;
  width: 247px;
}

.p-top__fv-illust--run {
  top: 508px;
  left: 685px;
  z-index: 2;
  width: 131px;
}

.p-top__fv-illust--bubble3 {
  top: 264px;
  left: 722px;
  width: 400px;
}

.p-top__fv-illust--suit {
  top: 252px;
  left: 699px;
  z-index: 2;
  width: 315px;
}

.p-top__fv-illust--shoes {
  top: 492px;
  left: 876px;
  z-index: 2;
  width: 243px;
}

/* --- アニメーション: 読込時ふわっと出現 + 泡の浮遊ループ（設計書§5） --- */
@keyframes fv-fade-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fv-float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -14px;
  }
}
.p-top__fv-text,
.p-top__fv-visual img {
  animation: fv-fade-in 0.9s ease-out both;
}

.p-top__fv-visual img {
  animation-delay: 0.25s;
}

.p-top__fv-bubble {
  animation: fv-fade-in 0.9s ease-out both, fv-float 6s ease-in-out 0.9s infinite;
}

/* 泡ごとに周期・位相を散らす（指示「それぞれ別々のリズムで上下ふわふわ」） */
.p-top__fv-bubble--yellow,
.p-top__fv-bubble--yellow-sp {
  animation-duration: 0.9s, 8s;
  animation-delay: 0s, 0.6s;
}

.p-top__fv-bubble--blue {
  animation-duration: 0.9s, 11s;
  animation-delay: 0s, 1.6s;
}

.p-top__fv-bubble--pink,
.p-top__fv-bubble--pink-sp {
  animation-duration: 0.9s, 9.5s;
  animation-delay: 0s, 0.2s;
}

.p-top__fv-illust--small {
  animation: fv-fade-in 0.9s ease-out 0.25s both, fv-float 5s ease-in-out 1.2s infinite;
}

/* --- 中央シーン切替（アニメ指示①②③: 中央の大シャボン玉の中身がループで入れ替わる）
       切替の質感=クロスフェード+中身がふわっと持ち上がる（vivoo参考の場面転換）
       transformはfv-fade-inが占有するため、入場は独立プロパティ translate/scale で行う --- */
.p-top__fv-scene {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 2.2s ease-in-out, visibility 0s linear 2.2s;
  pointer-events: none;
  animation: fv-float 12s ease-in-out 2s infinite; /* シーン全体（大玉+人物）もゆっくり浮遊 */
}

.p-top__fv-scene.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 2.2s ease-in-out, visibility 0s;
}

.p-top__fv-scene img {
  translate: 0 22px;
  scale: 0.97;
  transition: translate 2.4s cubic-bezier(0.22, 0.61, 0.36, 1), scale 2.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.p-top__fv-scene img:nth-child(2) {
  transition-delay: 0.25s;
}

.p-top__fv-scene img:nth-child(3) {
  transition-delay: 0.4s;
}

.p-top__fv-scene.is-active img {
  translate: 0 0;
  scale: 1;
}

@media (prefers-reduced-motion: reduce) {
  .p-top__fv-text,
  .p-top__fv-visual img,
  .p-top__fv-bubble,
  .p-top__fv-scene {
    animation: none;
  }
  .p-top__fv-scene img {
    translate: 0 0;
    scale: 1;
    transition: none;
  }
}
/* --------------------------------------------------------------------------
   Pick Up（実測: 見出し列＋カード2枚[388×233 rx16.5 gap25]・カード上端=フレーム978）
   -------------------------------------------------------------------------- */
/* 🔒 実測(PC 937:3226): セクション1200px中央／**見出しは中央揃えで上**（x572＝中央）／
   その下にカード2枚を横並び（589 + 21 + 589 = 1199）。
   従来は「見出し左・カード右」の横並びだった＝旧デザイン */
.p-top__pickup-inner {
  display: block;
}

.p-top__pickup-head {
  margin-top: 80px; /* 実測: Pキャップ上端1075へ合わせ込み */
  text-align: center;
}

.p-top__pickup-cards {
  display: flex;
  gap: 21px; /* 実測: 710 -> 730 */
  margin-top: 61px; /* 実測: 見出し下端1135 -> カード上端1196 */
}

.p-top__pickup-card {
  position: relative;
  display: block;
  flex: 1 1 589px; /* 実測 937:3231/3246: 589×200 */
  overflow: hidden;
  aspect-ratio: 589/200;
  border-radius: 18px; /* 実測: r18 */
  transition: opacity 0.25s ease;
}

.p-top__pickup-card:hover {
  opacity: 0.9;
}

/* グラデ面（実測: 上#5FCAFD → 下 洗濯代行#B3E7FF / レンタル布団#A7E3FF） */
.p-top__pickup-card--laundry {
  background: linear-gradient(to bottom, #5fcafd, #b3e7ff);
}

.p-top__pickup-card--futon {
  background: linear-gradient(to bottom, #5fcafd, #a7e3ff);
}

/* 写真＝左側を曲線マスクで切り抜く（フッターバナーと同じマスクSVGを流用）
   実測: 窓 272×200（46.18%）／写真実体 368×245 を左-11.54% 上-10% に置く */
.p-top__pickup-card-photo {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 46.18%;
  height: 100%;
  overflow: hidden;
  /* 実測 937:3249 の clip vector をSVGで書き出したもの（273×201＝この窓と同寸） */
  mask-image: url("../img/top/pickup-mask.svg");
  mask-size: 100% 100%;
  -webkit-mask-image: url("../img/top/pickup-mask.svg");
  -webkit-mask-size: 100% 100%;
}

.p-top__pickup-card-photo img {
  position: absolute;
  top: -10%;
  left: -25%;
  /* ⚠️ 共通の `img { max-width:100% }` に負けて 100% で止まる＝マスクの膨らみ側が埋まらず
     切り抜きが直線に見える。max-width を解除して実測どおり 135.3% を効かせる */
  max-width: none;
  width: 135.3%; /* 実測: 368/272 */
  height: 122.5%; /* 実測: 245/200 */
  object-fit: cover;
}

/* 縦の弧テキスト "service"
   ⚠️ノードの箱(220×220)は文字パスの外接円で、**見た目の大きさではない**。
   Figma書き出し画像の画素実測で 25×44px（カード589×200に対し 左44.31% 上9.00% 幅4.24%） */
.p-top__pickup-card-arc {
  position: absolute;
  top: 9%;
  left: 44.31%;
  display: block;
  width: 4.24%;
  aspect-ratio: 25/44;
  background: no-repeat center/contain;
}

.p-top__pickup-card--laundry .p-top__pickup-card-arc {
  background-image: url("../img/top/pickup-arc-laundry.svg");
}

.p-top__pickup-card--futon .p-top__pickup-card-arc {
  background-image: url("../img/top/pickup-arc-futon.svg");
}

/* テキストブロック（実測: x1039＝52.46% / y1216＝上から10% / 幅252＝42.78%） */
.p-top__pickup-card-body {
  position: absolute;
  top: 10%;
  left: 52.46%;
  display: flex;
  flex-direction: column;
  width: 42.78%;
}

.p-top__pickup-card-title {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff; /* 実測 937:3254: #FFFFFF */
  font-size: 36px; /* 実測: 36px */
  font-weight: 700;
  line-height: 1.45; /* 実測: 箱52/36 */
  white-space: nowrap;
}

/* 丸い矢印（実測 937:3255: 30×30 r28・塗り #E1F5FF・中のVectorは7×14） */
.p-top__pickup-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e1f5ff;
  color: #005ca7;
}

.p-top__pickup-card-line {
  display: block;
  width: 100%;
  margin-top: 7px; /* 実測: タイトル下端1268 -> Line 1282 の差14pxの半分（行箱の余白ぶん） */
  border-top: 1px solid #e1f5ff; /* 実測 937:3257 */
}

.p-top__pickup-card-text {
  margin-top: 7px; /* 実測: Line1282 -> 本文1296 */
  color: #ffffff; /* 実測 937:3258: #FFFFFF */
  font-size: 18px; /* 実測: 18px */
  font-weight: 700;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   News（実測: リスト左[幅686・左オフセット64]＋見出し/ボタン右[幅250]・リスト上端=フレーム1370）
   -------------------------------------------------------------------------- */
.p-top__news {
  padding-top: 131px; /* 実測: セクション上端1239 → リスト上端1370 */
}

.p-top__news-inner {
  display: flex;
  justify-content: space-between;
}

.p-top__news-list {
  width: 686px;
  margin-left: 64px; /* 実測: リスト左端184 − インナー左端120 */
  list-style: none;
}

.c-news-item {
  padding: 21px 0 40px; /* 実測: 行ピッチ139px（バッジ1370→1509） */
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.c-news-item:first-child {
  padding-top: 0;
}

.c-news-item__link {
  display: block;
  transition: opacity 0.25s ease;
}

.c-news-item__link:hover {
  opacity: 0.7;
}

.c-news-item__meta {
  display: flex;
  align-items: center;
  gap: 21px; /* 実測 */
}

/* 🔒 監査#1「営業・店舗情報 がchip内で2行に折れる」
   Figmaのchipは「店舗情報」(4字・textW56)を **96×36 pad 12/11** で包んだもの＝
   幅96pxは"4字のときの結果"であって固定値ではない。実データのカテゴリ名は
   「営業・店舗情報」「サービス・料金」(7字)で、96px固定だと折り返す。
   ∴ **幅は文字数で伸ばし（min-width 96 で従来見た目を維持）・折り返しを禁止**する。 */
.c-news-item__badge {
  display: inline-grid;
  place-items: center;
  min-width: 96px; /* 実測: 4字のときの幅 */
  height: 36px; /* 実測 */
  padding: 0 11px 0 12px; /* 実測 pad 左12/右11 */
  background: #e1f5ff;
  border-radius: 18px;
  color: #005ca7;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.c-news-item__date {
  color: #333333;
  font-size: 16px;
}

.c-news-item__title {
  margin-top: 20px;
  color: #333333;
  font-size: 16px;
}

.p-top__news-head {
  width: 370px; /* 実測: 見出し列 950〜1320 */
  padding-top: 23px;
}

.p-top__news-head .c-sec-title__ja {
  margin-top: 22px; /* 実測: Newsのお知らせは間隔広め */
}

.p-top__news-head .c-btn-arrow {
  margin-top: 28px; /* 実測: ボタン上端1597 */
  min-width: 249px; /* 実測 */
}

/* --------------------------------------------------------------------------
   Services（実測: 見出し左＋コピー右[602〜]・泡4個[273×280 cy2359]・ボタン中央[2601]）
   -------------------------------------------------------------------------- */
.p-top__service {
  padding-top: 153px; /* 実測: capを1949へ合わせ込み */
}

.p-top__service-head {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.p-top__service .c-sec-title__ja {
  margin-top: 28px; /* 実測: Servicesはサブ間隔広め（cap→グリフ111px） */
}

.p-top__service-copy {
  width: 718px; /* 実測: x602〜1320 */
  padding-top: 20px; /* 実測: キャッチ上端1951 − 見出し上端1931 */
}

.p-top__service-catch {
  color: #005ca7;
  font-family: "Zen Old Mincho", serif;
  font-size: 24px; /* 実測 */
  font-weight: 700;
  line-height: 1.67; /* 実測: 行送り40px */
  letter-spacing: 0;
}

.p-top__service-text {
  margin-top: 27px; /* 実測: 本文上端2070 − キャッチ2行下端 */
  font-size: 16px;
  line-height: 1.9; /* 実測: 行送り30.5px */
}

.p-top__service-bubbles {
  display: flex;
  justify-content: space-between;
  margin-top: 64px; /* 実測: 泡上端2219へ合わせ込み */
  padding: 0 8px; /* 実測: 泡1左端128.4=インナー+8.4 */
}

/* Figma実測: 泡ラベル/サブ＝白文字に2pxの色縁取り(OUTSIDE)＋同色ドロップシャドウ(y4.5 blur4.5 α0.5)。
   -webkit-text-strokeは中心線描画で白文字が痩せるため、8方向text-shadowで外側縁取りを再現する */
.c-bubble-icon {
  position: relative;
  display: block; /* リンク化(<a>)しても寸法が効くように */
  width: 273px; /* 実測 */
  height: 280px;
  color: #ffffff;
  text-align: center;
  text-decoration: none; /* リンク化しても下線を出さない（意匠は泡そのもの） */
}

/* Coming Soonバッジ（白洋舎様FB 8/29: ハウスクリーニング泡＝泡の右上に重ねる） */
.c-bubble-icon .c-soon-badge {
  position: absolute;
  top: 6px;
  right: -6px;
  z-index: 1;
}

/* Coming Soonバッジ（白洋舎様FB 8/29: Pick Up洗濯代行カード＝写真の左上に重ねる。
   タイトル行に入れるとSP幅(343px)で見切れ、右上だと矢印(y31/x531)と隣接して窮屈なため写真側へ置く */
.p-top__pickup-card .c-soon-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

/* キーボード操作でどの泡を選んでいるか分かるようにする */
.c-bubble-icon:focus-visible {
  outline: 3px solid #005ca7;
  outline-offset: 4px;
  border-radius: 50%;
}

.c-bubble-icon__art {
  position: absolute;
  inset: 0;
}

.c-bubble-icon__icon {
  position: absolute;
  top: 18px; /* 実測 */
  left: 50%;
  transform: translateX(-50%);
}

.c-bubble-icon__label {
  position: absolute;
  top: 166px; /* 実測: ラベル中心（1行/2行共通） */
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  font-size: 24px; /* 実測 */
  font-weight: 700;
  line-height: 1.2;
}

.c-bubble-icon__divider {
  position: absolute;
  top: 200px; /* 実測: 泡1の線=frame2419 */
  left: 50%;
  width: 143px; /* Figma実測: Line w143（泡1〜3） */
  height: 1px;
  background: #ffffff; /* Figma実測: #FFF alpha1 */
  transform: translateX(-50%);
}

.c-bubble-icon__sub {
  position: absolute;
  top: 205px; /* Figma実測: サブ文字上端（帯は存在しない） */
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px; /* Figma実測: Service Subtitle fs16 */
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
}

.c-bubble-icon__arrow {
  position: absolute;
  top: 237px; /* 実測 */
  left: 50%;
  display: grid;
  place-items: center;
  width: 25px; /* 実測24.8 */
  height: 25px;
  background: #ffffff;
  border-radius: 50%;
  transform: translateX(-50%);
}

/* バリエーション色（実測: ラベル影とチェブロン色） */
.c-bubble-icon--1 .c-bubble-icon__label,
.c-bubble-icon--1 .c-bubble-icon__sub {
  text-shadow: 2px 0 0 #6caefd, -2px 0 0 #6caefd, 0 2px 0 #6caefd, 0 -2px 0 #6caefd, 1.5px 1.5px 0 #6caefd, -1.5px 1.5px 0 #6caefd, 1.5px -1.5px 0 #6caefd, -1.5px -1.5px 0 #6caefd, 0 5px 5px rgba(108, 174, 253, 0.5);
}

.c-bubble-icon--1 .c-bubble-icon__arrow {
  color: #005ca7;
}

.c-bubble-icon--2 .c-bubble-icon__label,
.c-bubble-icon--2 .c-bubble-icon__sub {
  text-shadow: 2px 0 0 #fd94b2, -2px 0 0 #fd94b2, 0 2px 0 #fd94b2, 0 -2px 0 #fd94b2, 1.5px 1.5px 0 #fd94b2, -1.5px 1.5px 0 #fd94b2, 1.5px -1.5px 0 #fd94b2, -1.5px -1.5px 0 #fd94b2, 0 5px 5px rgba(253, 148, 178, 0.5);
}

.c-bubble-icon--2 .c-bubble-icon__arrow {
  color: #ff608d;
}

.c-bubble-icon--3 .c-bubble-icon__label,
.c-bubble-icon--3 .c-bubble-icon__sub {
  text-shadow: 2px 0 0 #1ec0fe, -2px 0 0 #1ec0fe, 0 2px 0 #1ec0fe, 0 -2px 0 #1ec0fe, 1.5px 1.5px 0 #1ec0fe, -1.5px 1.5px 0 #1ec0fe, 1.5px -1.5px 0 #1ec0fe, -1.5px -1.5px 0 #1ec0fe, 0 5px 5px rgba(30, 192, 254, 0.5);
}

.c-bubble-icon--3 .c-bubble-icon__arrow {
  color: #1ec0fe;
}

.c-bubble-icon--4 .c-bubble-icon__label,
.c-bubble-icon--4 .c-bubble-icon__sub {
  text-shadow: 2px 0 0 #c3ac00, -2px 0 0 #c3ac00, 0 2px 0 #c3ac00, 0 -2px 0 #c3ac00, 1.5px 1.5px 0 #c3ac00, -1.5px 1.5px 0 #c3ac00, 1.5px -1.5px 0 #c3ac00, -1.5px -1.5px 0 #c3ac00, 0 5px 5px rgba(195, 172, 0, 0.5);
}

.c-bubble-icon--4 .c-bubble-icon__arrow {
  color: #c3ac00;
}

.c-bubble-icon--4 .c-bubble-icon__divider {
  width: 173px; /* Figma実測: 泡4のみ長い */
}

.p-top__service-btn {
  margin-top: 102px; /* 実測: ボタン上端2601 − 泡下端2499 */
  margin-left: 463px; /* 実測: ボタン左端583（中央より12px左） */
}

.p-top__service-btn .c-btn-arrow {
  min-width: 249px; /* 実測 */
}

/* --------------------------------------------------------------------------
   Why Choose Us（実測: 951px帯×3・円写真486(インナー+42,帯上315)・右列x743）
   -------------------------------------------------------------------------- */
.p-top__why {
  margin-top: 160px; /* 実測: 帯上端2821へ合わせ込み */
}

.p-top__why-band {
  height: 951px; /* 実測 */
  padding-top: 86px; /* 実測: 見出しcap上端は帯上+104 */
  overflow: hidden;
}

/* 🔒 §B-9 アニメ①「スクロールに応じてポイント1→2→3が切り替わる」（2026-08-24 ユーザー指示で
   時間切替から変更）: 帯はsticky内に重ね、切替の閾値はJSがスクロール位置で判定する。
   スクロール距離ぶんのセクション高さはJSが設定（SPは帯高が可変のためCSS固定にしない）。
   JSが動かない／動きを減らす設定のときは従来どおり3枚を縦に並べて全部見せる（内容が消えない）。 */
.p-top__why.is-switching {
  position: relative;
}

.p-top__why.is-switching .p-top__why-sticky {
  position: sticky;
  /* 帯(951px)より縦に長い画面では中央に固定する（上下の余白を均等にする） */
  top: max(0px, (100vh - 951px) / 2);
  display: grid;
  overflow: hidden;
}

.p-top__why.is-switching .p-top__why-band {
  grid-area: 1/1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease;
}

.p-top__why.is-switching .p-top__why-band.is-active {
  opacity: 1;
  visibility: visible;
}

/* 🔴 2026-08-27 ユーザー指示（SPで承認 → PCへ展開）:
   「下のセクションがスクロールに合わせて徐々に上に重なって切り替わる」＝せり上がり。
   フェード用の opacity/visibility を解除し、JSが `--shift`
   （0=画面下に待機 / 1=完全に重なった）を各帯へ書き込み、CSSが translateY に変換する。
   重なり順は後の帯ほど上（z-index）。動きを減らす設定では is-switching が付かないので
   3枚が縦に並んだ従来表示のまま＝内容は消えない。 */
.p-top__why.is-switching .p-top__why-band {
  opacity: 1;
  visibility: visible;
  transform: translateY(calc((1 - var(--shift, 0)) * 100%));
  transition: none; /* 位置はスクロール量で決めるのでCSS側では補間しない */
  will-change: transform;
}

/* 1枚目は常に定位置（下から出てくるのは2枚目以降） */
.p-top__why.is-switching .p-top__why-band--1 {
  transform: none;
  z-index: 1;
}

.p-top__why.is-switching .p-top__why-band--2 {
  z-index: 2;
}

.p-top__why.is-switching .p-top__why-band--3 {
  z-index: 3;
}

.p-top__why-band--1 {
  background: #5fcafd;
  color: #ffffff;
}

.p-top__why-band--2 {
  background: #e1f5ff;
  color: #005ca7;
}

/* 実測: 本文折返し幅は帯ごとに異なる */
.p-top__why-band--2 .c-point-block__body {
  width: 580px;
}

.p-top__why-band--3 .c-point-block__body {
  width: 570px;
}

/* 帯3のみ本文幅570 < タイトル1行目の576px(18文字×32px)のため「で」が孤立折返しする。
   タイトルは<br>指定位置の2行を維持するため本文幅の制約から外す（2026-08-19 監査） */
.p-top__why-band--3 .c-point-block__title {
  min-width: 576px;
}

.p-top__why-band--3 {
  background: #005ca7;
  color: #ffffff;
}

/* 見出し: 帯色に応じた白/紺・頭文字はアウトライン */
.p-top__why-band .c-sec-title__en {
  color: currentColor;
}

/* 頭文字は白フチの中抜き。text-strokeは字の中心線に描かれるため、
   paint-orderで「線→塗り」の順にして線が内側へ食われないようにする。
   線幅は文字サイズ比（PC84px→3px相当）でSPでも同じ見え方にする */
/* ⚠️currentColorはcolor:transparentを参照して線まで透明になるため、線色は明示する */
.p-top__why-band .c-sec-title__en-first {
  color: transparent;
  -webkit-text-stroke: 0.036em #ffffff;
  paint-order: stroke fill;
}

/* 帯2は紺文字なので頭文字の縁取りも紺 */
.p-top__why-band--2 .c-sec-title__en-first {
  -webkit-text-stroke-color: #005ca7;
}

.p-top__why-band .c-sec-title__ja {
  margin-top: 32px; /* 実測 */
  color: currentColor; /* 実測: 帯1/3=白・帯2=紺 */
  font-size: 24px; /* 実測: 幅290px/12文字 */
  font-weight: 500;
  letter-spacing: 0.05em;
}

.c-point-block {
  position: relative;
  margin-top: 61px; /* 実測: 円写真上端3136へ合わせ込み */
}

.c-point-block__visual {
  position: relative;
  width: 486px; /* 実測 */
  margin-left: 42px; /* 実測: x162 − インナー120 */
}

.c-point-block__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
}

/* 🔒 円周に沿う "point 0N"（SVG textPath）。
   viewBox 600×600 は写真の円(486)と同心で、半径274の弧に文字を乗せている。
   写真(486)に対する比率で置くので、幅が変わっても円と文字の関係が崩れない。 */
.c-point-block__num {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 123.46%; /* 600/486 */
  height: 123.46%;
  overflow: visible;
  transform: translate(-50%, -50%);
  fill: currentcolor;
  font-family: "Buenard", serif;
  font-size: 36px; /* 実測 937:3358 */
  letter-spacing: 0.02em;
}

.c-point-block__body {
  position: absolute;
  top: 73px; /* 実測: タイトルグリフ上端3206（帯1行実測・ライブ照合済） */
  left: 623px; /* 実測: x743 − インナー120 */
  width: 612px; /* 実測: 帯1本文37文字が設計と同位置で折り返す幅 */
}

.c-point-block__title {
  font-family: "Zen Old Mincho", serif;
  font-size: 32px; /* 実測 */
  font-weight: 700;
  line-height: 1.7; /* 実測: 行送り54px */
  letter-spacing: 0;
}

.c-point-block__text {
  margin-top: 24px; /* 実測: 本文1行目グリフ3334 */
  font-size: 16px;
  line-height: 1.75; /* 実測: 行送り28px */
}

.c-point-block__text + .c-point-block__text {
  margin-top: 24px; /* 実測 */
}

.c-point-block__btn {
  margin-top: 28px; /* 実測: ボタン上端は帯上+643.6 */
  margin-left: -5px; /* 実測: ボタン左端737.6 */
}

.c-point-block__btn .c-btn-arrow {
  min-width: 249px;
  border: 0; /* 実測: 帯上のボタンは枠線なし */
}

/* --------------------------------------------------------------------------
   Campaign（実測: カード387×710 rx16 gap20・上端6109・ドット6861・ボタン6919.6中央）
   -------------------------------------------------------------------------- */
/* --- 背景装飾の泡（Figma back_decoration・親セクション基準で配置） --- */
.p-top__deco {
  position: absolute;
  z-index: -1; /* 実測: 泡はShop Listパネルの背面（パネル左辺x200から先は隠れる） */
  pointer-events: none;
}

.p-top__campaign,
.p-top__shoplist {
  position: relative;
}

.p-top__campaign > .l-inner {
  position: relative;
  z-index: 1;
}

/* 黄大泡はパネルの背面。実測でパネル左辺(x200)から先は隠れる */
.p-top__shoplist-panel {
  position: relative;
  z-index: 1;
}

/* Campaign基準（セクション上端=フレーム5674） */
.p-top__deco--blue {
  top: 50px; /* 実測: フレーム5724 */
  left: -81px; /* 実測: フレーム-162（画面左外へはみ出す） */
  width: 179px;
}

.p-top__deco--yellow-sm {
  top: 282px; /* 実測: フレーム5956 */
  left: 62px; /* 実測: フレーム-19 */
  width: 67px;
}

.p-top__deco--pink {
  top: 1266px; /* 実測: フレーム6940〜7060 */
  left: 1340px; /* 実測: 右端で見切れる位置 */
  width: 130px;
}

/* Shop List基準（セクション上端=フレーム7145） */
.p-top__deco--yellow-lg {
  top: 432px; /* 実測: フレーム7577〜7840 */
  left: -80px; /* 実測: 左端で見切れる（可視幅は0〜199） */
  width: 280px;
}

.p-top__campaign {
  padding-top: 207px; /* 実測: カード上端6109へ合わせ込み */
}

/* 🔒 §B-9 アニメ②「次の情報が表示される際、現在の情報が左へ押し出されるようにスライド」
   （Figma アニメーション指示 522:864・7/21解説資料§4で先方に約束済み）
   JS が translateX を1枚分ずつ動かす。動きを減らす設定では自動再生しない（common.js 側で判定）。 */
.p-top__campaign-viewport {
  overflow: hidden; /* 4枚目以降（複製分）を隠し、常に3枚だけ見せる */
  margin-top: 82px; /* 実測92 − 影の逃げ10 */
  padding: 10px 10px 26px; /* カード影(0 6px 20px)をクリップしない逃げ */
  margin-right: -10px;
  margin-left: -10px;
}

.p-top__campaign-slider {
  display: flex;
  gap: 20px; /* 実測 */
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.p-top__campaign {
  overflow: hidden; /* 背景装飾の泡のはみ出しを隠す */
}

.c-card-campaign {
  position: relative;
  width: 387px; /* 実測 */
  min-height: 710px; /* 実測 */
  flex-shrink: 0;
  padding: 15px 13px 60px;
  background: #ffffff;
  border-radius: 16px; /* 実測 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.c-card-campaign__img {
  display: block;
  width: 100%;
  height: 184px; /* 実測 */
  object-fit: cover;
  border-radius: 17px; /* 実測 */
}

.c-card-campaign__period {
  display: inline-block;
  margin: 38px 0 0 12px; /* 実測: 帯上端6346 */
  padding: 5px 14px;
  background: #f2f8ff; /* 実測 */
  border-radius: 4px;
  color: #333333;
  font-size: 14px;
}

.c-card-campaign__title {
  margin: 24px 12px 0; /* 実測: タイトル上端6425 */
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  color: #005ca7;
  font-family: "Zen Old Mincho", serif;
  font-size: 20px; /* 実測 */
  font-weight: 700;
}

.c-card-campaign__body {
  margin: 24px 12px 0; /* 実測: 本文上端6501 */
  color: #333333;
  font-size: 14px;
  line-height: 2.2; /* 実測: 行送り31px */
}

.c-card-campaign__more {
  position: absolute;
  bottom: 10px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 25px; /* 実測24.8 */
  height: 25px;
  background: #f2f8ff;
  border-radius: 50%;
  color: #005ca7;
  transform: translateX(-50%);
}

.p-top__campaign-dots {
  display: flex;
  justify-content: center;
  gap: 13px; /* 実測: ドット間隔22px−径 */
  margin-top: 26px; /* 実測: ドット中心6884（カードは本文全文表示で+34px高） */
}

.p-top__campaign-dot {
  width: 9px;
  height: 9px;
  border: 1px solid #5fcafd;
  border-radius: 50%;
}

.p-top__campaign-dot.is-active {
  background: #5fcafd;
  border: 0;
  width: 10px;
  height: 10px;
}

.p-top__campaign-btn {
  margin-top: 27px; /* 実測: ボタン上端6919.6 */
  text-align: center;
}

.p-top__campaign-btn .c-btn-arrow {
  min-width: 249px;
}

/* --------------------------------------------------------------------------
   Shop List（実測: パネル#E1F5FF 1328×573 rx24(56,7145)・地図カード663×465(655,7199)）
   -------------------------------------------------------------------------- */
.p-top__shoplist {
  margin-top: 164px; /* 実測: パネル上端7145へ合わせ込み */
}

.p-top__shoplist-panel {
  width: min(100% - 112px, 1328px); /* 実測: x56〜1384 */
  margin-inline: auto;
  padding: 54px 0 56px; /* 実測: 地図カード上端はパネル+54 */
  background: #e1f5ff;
  border-radius: 24px; /* 実測 */
}

.p-top__shoplist-inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.p-top__shoplist-copy {
  padding-top: 22px; /* 実測: 見出しcap7266 − 地図上端7199−54 */
  width: 455px;
}

.p-top__shoplist-text {
  margin-top: 62px; /* 実測: 本文上端7448 */
  font-size: 16px;
  line-height: 2; /* 実測 */
}

.p-top__shoplist-btn {
  margin-top: 62px; /* 実測: ボタン上端7599.6 */
}

.p-top__shoplist-btn .c-btn-arrow {
  min-width: 281px; /* 実測 */
}

.c-shop-map {
  flex-shrink: 0;
}

.c-shop-map img {
  display: block;
  width: 663px; /* 実測 */
  height: auto;
  border-radius: 16px; /* 実測 */
}

/* --------------------------------------------------------------------------
   Recruit / Contact（実測: 帯写真1439×624(0,7878)＋#5FCAFDオーバーレイ・カード587×320 rx16）
   -------------------------------------------------------------------------- */
/* 帯は1440幅固定の写真（実測: 看板幅852px＝写真を1516px相当で表示）。
   coverだと画面幅で倍率が変わり看板サイズが設計とズレるため、幅を明示する */
.p-top__contact {
  position: relative;
  margin-top: 158px; /* 実測: 帯上端7878へ合わせ込み */
  padding: 152px 0; /* 実測: 帯624px・カード320px */
  background: linear-gradient(rgba(95, 202, 253, 0.75), rgba(95, 202, 253, 0.75)), url("../img/top/contact-band-bg.webp") center center/1610px auto no-repeat;
  background-color: #5fcafd; /* 写真の外側は帯色で埋める */
}

.c-cta-cards {
  display: flex;
  justify-content: space-between;
  gap: 26px; /* 実測 */
}

.c-cta-cards__card {
  position: relative;
  width: 587px; /* 実測 */
  height: 320px; /* 実測 */
  padding-top: 61px; /* 実測: 英字グリフ上端8091・日本語8178 */
  background: #ffffff;
  border-radius: 16px; /* 実測 */
  text-align: center;
  transition: opacity 0.25s ease;
}

.c-cta-cards__card:hover {
  opacity: 0.92;
}

.c-cta-cards__card .c-sec-title {
  margin-bottom: 0;
}

/* 実測: グリフ全体（Rの上端8091〜下端8148）＝アセンダ込み57px */
.c-cta-cards__card .c-sec-title__en {
  font-size: 64px;
  line-height: 0.95;
}

.c-cta-cards__card .c-sec-title__ja {
  margin-top: 16px; /* 実測: 採用情報グリフ8180 */
}

.c-cta-cards__text {
  margin-top: 36px; /* 実測: 本文グリフ8250 */
  color: #333333;
  font-size: 14px;
  line-height: 1.9; /* 実測: 行送り27px */
}

.c-cta-cards__arrow {
  position: absolute;
  right: 18px; /* 実測 */
  bottom: 18px; /* 実測 */
  display: grid;
  place-items: center;
  width: 46px; /* 実測 */
  height: 46px;
  border: 1px solid #5fcafd;
  border-radius: 50%;
  color: #5fcafd;
}

/* --- SP（Figma TOP_SP 実測・390基準） --- */
@media (max-width: 768px) {
  /* 🔴 SP FVは全画面表示（2026-08-28 田畑さん指示「FVが画面いっぱいでないといけない」）。
     仕組み＝Figma実測の390×400デザインを「コンテンツ群」として崩さず保持し、
     ①FV自体をビューポート高いっぱいに広げ（svh=ブラウザバー表示時にちょうど全画面）
     ②本文・イラスト群は縦中央へ配置（Figma内部の相対位置は维持: calc(50% - (200 - Figma_y))）
     ③縁の装飾泡は画面の端へアンカー（黄=上端・桃=下端）
     画面高がデザイン高(400px)と同じときは Figma 座標と完全一致する（-122=78-200 等）。
     下層へ展開する場合も同じ3手順（_PUBLISH_PLAN_20260828.md §FV に手順記載）。 */
  .p-top__fv {
    height: 100vh; /* svh非対応ブラウザのフォールバック */
    height: 100svh;
    min-height: 400px; /* Figmaデザイン高を下回らない（要素の重なり防止） */
  }
  /* キャンバスはスケールせず全幅コンテナ化（子のSP座標はfv基準） */
  .p-top__fv-canvas {
    left: 0;
    width: auto;
    height: auto;
    inset: 0;
    transform: none;
  }
  /* PC用の端泡はSPクリップ形状版へ差し替え */
  .p-top__fv-bubble--yellow,
  .p-top__fv-bubble--blue,
  .p-top__fv-bubble--pink {
    display: none;
  }
  .p-top__fv-bubble--yellow-sp {
    display: block;
    top: 0; /* 楕円はy-61〜・PNGはy0でクリップ済み */
    left: 0;
    width: 121px;
  }
  .p-top__fv-bubble--pink-sp {
    display: block;
    top: auto;
    bottom: 41px; /* Figma実測 400-(297+62)=41 ＝下端からの距離で全画面時も下縁に追従 */
    left: 0; /* 楕円はx-3〜・PNGはx0でクリップ済み */
    width: 59px;
  }
  .p-top__fv-text {
    top: calc(50% - 122px); /* Figma y78 − デザイン中心200 ＝ 画面高400なら78pxに一致 */
    left: 37px;
  }
  .p-top__fv-catch {
    font-size: 24px; /* 実測（グリフ幅比0.959で確定） */
  }
  .p-top__fv-lead {
    margin-top: 7px; /* 実測: 行位置補正込み */
    margin-left: 2px; /* 実測: リード先頭グリフはキャッチより2px右 */
    font-size: 16px; /* 実測（幅ドリフト補正） */
    letter-spacing: 0.025em; /* 実測: 1行目+7px/3行目-8pxの矛盾→中間値（±3px） */
  }
  /* ビジュアルはクラスタ（右端基準）で再配置 */
  /* Figma SP 実測: イラスト群の上端は FV_Illustration 3 の y80（x215）。
     クラスタ原点を(215,80)に揃える＝旧(206,125)は45px下・9px左にずれていた */
  .p-top__fv-visual {
    position: absolute;
    top: calc(50% - 120px); /* Figma y80 − 200。本文(-122px)との2px差=Figma実測どおり */
    right: 2px; /* 390 - (215 + 173) = 2 */
    width: 173px;
    height: 234px;
  }
  /* 大きい水色玉は Figma y103 ＝ クラスタ原点80 から +23 */
  .p-top__fv-illust--bubble {
    top: 23px;
    left: 0;
    width: 173px;
  }
  /* PC用の一体イラストはSPでは分割版に差し替え */
  .p-top__fv-illust--counter,
  .p-top__fv-illust--basket,
  .p-top__fv-illust--cls {
    display: none;
  }
  /* SPは中央シーン切替なし=シーン①固定（②③はPC専用。JSもmin-width:769pxで停止） */
  .p-top__fv-scene--2,
  .p-top__fv-scene--3 {
    display: none;
  }
  .p-top__fv-scene {
    visibility: visible;
    opacity: 1;
    animation: none;
  }
  .p-top__fv-scene img {
    translate: 0 0;
    scale: 1;
    transition: none;
  }
  .p-top__fv-illust--sp {
    display: block;
  }
  /* 位置はクラスタ原点(215,80)からの相対＝Figma絶対値 − 原点 */
  .p-top__fv-illust--sp-scene {
    top: 0; /* Figma y80 − 80 */
    left: 0; /* Figma x215 − 215 */
    z-index: 2;
    width: 112px;
  }
  .p-top__fv-illust--sp-basket {
    top: 135px; /* Figma FV_Illustration 01 y215 − 80 */
    left: 91px; /* Figma x306 − 215 */
    z-index: 2;
    width: 65px;
  }
  /* Clean Living Support＝TEXT_PATH（235x235の箱に-28.6°回転）。
     書き出しPNGは可視グリフのみ＝absoluteRenderBounds(72.7x91.2 @x315.5,y77.2)で配置する。
     箱の座標(185,67)で置くと左下へ大きくずれる。 */
  .p-top__fv-illust--sp-cls {
    top: -3px; /* renderBounds y77.2 − クラスタ原点80 */
    left: 100px; /* renderBounds x315.5 − 215 */
    z-index: 3;
    width: 73px; /* renderBounds w72.7 */
  }
  /* PC用の水色玉流用はSPでは使わず、Figma実体（Bubbles_Blue 82x83）を専用書き出しで置く */
  .p-top__fv-illust--small {
    display: none;
  }
  .p-top__fv-illust--sp-blue {
    top: -122px; /* Figma Bubbles_Blue y-42 − クラスタ原点80 */
    left: 134px; /* Figma x349 − 215 */
    width: 82px;
  }
}
/* --- タブレット帯〜SP（デザインはPC1440/SP390の2種のみ＝中間帯は積みレイアウトを1024pxまで適用） --- */
@media (max-width: 1024px) {
  /* --- Pick Up SP: 見出し縦積み＋カード横スクロール（実測: カード幅315・左端25） --- */
  /* Figma SP 実測: pickup y385（FV下端400より上＝FVに食い込む）／
     見出しy385・サブy433・カードy482・節高214 */
  .p-top__pickup {
    margin-top: -15px; /* 見出し上端385 − FV下端400 */
  }
  .p-top__pickup-inner {
    display: block;
    width: 100%;
  }
  /* Figma SP: 見出しブロックは中央寄せ（実測 x136-253）。左パディングでは寄せない */
  .p-top__pickup-head {
    margin: 0;
    padding-left: 0;
    text-align: center;
  }
  /* サブ「ピックアップサービス」= Figma y433（Pick Up下端433に密着＝gap 0） */
  .p-top__pickup-head .c-sec-title__ja {
    margin-top: 0;
  }
  /* 🔒 監査#5「Pick Up見出しがSPで64.3px/19px」
     c-sec-title の既定 fs-clamp(64,84)/(19,22) を全見出し共通で当てていたが、
     **Pick Up だけ Figma SP が 37px/12px**（913:3532/3533）。
     他のSP見出し（News/Services/Shop List/Recruit/Contact/Campaign）はFigmaも64pxで既定が正しい
     ＝ここだけをページ側で上書きする（共通部品は変えない）。 */
  .p-top__pickup-head .c-sec-title__en {
    font-size: 37px;
    line-height: 1.5; /* 実測 lh 55.5 */
  }
  .p-top__pickup-head .c-sec-title__ja {
    font-size: 12px;
    line-height: 1.448; /* 実測 lh 17.376 */
  }
  .p-top__pickup-cards {
    margin-top: -20px; /* Figma: カード実体上端482（pt4込みで容器486→482へ） */
    overflow-x: auto;
    padding: 4px 25px 16px; /* 実測: カード左端25・下は影の逃げ */
    scrollbar-width: none;
  }
  /* 🔒 監査#7「Pick Upカードが589×200＝PC寸法のまま」
     Figma SP(913:3535/3550)＝**343.4×116.9**（比率はPCと同値2.94のため aspect-ratio は据置き）。
     flex 基準値がPCの589pxのままで、横スクロール指定だけでは縮まなかった。 */
  .p-top__pickup-card {
    flex: 0 0 343.4px;
    width: 343.4px;
  }
  .p-top__pickup-cards::-webkit-scrollbar {
    display: none;
  }
  /* 実測(SP) 913:3535/3550: カード343×116 r10.49・2枚を横並び（全体699幅＝横スクロール） */
  .p-top__pickup-card {
    flex-shrink: 0;
    width: 343px;
    border-radius: 10.5px;
  }
  /* SPは写真枠が狭い（158.6px）ため、バッジも少しだけ内側へ寄せる */
  .p-top__pickup-card .c-soon-badge {
    top: 8px;
    left: 8px;
  }
  /* 比率（写真窓46.36% / 本文左51.90% / 弧11.37%）はPCとほぼ同値＝上の定義がそのまま効く。
     固定px（文字・矢印）だけSPの実測へ落とす */
  .p-top__pickup-card-title {
    font-size: 20px; /* 実測 913:3543/3558 */
    line-height: 1.45;
  }
  .p-top__pickup-card-arrow {
    width: 17px; /* 実測 913:3545/3559: 17×17 */
    height: 17px;
  }
  .p-top__pickup-card-arrow svg {
    width: 4px; /* 実測 913:3546: 4×8 */
    height: 8px;
  }
  .p-top__pickup-card-text {
    margin-top: 4px;
    font-size: 11px; /* 実測 913:3548/3562 */
    line-height: 1.5;
  }
  .p-top__pickup-card-line {
    margin-top: 4px;
  }
  /* 🔴 2026-08-27 撤回: 旧実装は Figma `913:3562`(#333333) をそのまま写していたが、
     これは **Figma側の不整合**（CLAUDE.md §0②）＝同カードのタイトル `913:3558` は #FFFFFF、
     同じ本文の別ノード `913:3263` も #FFFFFF。青いカード上の本文だけ黒は破綻しており、
     ユーザー確認(8/27)でも白が正。∴ SP専用の色分けを撤回し、PC同様に白を継承する。 */
  /* --- News SP: 見出し→リスト→ボタンの縦積み・日付が先/バッジ後 --- */
  .p-top__news {
    padding-top: 64px;
  }
  .p-top__news-inner {
    flex-direction: column;
  }
  .p-top__news-list {
    width: 100%;
    margin-left: 0;
  }
  /* 見出しとボタンをリストの前後へ振り分ける */
  .p-top__news-head {
    display: contents;
  }
  .p-top__news-head .c-sec-title {
    order: -1;
    margin-bottom: 24px;
  }
  .p-top__news-list {
    order: 0;
  }
  .p-top__news-head .c-btn-arrow {
    order: 1;
    margin: 32px auto 0;
    min-width: 200px;
  }
  .c-news-item__meta {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 16px;
  }
  .c-news-item__badge {
    min-width: 74px;
    width: auto;
    height: 28px;
    padding: 0 9px;
    font-size: 12px;
  }
  .c-news-item__date {
    font-size: 14px;
  }
  .c-news-item__title {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.8;
  }
  /* --- Services SP: 縦積み・泡248px・サブ帯は変化色 --- */
  .p-top__service {
    padding-top: 64px;
  }
  .p-top__service-head {
    display: block;
  }
  .p-top__service .c-sec-title__ja {
    margin-top: 14px;
  }
  .p-top__service-copy {
    width: auto;
    padding-top: 24px;
  }
  .p-top__service-catch {
    font-size: 20px;
    line-height: 1.7;
  }
  .p-top__service-text {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.9;
  }
  /* 🔒 49件(SP)「サービス一覧: 球体は少しずれて配列」
     実測(SP 913:3461/3470/3478/3487)＝**左右交互にずらし、縦は重ねる**（フレーム390基準）:
       衣類    x-35  334×337
       デラックス x+82  346×347（前の泡と -118px 重なる）
       加工    x-34  331×334（-113px）
       ハウス   x+115 279×273（-71px）
     ＝中央揃え＋gap36px の等間隔は誤り（指摘のとおり） */
  .p-top__service-bubbles {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 48px;
    padding: 0;
    overflow: hidden; /* 左右のはみ出しで横スクロールを出さない */
  }
  /* 🔴 2026-08-27 修正: 旧値は Figma の absoluteBoundingBox（=透明余白を含む外形）から採っており、
     泡1/3が margin-left:-8.97% で画面外へ出て左端が切れていた。
     Figma実物は absoluteRenderBounds（=実際に絵が描かれる範囲）が 4玉とも 0〜390 に収まる＝切れない。
     一方 PNG素材は透明余白がほぼ無い（不透明幅が画像幅の97〜99%）ため、bb基準の負マージンをそのまま
     当てると絵が直接はみ出す。∴ renderBounds と PNGの不透明領域から逆算した値を使う。
     算出: width = renderBounds幅 ÷ (PNG不透明幅/PNG幅)、margin-left = renderBounds左 − width×左余白率 */
  .c-bubble-icon {
    width: 62.31%; /* 実測 直径243/390 */
    height: auto;
    aspect-ratio: 1; /* 実測: 玉は正円（幅243〜247 / 高244〜249） */
    margin-left: 2.05%; /* 実測 左端8/390 */
  }
  .c-bubble-icon--2 {
    width: 62.31%; /* 実測 243/390 */
    margin-top: -5.13%; /* 実測 泡1下端2135 -> 泡2上端2113 = -20px */
    margin-left: 34.62%; /* 実測 左端135/390 */
  }
  .c-bubble-icon--3 {
    width: 62.56%; /* 実測 244/390 */
    margin-top: -4.87%; /* 実測 -19px */
    margin-left: 2.05%; /* 実測 左端8/390 */
  }
  .c-bubble-icon--4 {
    width: 63.33%; /* 実測 247/390 */
    margin-top: -2.05%; /* 実測 -8px */
    margin-left: 33.08%; /* 実測 左端129/390 */
  }
  /* 🔒 49件(SP)「campaignからの球体イラストはSPは削除していただいてます」
     実測: SPフレーム(913:3098)側に背景の泡は無い。`913:3102〜3105` は
     **SPフレームに内包されたPCフレーム(TOP_デザイン案2_修正3)側の子**＝SPデザインの一部ではない。
     ∴SPでは非表示にする（PCは従来どおり表示） */
  .p-top__deco {
    display: none;
  }
  /* 🔴 2026-08-27: 泡の外形を実寸へ直したのに伴い、中身の位置も固定pxから%へ。
     固定pxのままだと縮んだ泡の中で位置だけ据え置かれて下へ抜ける。
     値は Figma `913:3461`（Service Item / Clothing・高さ337）内の実測yを高さ比で割ったもの */
  /* 中身の位置は Figma正解画像(top_sp.png)の泡1（上1889/下2135・高246）を
     画素で直接測った値。玉が正円なので % は玉の高さ＝幅に対する比。 */
  /* 🔴 2026-08-28 修正（瀬野尾さん指摘「SPの丸の中のイラストが小さい」・実測で確認）
     旧 width:24.00%（「アイコン高59/246」）は**測定対象を取り違えた値**だった。
     Figma SP 913:3474/3486/3495 等の icon は **4玉とも 99.8×99.8 で一定**。
     泡は absoluteBoundingBox（透明余白込み 279〜346）ではなく **absoluteRenderBounds**（実描画 246.7〜251.6）
     で見るのが正しく（罠#5と同型）、icon/泡 = **40.42/40.30/40.45/39.65 ＝ 平均 40.22%**。
     PC実装も 111/273 = **40.66%** で一致＝**SPだけが24%で小さかった**ことが裏どりできる。
     上端も同様に renderBounds 基準へ: Figma icon上端は泡上端から +7.2%（実測 y差18/250）。 */
  /* 🔴 2026-08-28 再修正（ユーザー指摘「文字が大きすぎ/イラストが下/重なる」・全要素を再実測）
     旧値は **字高（グリフの見た目の高さ）を font-size として採っていた**（罠#12と同型）。
     Figma実値は fontSize であって字高ではない:
       label  字高17 → **fs20**（4玉とも）
       sub    字高11 → **fs14**（泡1/2）・**fs16**（泡3/4）
     アイコン上端も 16.26% は誤りで、Figma実測は **5.4〜6.35%（平均5.97%）**。
     40.22%へ拡大した際に上端が下のままだったためラベルと重なっていた。
     基準はすべて泡の absoluteRenderBounds（実描画246.7〜251.6）。 */
  .c-bubble-icon__icon {
    top: 5.97%; /* 実測 Figma: 15.2/250.4・15.1/249.6・15.9/250.6・13.3/245.5 の平均 */
    width: 40.22%; /* 実測 icon99.8 / 泡renderBounds247（PC 111/273=40.66%と一致） */
    height: auto;
    aspect-ratio: 1;
  }
  .c-bubble-icon__label {
    top: 58.6%; /* 実測 ラベル中心の4玉平均（59.28/60.59/57.23/57.35） */
    font-size: 20px; /* 実測 Figma style.fontSize=20（旧17は字高の誤採用） */
    line-height: 1.3; /* 実測 lh24〜28.96 ÷ fs20 */
  }
  .c-bubble-icon__divider {
    top: 70.09%; /* 実測 4玉平均（71.40/71.62/67.63/69.70） */
    width: 52.26%; /* 実測 線幅127/243 */
  }
  .c-bubble-icon__sub {
    top: 73.1%; /* 実測 4玉平均（74.24/74.70/70.66/72.79） */
    width: auto;
    min-width: 0;
    padding: 0;
    font-size: 14px; /* 実測 Figma fs14（泡1/2）。泡3/4は下で16へ */
    line-height: 1.5; /* 実測 lh21 ÷ fs14 */
    transform: translateX(-50%); /* 上位の中央寄せを維持 */
  }
  /* 実測: 泡3「シミ抜き/防虫等」・泡4「エアコン/カーペット等」だけ fs16（913:3484 / 913:3493） */
  .c-bubble-icon--3 .c-bubble-icon__sub,
  .c-bubble-icon--4 .c-bubble-icon__sub {
    font-size: 16px;
  }
  .c-bubble-icon__arrow {
    top: 84.66%; /* 実測 4玉平均（84.29/84.56/84.57/85.22） */
    width: 8.94%; /* 実測 22/246 */
    height: auto;
    aspect-ratio: 1;
  }
  .p-top__service-btn {
    margin-top: 48px;
    margin-left: 0;
    text-align: center;
  }
  /* --- Why Choose Us SP: 縦積み・円写真260px中央 --- */
  .p-top__why {
    margin-top: 72px;
  }
  /* 🔴 2026-08-27 ユーザー指示: SPで「一覧を見る」が画面下に隠れて見えなかった。
     原因＝帯がPCの固定951px（実測849px）で、実機は**アドレスバーぶん(約90px)を引いた
     可視領域が画面高より小さい**ため下端が入り切らない。
     ∴ 帯の高さを可視領域(dvh)基準にし、中身が収まらない時だけ伸ばす。
     `100dvh` はアドレスバーの出入りに追従する単位（非対応ブラウザは vh にフォールバック）。 */
  /* 実測: 中身(l-inner)=745px。旧padding(上48+下56)で849pxになり、
     実機の可視領域(750px前後)に収まらず「一覧を見る」が下へはみ出していた。
     ∴ 上下paddingを詰め、帯の高さは**可視領域を超えない**ようにする。
     `dvh` はアドレスバーの出入りに追従する単位（非対応ブラウザは vh にフォールバック）。 */
  .p-top__why-band {
    height: 100vh;
    height: 100dvh;
    padding-top: 24px;
    padding-bottom: 16px;
    overflow: hidden;
  }
  /* 中身を帯の高さに収める。
     実測(可視750px時): 見出し105 + 余白40 + ポイント601(+上36) = 782px で 32px はみ出し、
     「一覧を見る」が切れていた。写真と本文は情報なので削らず、**区間の余白を詰めて**収める。 */
  /* ⚠️ justify-content:center は中身が箱より高いと**上下へ等しくはみ出す**ため、
     下端のボタンが画面外へ出る（実測: 箱563 / 中身602 でボタン下端686 > 画面667）。
     `safe center` で、収まらない時は上詰めに切り替える（対応外ブラウザ向けに flex-start を先に置く）。 */
  .p-top__why-band .l-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    justify-content: safe center;
    height: 100%;
  }
  .p-top__why-band .c-sec-title {
    margin-bottom: 20px; /* 実測40 → 20 */
  }
  .p-top__why-band .c-point-block {
    margin-top: 0; /* 実測36 → 0（上の余白で足りる） */
  }
  .p-top__why-band .c-point-block__body {
    margin-top: 16px; /* 実測28 → 16 */
  }
  /* 小さい端末(iPhone SE=667px等)では上記でも入り切らないため、
     写真の直径と区間余白をさらに詰める。写真は情報量が落ちないよう比率のみ縮める。 */
}
@media (max-width: 1024px) and (max-height: 700px) {
  .p-top__why-band .c-sec-title {
    margin-bottom: 12px;
  }
  .p-top__why-band .c-point-block__visual {
    width: 200px;
    height: 200px;
  }
  .p-top__why-band .c-point-block__body {
    margin-top: 12px;
  }
}
@media (max-width: 1024px) {
  /* sticky で固定する箱も可視領域に合わせる（PCの951px基準の中央寄せを解除） */
  .p-top__why.is-switching .p-top__why-sticky {
    top: 0;
    height: 100vh;
    height: 100dvh;
  }
  /* 監査#9: Figma SP(913:3408)は **42px**（旧40pxは目算）。lh 54.642/42 */
  .p-top__why-band .c-sec-title__en {
    font-size: 42px;
    line-height: 1.301;
  }
  /* 🔴 2026-08-27 ユーザー指示: SPで「一覧を見る」が画面下に隠れていた。
     実測: 中身641〜740 + padding(48+56) = 745〜844px で、実機の可視領域
     （アドレスバーぶんを引いた 667〜750px 相当）に収まらず下端が切れていた。
     ∴ 帯の高さを可視領域(dvh)に固定し、padding を詰めて中身を収める。
     ⚠️ このブロックは 1024px 側の指定より後に来るため、**帯の寸法はここが最終値**。 */
  .p-top__why-band {
    height: 100vh;
    height: 100dvh;
    padding: 24px 0 16px;
  }
  /* Figma SP(913:3409/3426/3448)＝20px。24pxはSPフレームに内包されたPCフレーム(913:3230)の値 */
  .p-top__why-band .c-sec-title__ja {
    margin-top: 16px;
    font-size: 20px;
  }
  .c-point-block {
    margin-top: 36px;
  }
  .c-point-block__visual {
    width: 260px;
    margin: 0 auto;
  }
  .c-point-block__num {
    font-size: 24px;
  }
  .c-point-block__body {
    position: static;
    width: auto;
    margin-top: 28px;
  }
  /* 基底(PC)の帯別折返し幅580/570pxは2クラス指定のため、同詳細度で解除しないと
     SP/タブレットに漏れて見出しが画面外へはみ出す（2026-08-19 監査で実測: 帯2/3が390で+210px溢れ） */
  .p-top__why-band--2 .c-point-block__body,
  .p-top__why-band--3 .c-point-block__body {
    width: auto;
  }
  /* 🔴 49件(SP)「選ばれる理由Point3『自社工場〜』テキストずれて見えない」の原因。
     帯3のタイトルに **PC用の `min-width:576px`**（32px×18文字の1行幅）が入ったままで、
     SP(22px・画面390)でも効いてしまい**右へ576pxはみ出して見切れていた**。SPでは解除する */
  .p-top__why-band--3 .c-point-block__title {
    min-width: 0;
  }
  .c-point-block__title {
    font-size: 22px;
    text-align: center;
  }
  .c-point-block__text {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.9;
  }
  .c-point-block__text + .c-point-block__text {
    margin-top: 16px;
  }
  .c-point-block__btn {
    margin-top: 24px;
    text-align: center;
  }
  /* 監査#6: PC用の min-width 249px がSPにも効いていた＝幅はラベル長で伸ばす。
     🔴 2026-08-27 修正: 枠を #333(黒) から白へ。Figma正解画像を実見すると
     why帯（紺/水色の色地）上のボタンは**白地・枠は地に溶ける白**で、黒枠は出ていない。
     旧値は測定記録の「枠#333」をそのまま当てたものだが、色地の上では明らかに破綻していた。 */
  .c-point-block__btn .c-btn-arrow {
    min-width: 0;
    border: 0.76px solid #ffffff;
  }
  /* --- Campaign SP: 1枚幅の横スクロールスライダー --- */
  .p-top__campaign {
    padding-top: 72px;
  }
  .p-top__campaign-slider {
    overflow-x: auto;
    gap: 16px;
    margin-top: 40px;
    padding: 4px 47px 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .p-top__campaign-slider::-webkit-scrollbar {
    display: none;
  }
  .c-card-campaign {
    width: 296px; /* 実測 */
    min-height: 0;
    scroll-snap-align: center;
  }
  .c-card-campaign__img {
    height: 150px;
  }
  .c-card-campaign__title {
    font-size: 18px;
  }
  .c-card-campaign__body {
    line-height: 2;
  }
  .p-top__campaign-dots {
    margin-top: 24px;
  }
  .p-top__campaign-btn {
    margin-top: 32px;
  }
  /* 監査#6: PC用 min-width 249px がSPにも効いていた。Figma SP(913:3374)=190.9幅＝ラベル長で伸びる */
  .p-top__campaign-btn .c-btn-arrow {
    min-width: 0;
  }
  /* --- Shop List SP: 縦積み・地図全幅 --- */
  .p-top__shoplist {
    margin-top: 72px;
  }
  .p-top__shoplist-panel {
    width: calc(100% - 30px);
    padding: 40px 0 44px;
  }
  /* 🔒 49件(SP)「shopリスト: 地図・ボタンの順でお願いします」
     ＝**地図 → ボタン** の順に見せる。DOM順は 見出し/本文/ボタン → 地図 のままなので、
     flex の order で地図を先に出す（ボタンだけを copy の外へ出す形にはしない＝PCは横並びのため）。
     ⚠️Figma SP は「ボタン(y6862) → 地図(y6931)」＝**先方指示と逆**。指示を優先した（疑義#26） */
  .p-top__shoplist-inner {
    display: flex;
    flex-direction: column;
  }
  .p-top__shoplist-copy {
    display: contents; /* 見出し・本文・ボタンを直接 inner の子として並べる */
  }
  .p-top__shoplist-copy .c-sec-title,
  .p-top__shoplist-text {
    order: 1;
  }
  .c-shop-map {
    order: 2;
  }
  .p-top__shoplist-btn {
    order: 3;
  }
  .p-top__shoplist-copy .c-sec-title--left {
    text-align: center;
  }
  .p-top__shoplist-text {
    margin-top: 24px;
    font-size: 14px;
    text-align: left;
  }
  .p-top__shoplist-btn {
    margin-top: 28px;
  }
  /* 監査#6: 同上。Figma SP(913:3325)=222.9幅（ラベル「店舗一覧を見る」ぶん長い） */
  .p-top__shoplist-btn .c-btn-arrow {
    min-width: 0;
  }
  .c-shop-map {
    margin-top: 32px;
  }
  .c-shop-map img {
    width: 100%;
  }
  /* --- Recruit / Contact SP: カード縦積み --- */
  .p-top__contact {
    margin-top: 72px;
    padding: 48px 0;
  }
  /* 🔒 監査#8「Figma SPは Contact(上) → Recruit(下)、実装は Recruit→Contact」
     実測: SP Contact `913:3313` y7364 ／ Recruit `913:3304` y7581 ＝**Contactが上**。
     PCは Recruit(x264) 左 / Contact(x850) 右 で**実装どおりが正**。
     ∴ マークアップ順（=PC順・DOM順=読み上げ順）は変えず、SPだけ視覚順を反転する。 */
  .c-cta-cards {
    flex-direction: column-reverse;
    gap: 20px;
  }
  .c-cta-cards__card {
    width: 100%;
    height: auto;
    padding: 32px 20px 72px;
  }
}
/* ==========================================================================
   SP周回（2026-08-27）: Figma SP 913:3098 実測。768px以下限定。
   ⚠️ SPフレームにはPC枠 913:3100（幅1440）が内包される（罠#16）＝SP側ノードのみ採用。
   ========================================================================== */
@media (max-width: 768px) {
  /* News（実測 913:3501系: 日付14・カテゴリ14・本文16 lh27.2） */
  .p-top__news .c-news-item__badge {
    font-size: 14px;
  }
  .p-top__news .c-news-item__title {
    font-size: 16px;
    line-height: 1.7;
  }
  /* Services（実測 913:3452系: キャッチ24 lh40.8・本文16 lh28.8） */
  .p-top__service-catch {
    font-size: 24px;
    line-height: 1.7;
  }
  .p-top__service-text {
    font-size: 16px;
    line-height: 1.8;
  }
}
/* SP字間の個別値（全数照合 2026-08-28・_SP_AUDIT_CLASSIFY_20260828.md）
   SP既定を0にした際、この要素だけFigma SPが 0.48px を明示要求（1028系 実測） */
@media (max-width: 768px) {
  .p-top__service-text {
    letter-spacing: 0.48px;
  }
}