/* きてこ オープンキャンペーン（salon.kiteko.jp/campaign/）。LP と同じ1枚から書き出し（tools/build_salon.php の salon_campaign）、lp.css の上に重ねる。
   body に .cp。足すのは FV・「4つのおまけ」・料金の据え置き・出張の注記だけで、LP の見た目は変えない。
   決まり（lp.css 2026/10/20〜22）：文字は #1F1F1F・16px 以上、薄いグレーの文字は使わない、黒い地は使わない、FV は 390x844 に申込＋副ボタン2つまで収める。
   */
:root { --cp-rose: #E5507F; --cp-deep: #B8305E; --cp-peach: #F79A4D; --cp-blush: #FFF1F4; --cp-cream: #FFF8F1; --cp-ink: #1F1F1F; }

/* 札（セル）の部品：「4つの特典」の見出しで使う。濃い桃色 #C8325F（白字 4.97:1）、白（#1F1F1F）、黄色 #FFD34D（#1F1F1F） */
:root { --cp-cellpink: #C8325F; --cp-sun: #FFD34D; --cp-orange-dk: #E06A2E; }
.cp-cell { margin: 0; font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; font-weight: 900; line-height: 1.25;
  box-shadow: 0 6px 0 rgba(120, 30, 60, .22); }
.cp-ribbon { background: var(--cp-cellpink); color: #fff; font-size: 17px; padding: 4px 14px; transform: rotate(-3deg); margin-left: 4px; }
.cp-tag { font-size: 16px; padding: 3px 7px; }
.cp-tag.is-white { background: #fff; color: var(--cp-ink); }
.cp-tag.is-pink { background: var(--cp-cellpink); color: #fff; }

/* 申込：白い字が乗る桃色→橙は、橙の端を #E06A2E にする（白で 3.35:1。大きな太字） */
.cp .cta { background: linear-gradient(120deg, var(--cp-rose), var(--cp-orange-dk)); }

/* ── FV（2026/10/28「FVが分かりづらい」）──
   インスタから来た人に、最初の1画面で「何のサービスか」を伝える。LiME・かんざし にならい、
   種類のラベル → 何ができるかの見出し → 実際の画面（LINE の予約 → きてこ → 予約表・顧客台帳）→ 機能の札 → 申込、の順。
   キャンペーンは上の小さな札にまとめる。スマホは縦に1列、PC は左に文・右に画面 */
.cp-fv { background: linear-gradient(180deg, #FFF1F4 0%, #FFF8F1 100%); padding: 12px 0 18px; }
.cp-fv-in { max-width: 540px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-areas: "copy" "visual" "chips" "act"; }
.cp-fv-copy { grid-area: copy; }
.cp-visual { grid-area: visual; }
.cp-chips { grid-area: chips; }
.cp-fv-act { grid-area: act; }

.cp-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; font-weight: 900; }
.cp-offer-main { background: var(--cp-cellpink); color: #fff; font-size: 16px; line-height: 1.4; padding: 4px 10px; border-radius: 6px; }
.cp-offer-main b { font-size: 18px; }
.cp-offer-sub { background: #fff; color: #1F1F1F; font-size: 16px; line-height: 1.4; padding: 2px 8px; border: 2px solid var(--cp-cellpink); border-radius: 6px; }
.cp-cat { margin: 0 0 2px; color: #B8305E; font-weight: 700; font-size: 16px; line-height: 1.5; }
.cp-h1 { margin: 0 0 10px; color: #1F1F1F; font: 900 25px/1.38 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; letter-spacing: .01em; }
.cp-brand { color: #C8325F; }

/* 実際の画面。左：お客様の LINE（HTML で組んだ見本）、中：きてこ、右：お店の画面（実際の管理画面のスクリーンショット） */
.cp-visual { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; gap: 0; margin: 0 0 10px;
  background: #fff; border-radius: 16px; padding: 10px 10px 8px; box-shadow: 0 6px 18px rgba(184, 48, 94, .12); }
.cp-v-line, .cp-v-shop { display: flex; flex-direction: column; align-items: center; }
.cp-v-phone { width: 100%; max-width: 150px; height: 128px; border-radius: 14px; background: #8CABD9; padding: 0 0 8px; overflow: hidden; border: 3px solid #1F1F1F; }
.cp-v-head { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; padding: 4px 6px; background: #06C755; color: #fff; font-weight: 900; font-size: 12px; line-height: 1.3; }
.cp-v-head .ic { width: 14px; height: 14px; }
.cp-v-q, .cp-v-a { margin: 0 6px 6px; padding: 5px 7px; border-radius: 10px; font-size: 12px; line-height: 1.4; font-weight: 700; color: #1F1F1F; }
.cp-v-q { background: #A8E87A; margin-left: 16px; border-radius: 10px 2px 10px 10px; }
.cp-v-a { background: #fff; margin-right: 14px; border-radius: 2px 10px 10px 10px; }
.cp-v-a b { display: block; color: #04913E; }
.cp-v-arrow { position: relative; height: 44px; display: flex; align-items: center; justify-content: center; }
.cp-v-arrow::before { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 4px; margin-top: -2px; background: var(--cp-rose); }
.cp-v-arrow::after { content: ""; position: absolute; right: -4px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 10px solid var(--cp-rose); }
.cp-v-arrow span { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; background: #C8325F; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 #8E1F45; }
.cp-v-arrow span img { width: 34px; height: auto; }
.cp-v-shots { position: relative; width: 100%; max-width: 160px; height: 128px; }
.cp-v-shot { position: absolute; top: 0; width: 66px; height: 128px; border-radius: 12px; border: 3px solid #1F1F1F; overflow: hidden; background: #fff; }
.cp-v-shot img { width: 100%; height: auto; display: block; }
.cp-v-shot.s1 { left: 0; transform: rotate(-3deg); z-index: 1; }
.cp-v-shot.s2 { right: 0; transform: rotate(3deg); }
.cp-v-cap { margin: 6px 0 0; font-size: 16px; font-weight: 900; line-height: 1.35; text-align: center; color: #1F1F1F; }

/* 機能の札（4つ）。プランの違いは料金の節で見せる */
.cp-chips { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 3px; }
.cp-chips li { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid #F2BFCF; border-radius: 10px; padding: 1px 10px;
  font-size: 16px; font-weight: 700; line-height: 1.3; color: #1F1F1F; }
.cp-chips .ic { width: 20px; height: 20px; flex: none; color: #C8325F; }

.cp-fv-act { padding: 0; }
.cp-fv .cta { min-height: 58px; font-size: 21px; }
.cp-fv .cta-sub { margin-top: 6px; font-size: 16px; }
.cp-line-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; margin: 8px 0 0; padding: 6px 14px; border-radius: 999px;
  background: #06C755; color: #fff; font-weight: 900; font-size: 18px; line-height: 1.3; text-decoration: none; box-shadow: 0 4px 0 #04913E; }
.cp-line-btn small { font-size: 16px; font-weight: 700; white-space: nowrap; }
.cp-line-btn .ic { width: 24px; height: 24px; flex: none; }
.cp-line-btn:focus-visible { outline: 3px solid #1F1F1F; outline-offset: 2px; }
.cp-fv .alt2 { margin-top: 10px; }
.cp-fv .alt-btn { min-height: 50px; font-size: 17px; background: #fff; }
.cp-fv-visit { margin: 12px 0 0; color: #1F1F1F; font-weight: 900; font-size: 16px; line-height: 1.5; text-align: center; }

/* 背の低いスマホ（ブラウザのバーで 760px を切る）：画面の見本を低くして、申込を1画面に残す */
@media (max-width: 767px) and (max-height: 760px) {
  .cp-v-phone, .cp-v-shots, .cp-v-shot { height: 112px; }
  .cp-v-q { display: none; }
  .cp-v-cap { font-size: 16px; margin-top: 4px; }
  .cp-h1 { font-size: 23px; }
}

/* ── これまで／きてこなら（FV のすぐ下）── */
.cp-ba { background: #fff; padding: 40px 0 44px; }
.cp-ba-h { margin: 0 0 18px; font: 900 26px/1.4 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; }
.cp-ba-grid { display: grid; gap: 14px; }
.cp-ba-col { border-radius: 16px; padding: 16px 18px; }
.cp-ba-col ul { list-style: none; margin: 0; padding: 0; }
.cp-ba-col li { position: relative; padding: 6px 0 6px 30px; font-size: 17px; line-height: 1.6; font-weight: 700; color: #1F1F1F; }
.cp-ba-col li small { font-size: 16px; font-weight: 700; }
.cp-ba-t { margin: 0 0 6px; font: 900 19px/1.4 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; }
.is-before { background: #F4F1EE; }
.is-before .cp-ba-t { color: #1F1F1F; }
.is-before li::before { content: "×"; position: absolute; left: 4px; top: 5px; font-weight: 900; color: #6B5F57; }
.is-after { background: #FFF1F4; border: 3px solid var(--cp-rose); }
.is-after .cp-ba-t { color: #B8305E; }
.is-after li::before { content: "✓"; position: absolute; left: 2px; top: 5px; font-weight: 900; color: #C8325F; }

/* ── PC：左に文と札と申込、右に画面の見本 ── */
@media (min-width: 768px) {
  .cp-fv { padding: 40px 0 48px; }
  .cp-fv-in { max-width: 1120px; padding: 0 40px; grid-template-columns: 1fr 1fr; column-gap: 48px;
    grid-template-areas: "copy visual" "chips visual" "act visual"; grid-template-rows: auto auto 1fr; align-items: start; }
  .cp-visual { align-self: center; padding: 24px 20px 18px; grid-template-columns: 1fr 56px 1fr; }
  .cp-h1 { font-size: 40px; }
  .cp-cat { font-size: 18px; }
  .cp-v-phone { max-width: 210px; height: 270px; }
  .cp-v-head { font-size: 16px; padding: 8px 10px; }
  .cp-v-head .ic { width: 18px; height: 18px; }
  .cp-v-q, .cp-v-a { font-size: 16px; }
  .cp-v-shots { max-width: 250px; height: 270px; }
  .cp-v-shot { width: 122px; height: 262px; }
  .cp-visual { grid-template-columns: 1fr 64px 1fr; }
  .cp-v-arrow span { width: 58px; height: 58px; }
  .cp-v-arrow span img { width: 44px; }
  .cp-chips { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cp-chips li { padding: 6px 10px; }
  .cp-v-cap { font-size: 16px; }
  .cp-chips { max-width: 520px; }
  .cp-fv-act { max-width: 520px; }
  .cp-ba-grid { grid-template-columns: 1fr 1fr; }
  .cp-ba .wrap { max-width: 960px; }
}

/* ── 4つの特典（FV のすぐ下。2026/10/23「もっと特別感あるように」）──
   地は桃色→桃橙→クリーム。見出しは FV と同じ札（セル）。特典はクーポン券のカード：左に黄色の帯と「特典1〜4」、
   右下に切り取り線の切り欠き、少しずつ傾ける。スマホは縦、PC は2×2。見えたときに1回だけ順に出る（動きを減らす設定では出たまま） */
.cp-sec { padding: 52px 0 56px; }
.cp-gifts { position: relative; overflow: hidden; background: linear-gradient(170deg, #FFD9E4 0%, #FFE4CF 55%, #FFF6DC 100%); }
.cp-gifts-spark i { position: absolute; width: 18px; height: 18px; background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: .9; }
.cp-gifts-spark i:nth-child(1) { left: 6%; top: 40px; }
.cp-gifts-spark i:nth-child(2) { right: 8%; top: 90px; width: 26px; height: 26px; background: var(--cp-sun); }
.cp-gifts-spark i:nth-child(3) { left: 4%; top: 46%; width: 12px; height: 12px; }
.cp-gifts-spark i:nth-child(4) { right: 5%; top: 62%; background: var(--cp-sun); }
.cp-gifts-spark i:nth-child(5) { left: 48%; bottom: 24px; width: 14px; height: 14px; }
.cp-gifts .wrap { position: relative; }

.cp-gifts-head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 26px; }
.cp-gifts-head .cp-ribbon { font-size: 18px; }
.cp-gifts-h { margin: 8px 0 0; background: #fff; color: var(--cp-ink); font-size: 30px; line-height: 1.3; padding: 6px 14px 8px; transform: rotate(1.2deg); }
.cp-gifts-head .cp-tag { margin-top: 10px; font-size: 17px; padding: 4px 12px; transform: rotate(-1.5deg); }

.cp-coupons { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.cp-coupon { position: relative; background: #fff; border-radius: 16px; padding: 20px 18px 20px 26px;
  box-shadow: 0 8px 0 rgba(184, 48, 94, .16), 0 16px 28px rgba(184, 48, 94, .12);
  /* 左の黄色い帯。右の切り取り線の切り欠きは ::after（地の色の丸） */
  background-image: linear-gradient(var(--cp-sun), var(--cp-sun)); background-size: 10px 100%; background-repeat: no-repeat; }
.cp-coupon:nth-child(odd) { transform: rotate(-.8deg); }
.cp-coupon:nth-child(even) { transform: rotate(.8deg); }
.cp-no { position: absolute; top: -1px; right: 22px; background: var(--cp-cellpink); color: #fff; font: 900 16px/1 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  padding: 8px 10px 10px; border-radius: 0 0 8px 8px; }
.cp-coupon-ic { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--cp-rose), var(--cp-orange-dk)); box-shadow: 0 4px 0 #A8285A; }
.cp-coupon-ic .ic { width: 30px; height: 30px; }
.cp-coupon h3 { margin: 12px 0 8px; font: 900 19px/1.4 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; }
.cp-key { display: block; font-size: 30px; line-height: 1.25; color: var(--cp-deep); letter-spacing: -.01em;
  background: linear-gradient(transparent 62%, #FFE38A 62%); width: fit-content; }
.cp-coupon p { margin: 0; font-size: 17px; line-height: 1.8; color: var(--cp-ink); }
.cp-coupon p b { color: var(--cp-deep); }

/* 特典4：QR ポップの見本をカードの中に */
.cp-coupon-pop { padding-bottom: 22px; }
.cp-pop { display: flex; justify-content: center; padding-top: 16px; }
.cp-pop-card { width: 172px; background: #fff; border: 3px solid var(--cp-rose); border-radius: 14px 14px 6px 6px; text-align: center; padding: 10px 10px 12px;
  box-shadow: 0 10px 0 -2px #F2BFCF, 0 14px 22px rgba(184, 48, 94, .16); transform: rotate(2deg); }
.cp-pop-card small { display: block; font-size: 16px; font-weight: 700; }
.cp-pop-card b { display: block; font-size: 20px; line-height: 1.35; color: #04913E; margin: 4px 0 8px; font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; }
.cp-pop-qr { display: inline-flex; width: 74px; height: 74px; border: 2px solid var(--cp-ink); border-radius: 8px; align-items: center; justify-content: center; }
.cp-pop-qr svg { width: 56px; height: 56px; stroke: var(--cp-ink); fill: none; stroke-width: 2; }

/* 見えたときに1回だけ、カードが順に出る（script が .cp-wait → .cp-show を付ける。script が無ければ最初から見えたまま） */
.cp-gifts.cp-wait .cp-coupon { opacity: 0; }
.cp-gifts.cp-show .cp-coupon { animation: cp-coupon-in .6s cubic-bezier(.3, 1.5, .5, 1) both; }
.cp-gifts.cp-show .cp-coupon:nth-child(1) { --rot: -.8deg; animation-delay: .05s; }
.cp-gifts.cp-show .cp-coupon:nth-child(2) { --rot: .8deg; animation-delay: .17s; }
.cp-gifts.cp-show .cp-coupon:nth-child(3) { --rot: -.8deg; animation-delay: .29s; }
.cp-gifts.cp-show .cp-coupon:nth-child(4) { --rot: .8deg; animation-delay: .41s; }
@keyframes cp-coupon-in { from { opacity: 0; transform: translateY(28px) scale(.92) rotate(var(--rot, 0deg)); } to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); } }

.cp-coupon::after { content: ""; position: absolute; right: -11px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #FFE4CF; }
.cp-coupon::before { content: ""; position: absolute; right: 22px; top: 18%; bottom: 18%; border-left: 2px dashed #F2BFCF; display: none; }
@media (prefers-reduced-motion: reduce) { .cp-coupon, .cp-pop-card, .cp-gifts-h, .cp-gifts-head .cp-tag { transform: none !important; } }
@media (min-width: 768px) {
  .cp-sec { padding: 80px 0 88px; }
  .cp-gifts .wrap { max-width: 1000px; }
  .cp-gifts-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 40px; }
  .cp-gifts-h { font-size: 40px; margin: 0; }
  .cp-gifts-h br { display: none; }
  .cp-gifts-head .cp-tag { margin: 0; font-size: 19px; }
  .cp-coupons { grid-template-columns: 1fr 1fr; gap: 30px 28px; align-items: stretch; }
  .cp-coupon { padding: 26px 26px 26px 34px; }
  .cp-key { font-size: 34px; }
  .cp-coupon-pop { display: grid; grid-template-columns: 1fr 150px; column-gap: 12px; }
  .cp-coupon-pop > :not(.cp-pop) { grid-column: 1; }
  .cp-coupon-pop .cp-pop { grid-column: 2; grid-row: 2 / span 3; align-items: center; padding: 0; }
  .cp-coupon-pop .cp-pop-card { width: 150px; }
  .cp-coupon-pop .cp-key { font-size: 27px; white-space: nowrap; }
}
/* 料金の「ずっと据え置き」と、出張できない地域の注記（LP の節の中に入る） */
.cp-lock { margin: 18px 0 8px; padding: 12px 14px; background: #FFF6D6; border-left: 6px solid var(--cp-sun); font-size: 17px; line-height: 1.75; }
.cp-lock b { display: block; color: var(--cp-deep); font-size: 18px; }
.cp-far { font-size: 17px; line-height: 1.8; margin: 12px 0 0; }




/* 横にはみ出さない（2026/10/23 渡井さんの Chrome のスマホ表示で、右が切れて横に動いた）。
   FV の写真（幅150%）や傾けた札が、端末によっては外にはみ出して数えられるため、ページ全体で横を切る。
   hidden ではなく clip にして、追従するバー（position: sticky / fixed）を壊さない */
html:has(body.cp), body.cp { overflow-x: clip; }

/* 最後の申込（桃色→橙の地）は、今の LP と同じ白いボタンに戻す。地と同じ色のボタンで同化していた（2026/10/23 渡井さん） */
.cp .final .cta { background: #fff; color: #C8325F; }

/* 出張の表：地名が1〜2文字ずつ折り返していた（2026/10/23 渡井さん）。
   キャンペーンでは地名が長いので、地名を上・内容を下の2段にする */
.cp .fee tr { display: block; padding: 10px 4px; border-top: 2px solid #F2BFCF; }
.cp .fee th, .cp .fee td { display: block; padding: 0; border-top: 0; text-align: left; white-space: normal; }
.cp .fee td { margin-top: 2px; }


/* スマホの画面の絵を大きく（2026/10/28 渡井さん「もっとSP画像の箇所大きくして」）。
   LINE の画面と管理画面を約1.7倍に。そのぶん機能の札は2列×2段にして、ボタンが下がりすぎないようにする */
@media (max-width: 767px) {
  .cp-visual { grid-template-columns: 1fr 40px 1fr; }
  .cp-v-phone { max-width: 170px; height: 220px; }
  .cp-v-head { font-size: 14px; padding: 6px 8px; }
  .cp-v-head .ic { width: 16px; height: 16px; }
  .cp-v-q, .cp-v-a { font-size: 14px; padding: 6px 8px; }
  .cp-v-shots { max-width: 176px; height: 220px; }
  .cp-v-shot { width: 104px; height: 212px; }
  .cp-v-arrow span { width: 40px; height: 40px; }
  .cp-v-arrow span img { width: 30px; }
  .cp-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .cp-chips li { font-size: 16px; line-height: 1.3; }
}
@media (max-width: 767px) and (max-height: 760px) {
  .cp-v-phone, .cp-v-shots { height: 170px; }
  .cp-v-shot { height: 164px; width: 84px; }
}
@media (max-width: 767px) {
  /* 2列だと札の中で変な所で折り返したので、文字の長さなりに並べる（折り返さない） */
  .cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .cp-chips li { white-space: nowrap; padding: 4px 10px; flex: 0 0 auto; }
  .cp-chips li .ic { width: 18px; height: 18px; }
}
@media (max-width: 767px) {
  /* 絵を大きくしたぶん、スマホでは機能の札を外して、申込・LINE・資料と説明の3段を1画面に残す。
     機能は見出し・絵と、すぐ下の「これまで／きてこなら」で伝わる（PC は札を出したまま） */
  /* （10/28 夕方：機能の札は FV の下の .cp-intro に移したので、ここでは隠さない） */
}

/* PC：画面の見本を大きく（2026/10/28 渡井さん「SP画像の箇所大きく」＝スマホ画面の絵のこと）。
   右の列を広げ、LINE の画面と管理画面を約1.6倍に */
@media (min-width: 768px) {
  .cp-fv-in { max-width: 1240px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 40px; }
  .cp-visual { padding: 28px 24px 22px; grid-template-columns: 1fr 72px 1.15fr; }
  .cp-v-phone { max-width: 270px; height: 440px; border-radius: 22px; }
  .cp-v-head { font-size: 18px; padding: 10px 12px; }
  .cp-v-q, .cp-v-a { font-size: 18px; padding: 8px 12px; }
  .cp-v-shots { max-width: 360px; height: 440px; }
  .cp-v-shot { width: 200px; height: 430px; border-radius: 20px; }
  .cp-v-arrow span { width: 66px; height: 66px; }
  .cp-v-arrow span img { width: 50px; }
  .cp-v-cap { font-size: 18px; }
}

/* ── 2026/10/28「FV上は、1キーワード、アイコン少々。FV下にいろいろ追記」──
   FV：札1つ（3か月無料・先着20店）→ 見出し1つ → アイコン3つ → 画面の見本（上の大きさのまま）→ 申込・LINE。
   説明・機能の札・出張の一文・締切は、FV のすぐ下の .cp-intro へ移した */
.cp-fv-in { grid-template-areas: "copy" "visual" "act"; }
.cp-badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; padding: 4px 6px 4px 12px; border-radius: 999px;
  background: var(--cp-cellpink); color: #fff; font: 900 16px/1.4 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; }
.cp-badge b { font-size: 18px; }
.cp-badge-sub { background: #fff; color: #1F1F1F; border-radius: 999px; padding: 1px 10px; font-size: 16px; }
.cp-fv .cp-h1 { margin: 0 0 10px; font-size: clamp(30px, 8.6vw, 36px); line-height: 1.3; }
.cp-kicker { display: block; margin-bottom: 4px; font-size: 16px; line-height: 1.5; font-weight: 700; color: #1F1F1F; letter-spacing: 0; }
.cp-icons { list-style: none; margin: 0 0 12px; padding: 0; display: flex; gap: 18px; }
.cp-icons li { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 900; color: #1F1F1F; }
.cp-icons-ic { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--cp-rose), var(--cp-orange-dk)); }
.cp-icons-ic .ic { width: 18px; height: 18px; }
.cp-fv .cta-sub { margin-top: 8px; }
.cp-fv .cp-line-btn { margin-top: 10px; }

/* FV のすぐ下 */
.cp-intro { background: #fff; padding: 18px 0 30px; }
.cp-intro .alt2 { margin: 0 0 22px; }
.cp-intro .alt-btn { min-height: 52px; font-size: 17px; }
.cp-intro .cp-cat { margin: 0 0 6px; font: 900 18px/1.45 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; color: #B8305E; }
.cp-desc { margin: 0 0 14px; font-size: 17px; line-height: 1.8; color: #1F1F1F; }
.cp-intro .cp-chips { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 8px; }
.cp-intro .cp-chips li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; white-space: normal; font-size: 17px; line-height: 1.45; }
.cp-intro .cp-chips li .ic { width: 22px; height: 22px; margin-top: 2px; }
.cp-intro .cp-chips small { display: block; font-size: 16px; font-weight: 700; color: #1F1F1F; }
.cp-note-trial { margin: 0 0 16px; font-size: 16px; line-height: 1.6; }
.cp-intro .cp-fv-visit { margin: 0 0 8px; text-align: left; font-size: 17px; }
.cp-intro .cp-br { display: none; }
.cp-deadline { margin: 0; font-size: 17px; line-height: 1.6; }
.cp-deadline b { color: #B8305E; }

@media (max-width: 767px) and (max-height: 760px) {
  .cp-icons { display: none; }
  .cp-fv .cp-h1 { font-size: 28px; }
}
@media (min-width: 768px) {
  .cp-fv { padding: 56px 0 64px; }
  .cp-fv-in { grid-template-areas: "copy visual" "act visual"; grid-template-rows: auto 1fr; align-items: start; }
  .cp-fv-copy { padding-top: 40px; }
  .cp-fv .cp-h1 { font-size: 56px; line-height: 1.25; margin-bottom: 22px; }
  .cp-kicker { font-size: 20px; margin-bottom: 10px; }
  .cp-badge { font-size: 18px; margin-bottom: 18px; }
  .cp-badge b { font-size: 22px; }
  .cp-badge-sub { font-size: 18px; }
  .cp-icons { gap: 28px; margin-bottom: 28px; }
  .cp-icons li { font-size: 19px; }
  .cp-icons-ic { width: 44px; height: 44px; }
  .cp-icons-ic .ic { width: 24px; height: 24px; }
  .cp-fv-act { max-width: 460px; }
  .cp-intro { padding: 36px 0 56px; }
  .cp-intro .wrap { max-width: 960px; }
  .cp-intro .alt2 { max-width: 560px; margin: 0 auto 36px; }
  .cp-intro .cp-chips { grid-template-columns: 1fr 1fr; }
}

/* ── 2026/10/28「動くようにできる？バナーみたいに」：FV の見本の動き（9秒でくり返す）──
   動きは .cp-anim（script が付ける）のときだけ。何も付かない・動きを減らす設定では、全部出た最後の形で止まる（場所は最初から取ってあるので、ずれない）。
   見えていないあいだは .cp-paused で止める */
.cp-v-phone { position: relative; }
.cp-v-q { position: relative; }
.cp-v-dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; opacity: 0; }
.cp-v-dots i { width: 7px; height: 7px; border-radius: 50%; background: #3E6B1E; }
.cp-v-n { margin: 0 6px; padding: 4px 8px; border-radius: 2px 10px 10px 10px; background: #FFF6D6; color: #1F1F1F; font-weight: 700; font-size: 12px; line-height: 1.4; }
.cp-v-shots { position: relative; }
.cp-v-toast, .cp-v-slot, .cp-v-add { position: absolute; z-index: 3; font-weight: 900; line-height: 1.3; white-space: nowrap; box-shadow: 0 4px 12px rgba(31, 31, 31, .2); }
.cp-v-toast { left: 50%; top: 6px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; background: #fff; color: #1F1F1F; border: 2px solid #06C755;
  border-radius: 999px; padding: 4px 10px; font-size: 14px; }
.cp-v-toast .ic { width: 16px; height: 16px; color: #06C755; }
.cp-v-slot { left: 4px; top: 44%; background: #E5507F; color: #fff; border-radius: 8px; padding: 4px 8px; font-size: 14px; }
.cp-v-slot b { margin-left: 4px; background: #FFD34D; color: #1F1F1F; border-radius: 4px; padding: 0 4px; font-size: 12px; }
.cp-v-add { right: 0; bottom: 10%; background: #FFD34D; color: #1F1F1F; border-radius: 8px; padding: 4px 8px; font-size: 14px; }
.cp-v-dot { position: absolute; z-index: 2; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #FFD34D; box-shadow: 0 0 0 3px #fff; opacity: 0; }
@media (max-width: 767px) {
  .cp-v-n { font-size: 14px; }
}
@media (min-width: 768px) {
  .cp-v-n { font-size: 18px; padding: 6px 12px; margin: 0 12px; }
  .cp-v-toast { font-size: 18px; padding: 6px 14px; top: 14px; }
  .cp-v-toast .ic { width: 20px; height: 20px; }
  .cp-v-slot { font-size: 18px; padding: 6px 12px; left: 10px; }
  .cp-v-slot b { font-size: 16px; }
  .cp-v-add { font-size: 18px; padding: 6px 12px; }
  .cp-v-dots i { width: 10px; height: 10px; }
  .cp-v-dot { width: 14px; height: 14px; margin-top: -7px; }
}

.cp-anim .cp-v-q, .cp-anim .cp-v-qt, .cp-anim .cp-v-dots, .cp-anim .cp-v-a, .cp-anim .cp-v-n, .cp-anim .cp-v-dot,
.cp-anim .cp-v-toast, .cp-anim .cp-v-slot, .cp-anim .cp-v-add, .cp-anim .cp-v-arrow span {
  animation-duration: 9s; animation-iteration-count: infinite; animation-timing-function: ease-out; animation-fill-mode: both;
  animation-delay: -1.9s; }   /* 開いた瞬間に吹き出しが空でないよう、問いの文が出たところ（21%）から始める */
.cp-anim.cp-paused * { animation-play-state: paused !important; }
.cp-anim .cp-v-q     { animation-name: cpq; }
.cp-anim .cp-v-qt    { animation-name: cpqt; }
.cp-anim .cp-v-dots  { animation-name: cpdots; }
.cp-anim .cp-v-dots i { animation: cpblink .9s infinite; }
.cp-anim .cp-v-dots i:nth-child(2) { animation-delay: .15s; }
.cp-anim .cp-v-dots i:nth-child(3) { animation-delay: .3s; }
.cp-anim .cp-v-a     { animation-name: cpa; }
.cp-anim .cp-v-n     { animation-name: cpn; }
.cp-anim .cp-v-dot   { animation-name: cpdot; animation-timing-function: linear; }
.cp-anim .cp-v-arrow span { animation-name: cppulse; }
.cp-anim .cp-v-toast { animation-name: cptoast; }
.cp-anim .cp-v-slot  { animation-name: cpslot; }
.cp-anim .cp-v-add   { animation-name: cpadd; }
@keyframes cpq     { 0%, 4% { opacity: 0; transform: translateY(8px); } 8%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes cpqt    { 0%, 17% { opacity: 0; } 20%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes cpdots  { 0%, 6% { opacity: 0; } 8%, 17% { opacity: 1; } 19%, 100% { opacity: 0; } }
@keyframes cpblink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes cpa     { 0%, 27% { opacity: 0; transform: scale(.8); } 31% { opacity: 1; transform: scale(1.05); } 33%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes cpn     { 0%, 70% { opacity: 0; transform: translateY(6px); } 74%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes cpdot   { 0%, 34% { opacity: 0; left: 0; } 35% { opacity: 1; left: 0; } 45% { opacity: 1; left: calc(100% - 10px); } 46%, 100% { opacity: 0; left: calc(100% - 10px); } }
@keyframes cppulse { 0%, 38% { transform: none; } 41% { transform: scale(1.18); } 44%, 100% { transform: none; } }
@keyframes cptoast { 0%, 46% { opacity: 0; transform: translate(-50%, -14px); } 50%, 92% { opacity: 1; transform: translate(-50%, 0); } 97%, 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes cpslot  { 0%, 53% { opacity: 0; transform: translateX(-12px) scale(.9); } 57% { opacity: 1; transform: scale(1.06); } 59%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes cpadd   { 0%, 62% { opacity: 0; transform: scale(.8); } 66% { opacity: 1; transform: scale(1.06); } 68%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

/* ── 2026/10/28「FV下も、丁寧に。アイコンとか画像とか使って」── */
.cp-intro { background: linear-gradient(180deg, #fff 0%, #FFF8F1 100%); padding: 20px 0 44px; }
.cp-intro-h { margin: 6px 0 8px; font: 900 26px/1.4 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; color: #1F1F1F; }
.cp-intro-h .cp-cat { display: block; margin: 0 0 4px; font-size: 16px; line-height: 1.5; font-weight: 900; color: #B8305E; }
.cp-feats { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 14px; }
.cp-feat { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; background: #fff; border-radius: 16px; padding: 12px;
  box-shadow: 0 6px 0 rgba(184, 48, 94, .10), 0 10px 22px rgba(184, 48, 94, .08); }
.cp-feat-pic { display: block; width: 104px; height: 104px; border-radius: 12px; overflow: hidden; background: #FFF1F4; }
.cp-feat-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cp-feat-pic.is-shot { padding: 6px 10px 0; background: #FDE3EA; }
.cp-feat-pic.is-shot img { border-radius: 8px 8px 0 0; object-fit: cover; object-position: 50% 0; box-shadow: 0 0 0 2px #1F1F1F; }
.cp-feat-body { display: block; }
.cp-feat-t { display: flex; align-items: center; gap: 8px; font: 900 18px/1.4 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; color: #1F1F1F; }
.cp-feat-ic { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--cp-rose), var(--cp-orange-dk)); }
.cp-feat-ic .ic { width: 17px; height: 17px; }
.cp-feat-d { display: block; margin-top: 4px; font-size: 16px; line-height: 1.65; color: #1F1F1F; }
.cp-feat-d small { display: block; margin-top: 2px; font-size: 16px; font-weight: 700; color: #B8305E; }
.cp-intro .cp-note-trial { display: flex; align-items: center; gap: 6px; margin: 0 0 18px; font-size: 16px; font-weight: 700; }
.cp-intro .cp-note-trial .ic { width: 20px; height: 20px; color: #C8325F; stroke-width: 3; }
.cp-info { display: grid; gap: 12px; }
.cp-info-card { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: start; background: #fff; border: 2px solid #F2BFCF; border-radius: 16px; padding: 14px; }
.cp-info-ic { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #FFF1F4; color: #C8325F; }
.cp-info-ic .ic { width: 26px; height: 26px; }
.cp-intro .cp-fv-visit, .cp-intro .cp-deadline { margin: 2px 0 6px; text-align: left; font-size: 17px; line-height: 1.6; font-weight: 900; }
.cp-cities { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-cities li { background: #C8325F; color: #fff; font-weight: 900; font-size: 16px; line-height: 1.4; border-radius: 999px; padding: 2px 12px; }
.cp-info-sub { margin: 0; font-size: 16px; line-height: 1.6; color: #1F1F1F; }

/* これまで／きてこなら：行ごとのアイコン */
.cp-ba-col li { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.cp-ba-col li::before { content: none; }
.cp-ba-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cp-ba-ic .ic { width: 20px; height: 20px; }
.is-before .cp-ba-ic { background: #E6E0DA; color: #5C524B; }
.is-after .cp-ba-ic { background: linear-gradient(135deg, var(--cp-rose), var(--cp-orange-dk)); color: #fff; }

@media (min-width: 768px) {
  .cp-intro { padding: 36px 0 64px; }
  .cp-intro .wrap { max-width: 1000px; }
  .cp-intro-h { font-size: 34px; text-align: center; }
  .cp-intro-h .cp-cat { font-size: 18px; }
  .cp-desc { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
  .cp-feats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .cp-feat { grid-template-columns: 140px 1fr; padding: 16px; }
  .cp-feat-pic { width: 140px; height: 140px; }
  .cp-intro .cp-note-trial { justify-content: center; }
  .cp-info { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ── 2026/10/28「お店側を横長iPadミニ風にして、連動して動く絵で」「SP版は、SPで」──
   お店の画面を HTML で組んだ絵にする（スクリーンショットはやめた）。スマホ（〜767px）はスマホの形、PC は横長のタブレット。
   管理画面に合わせて：上に桃色の帯、スタッフの列、時間の行、パステルの予約の枠。LINE の画面と同じ 9 秒の流れで動く：
   予約が入りました（46%）→ 14:00 に「カット 新規」（53%）→ お客様の記録が開いて台帳に追加（62%）→ 前日のお知らせ 予約済み（74%）→ 消えてくり返し */
.cp-v-shop { min-width: 0; }
.cp-v-dev { --row: 24px; position: relative; width: 100%; max-width: 170px; height: 220px; border: 3px solid #1F1F1F; border-radius: 16px; background: #fff; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 8px 18px rgba(31, 31, 31, .14); }
.cp-v-bar { display: flex; align-items: baseline; gap: 6px; padding: 5px 8px; background: #E5507F; color: #fff; font-weight: 900; font-size: 14px; line-height: 1.3; }
.cp-v-bar b { font-size: 12px; font-weight: 700; }
.cp-v-cal { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cp-v-staff { display: grid; grid-template-columns: 20px 1fr 1fr 1fr; background: #FFF1F4; border-bottom: 1px solid #F2BFCF; }
.cp-v-staff span { font-size: 11px; font-weight: 700; color: #1F1F1F; text-align: center; line-height: 1.6; }
.cp-v-grid { position: relative; flex: 1; margin-left: 20px;
  background: repeating-linear-gradient(#fff 0 calc(var(--row) - 1px), #EEE6E8 calc(var(--row) - 1px) var(--row)),
              linear-gradient(90deg, transparent calc(33.33% - 1px), #EEE6E8 calc(33.33% - 1px) 33.33%, transparent 33.33% calc(66.66% - 1px), #EEE6E8 calc(66.66% - 1px) 66.66%, transparent 66.66%);
  background-blend-mode: multiply; }
.cp-v-times { position: absolute; left: -20px; top: 0; width: 20px; }
.cp-v-times span { display: block; height: var(--row); font-size: 10px; line-height: 1; padding-top: 2px; color: #5C524B; text-align: center; }
.cp-v-bk, .cp-v-new { position: absolute; width: calc(33.33% - 4px); border-radius: 5px; padding: 2px 3px; font-size: 10px; line-height: 1.25; font-weight: 700; color: #1F1F1F; overflow: hidden; }
.cp-v-bk.b1 { left: 2px; top: 0; height: calc(var(--row) * 1.5 - 2px); background: #CFE5FF; border-left: 3px solid #5B9BE6; }
.cp-v-bk.b2 { left: calc(33.33% + 2px); top: var(--row); height: calc(var(--row) - 2px); background: #D7F2DC; border-left: 3px solid #3FB25E; }
.cp-v-bk.b3 { left: calc(66.66% + 2px); top: calc(var(--row) * 2.5); height: calc(var(--row) * 1.5 - 2px); background: #FFE9C7; border-left: 3px solid #F0A43A; }
.cp-v-bk.b4 { left: calc(33.33% + 2px); top: calc(var(--row) * 5); height: calc(var(--row) - 2px); background: #CFE5FF; border-left: 3px solid #5B9BE6; }
.cp-v-new { left: 2px; top: calc(var(--row) * 4); height: calc(var(--row) - 2px); background: #E5507F; color: #fff; font-size: 14px; font-weight: 900;
  display: flex; align-items: center; gap: 2px; box-shadow: 0 0 0 2px #FFD34D; width: calc(66.66% - 4px); z-index: 2; }
.cp-v-new b { background: #FFD34D; color: #1F1F1F; border-radius: 3px; padding: 0 3px; font-size: 11px; }
/* お客様の記録：スマホは下からせり上がる、PC は右の列 */
.cp-v-cust { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: #fff; border-top: 3px solid #E5507F; padding: 6px 8px 8px;
  box-shadow: 0 -6px 14px rgba(31, 31, 31, .12); }
.cp-v-cust p { margin: 0; color: #1F1F1F; line-height: 1.35; }
.cp-v-cust-t { font-size: 11px; font-weight: 700; color: #B8305E !important; }
.cp-v-cust-n { font-size: 14px; font-weight: 900; }
.cp-v-cust-d { font-size: 14px; font-weight: 700; }
.cp-v-dev .cp-v-add { position: static; display: inline-block; margin-top: 4px !important; background: #FFD34D; border-radius: 6px; padding: 2px 6px; font-size: 14px; font-weight: 900; box-shadow: none; }
.cp-v-dev .cp-v-toast { position: absolute; z-index: 4; left: 50%; top: 30px; transform: translateX(-50%); font-size: 14px; padding: 3px 9px; }
.cp-v-pre { position: absolute; z-index: 4; left: 6px; right: 6px; top: 30px; justify-content: center; display: flex; align-items: center; gap: 3px; background: #FFF6D6; border: 2px solid #F0A43A; color: #1F1F1F;
  border-radius: 12px; padding: 2px 6px; font-size: 14px; font-weight: 900; line-height: 1.3; text-align: center; box-shadow: 0 4px 10px rgba(31, 31, 31, .16); }
.cp-v-pre .ic { width: 14px; height: 14px; color: #F0A43A; }
/* 前日のお知らせと「予約が入りました」は同じ場所に出るので、時間をずらす（toast は 70% で消える） */

/* PC：横長のタブレット（iPad mini 風。4:3、細い縁、角丸） */
@media (min-width: 768px) {
  .cp-visual { grid-template-columns: minmax(0, .8fr) 64px minmax(0, 1.35fr) !important; }
  .cp-v-phone { max-width: 220px !important; height: 380px !important; }
  .cp-v-dev { --row: 40px; max-width: 470px; height: 352px; border: 10px solid #2A2A2E; border-radius: 26px; box-shadow: 0 16px 32px rgba(31, 31, 31, .18); flex-direction: column; }
  .cp-v-bar { font-size: 18px; padding: 8px 14px; }
  .cp-v-bar b { font-size: 16px; }
  .cp-v-cal { margin-right: 160px; }
  .cp-v-staff { grid-template-columns: 34px 1fr 1fr 1fr; }
  .cp-v-staff span { font-size: 14px; }
  .cp-v-grid { margin-left: 34px; }
  .cp-v-times { left: -34px; width: 34px; }
  .cp-v-times span { font-size: 13px; }
  .cp-v-bk { font-size: 14px; padding: 3px 5px; }
  .cp-v-new { font-size: 16px; gap: 6px; padding: 3px 6px; }
  .cp-v-new b { font-size: 14px; }
  .cp-v-cust { left: auto; top: 40px; width: 160px; border-top: 0; border-left: 3px solid #E5507F; padding: 12px; box-shadow: -6px 0 14px rgba(31, 31, 31, .08); }
  .cp-v-cust-t { font-size: 14px; }
  .cp-v-cust-n { font-size: 20px; margin-top: 4px !important; }
  .cp-v-cust-d { font-size: 16px; margin-top: 6px !important; }
  .cp-v-dev .cp-v-add { font-size: 16px; padding: 4px 8px; margin-top: 10px !important; }
  .cp-v-dev .cp-v-toast { top: 52px; left: 38%; font-size: 16px; }
  .cp-v-pre { top: auto; bottom: 12px; left: auto; right: 172px; font-size: 16px; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
  .cp-v-pre .ic { width: 18px; height: 18px; }
}

/* 動き（.cp-anim のときだけ。何も無ければ全部出た最後の形） */
.cp-anim .cp-v-new, .cp-anim .cp-v-cust, .cp-anim .cp-v-pre, .cp-anim .cp-v-dev .cp-v-add {
  animation-duration: 9s; animation-iteration-count: infinite; animation-timing-function: ease-out; animation-fill-mode: both; animation-delay: -1.9s; }
.cp-anim .cp-v-dev .cp-v-toast { animation-name: cptoast2; }
.cp-anim .cp-v-new  { animation-name: cpnew; }
.cp-anim .cp-v-cust { animation-name: cpcust; }
.cp-anim .cp-v-dev .cp-v-add { animation-name: cpadd2; }
.cp-anim .cp-v-pre  { animation-name: cppre; }
@keyframes cptoast2 { 0%, 46% { opacity: 0; transform: translate(-50%, -14px); } 50%, 68% { opacity: 1; transform: translate(-50%, 0); } 72%, 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes cpnew  { 0%, 52% { opacity: 0; transform: translateY(-18px) scale(.8); } 56% { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 6px rgba(255, 211, 77, .7); }
  59%, 92% { opacity: 1; transform: none; box-shadow: 0 0 0 2px #FFD34D; } 97%, 100% { opacity: 0; } }
@keyframes cpcust { 0%, 60% { opacity: 0; transform: translate(var(--cx, 0), var(--cy, 100%)); } 64%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes cpadd2 { 0%, 65% { opacity: 0; transform: scale(.7); } 68% { opacity: 1; transform: scale(1.1); } 70%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes cppre  { 0%, 73% { opacity: 0; transform: translateY(-8px); } 77%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@media (min-width: 768px) { .cp-v-cust { --cx: 100%; --cy: 0; } }
@media (max-width: 767px) and (max-height: 760px) { .cp-v-dev { height: 170px; --row: 17px; } .cp-v-bk { font-size: 0; } }
/* スマホ：お客様の記録は小さく（新しい予約の枠を隠さない）。日付は上の帯にあるので時刻だけ */
@media (max-width: 767px) { .cp-v-dev { --row: 22px; } .cp-v-cust { padding: 4px 8px 6px; } .cp-v-cust-t, .cp-v-pc { display: none; } .cp-v-dev .cp-v-add { margin-top: 2px !important; } }
@media (max-width: 767px) and (max-height: 760px) { .cp-v-dev { --row: 15px; } .cp-v-cust-d { display: none; } }
.cp-v-new { white-space: nowrap; }
@media (max-width: 767px) { .cp-v-bk { font-size: 9px; line-height: 1.05; padding: 0 2px; white-space: nowrap; border-left-width: 2px; } .cp-v-cust-n, .cp-v-cust-d { display: inline; } .cp-v-cust-n { margin-right: 4px !important; } .cp-v-cust-d { font-size: 14px; } }
@media (max-width: 767px) { .cp-v-cust { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; } .cp-v-dev .cp-v-add { flex-basis: auto; } .cp-v-cust .cp-v-add { width: fit-content; } .cp-v-cust-d { margin: 0; } }
@media (max-width: 767px) { .cp-v-cust-n { margin-right: 0 !important; } .cp-v-cust { column-gap: 4px; padding-left: 6px; padding-right: 6px; } }
/* PC：タブレットを大きく（左の文の列を少し細く） */
@media (min-width: 768px) {
  .cp-fv-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) !important; column-gap: 32px !important; }
  .cp-visual { grid-template-columns: minmax(0, .6fr) 56px minmax(0, 1.5fr) !important; padding: 24px 18px 18px !important; }
  .cp-v-phone { max-width: 210px !important; height: 360px !important; }
  .cp-v-dev { max-width: 500px; height: 360px; }
  .cp-v-cal { margin-right: 150px; }
  .cp-v-cust { width: 150px; }
  .cp-v-bk { white-space: nowrap; }
  .cp-v-pre { left: 44px; right: auto; bottom: 10px; }
}
@media (min-width: 768px) { .cp-fv .cp-h1 { font-size: 50px; } .cp-v-cal { margin-right: 168px; } .cp-v-cust { width: 168px; padding: 12px 8px; } .cp-v-dev .cp-v-add { padding: 4px 6px; } }
/* 背の低いスマホ：お客様の記録の帯は出さず、「顧客台帳に追加」だけを右上に（14時の枠に重ねない）。前日のお知らせは下へ */
@media (max-width: 767px) and (max-height: 760px) { .cp-v-cust { top: 46px; bottom: auto; left: auto; right: 4px; background: none; border: 0; box-shadow: none; padding: 0; display: block; --cy: -8px; } .cp-v-cust-t, .cp-v-cust-n, .cp-v-cust-d { display: none !important; } .cp-v-dev .cp-v-add { margin: 0 !important; font-size: 13px; padding: 2px 5px; box-shadow: 0 3px 8px rgba(31,31,31,.2); } .cp-v-pre { top: auto; bottom: 4px; } }
/* 背の低いスマホ：お客様の欄が 14:00 の新しい予約に重なったので、欄は外して「✓ 顧客台帳に追加」の札だけ右上に出す */
@media (max-width: 767px) and (max-height: 760px) {
  .cp-v-cust { left: auto; right: 4px; top: 30px; bottom: auto; width: auto; padding: 0; background: none; border: 0; box-shadow: none; --cy: -20%; }
  .cp-v-cust-t, .cp-v-cust-n, .cp-v-cust-d { display: none !important; }
}

/* ── 2026/10/28「LINEもipadもSPも、もうちょっとリアルに」──
   iPhone 風の枠：黒い細い縁・端末の角丸・ダイナミックアイランド・状態表示（9:41・電波・Wi-Fi・電池）・ホームバー・横のボタン・やわらかい影。
   LINE：上の帯（‹・名前・公式マーク・メニュー）、青灰色の地、自分は右の黄緑の吹き出し＋既読と時刻、お店は左のアイコン＋白の吹き出し＋時刻、
   下にリッチメニュー（予約する／予約の確認／クーポン。includes/richmenu.php の名前）と入力欄。
   お店の画面：管理画面（admin/assets/style.css）の桃色のグラデーションのヘッダー、下のタブ（ホーム・顧客・予約・売上・LINE・マスタ）。
   PC のタブレットは、管理画面の iPad 幅と同じ細い左の列（76px のアイコンだけの列）にして、下のタブは出さない。
   ここより上の .cp-v-* の指定を上書きする（先に書いたものは消さずに残してある） */
.cp-visual .cp-ip { position: relative; display: flex; flex-direction: column; background: #fff; border: 5px solid #111; border-radius: 26px; overflow: hidden;
  box-shadow: 0 0 0 1.5px #3A3A3C, 0 18px 30px rgba(31, 31, 31, .22), inset 0 0 0 1px rgba(255, 255, 255, .06); padding: 0; }
.cp-visual .cp-ip::before { content: ""; position: absolute; left: -9px; top: 22%; width: 3px; height: 26px; border-radius: 2px; background: #2C2C2E; box-shadow: 0 36px 0 #2C2C2E; }
.cp-visual .cp-ip::after { content: ""; position: absolute; inset: 0; border-radius: 21px; pointer-events: none; z-index: 9;
  background: linear-gradient(125deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 30%); }
.cp-ip-island { position: absolute; z-index: 8; left: 50%; top: 5px; width: 34%; height: 12px; margin-left: -17%; border-radius: 999px; background: #000; }
.cp-ip-cam { display: none; }
.cp-ip-status { position: relative; z-index: 7; flex: none; display: flex; align-items: center; justify-content: space-between; height: 20px; padding: 0 12px 0 16px; font-size: 10px; line-height: 1; }
.cp-ip-status b { font-weight: 700; }
.cp-ip-icons { display: flex; align-items: center; gap: 3px; }
.cp-ip-icons svg { height: 8px; width: auto; fill: currentColor; }
.cp-ip-home { position: absolute; z-index: 8; left: 50%; bottom: 4px; width: 36%; height: 4px; margin-left: -18%; border-radius: 999px; background: #111; opacity: .85; }

/* LINE */
.cp-visual .cp-v-phone { max-width: 170px; height: 290px; background: #fff; }
.cp-v-phone .cp-ip-status { background: #fff; color: #111; }
.cp-ln-top { flex: none; display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; background: #fff; color: #111; border-bottom: 1px solid #E5E5E5; }
.cp-ln-top b { font-size: 12px; font-weight: 700; white-space: nowrap; }
.cp-ln-back { font-size: 18px; line-height: 1; margin-right: 2px; }
.cp-ln-off { width: 12px; height: 12px; border-radius: 50%; background: #06C755; color: #fff; font-size: 8px; line-height: 12px; text-align: center; font-weight: 900; flex: none; }
.cp-ln-menu { margin-left: auto; display: flex; flex-direction: column; gap: 2px; }
.cp-ln-menu i { width: 11px; height: 1.5px; background: #111; }
.cp-ln-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; background: #8CABD9; overflow: hidden; }
.cp-ln-row { display: flex; align-items: flex-end; gap: 4px; margin: 0; }
.cp-ln-row.is-me { justify-content: flex-end; }
.cp-visual .cp-ln-row .cp-v-q { position: relative; margin: 0; max-width: 78%; padding: 6px 8px; background: #85E249; color: #111; border-radius: 14px 14px 4px 14px; font-size: 14px; line-height: 1.4; font-weight: 500; }
.cp-ln-meta { flex: none; font-size: 9px; line-height: 1.2; color: #fff; text-align: right; }
.cp-ln-row:not(.is-me) .cp-ln-meta { text-align: left; }
.cp-ln-av { flex: none; align-self: flex-start; width: 22px; height: 22px; border-radius: 50%; background: #E5507F; display: flex; align-items: center; justify-content: center; }
.cp-ln-av img { width: 17px; height: auto; }
.cp-visual .cp-v-a, .cp-visual .cp-v-n { margin: 0; padding: 0; background: none; border-radius: 0; font-size: inherit; }
.cp-ln-b { margin: 0; max-width: 70%; padding: 6px 8px; background: #fff; color: #111; border-radius: 4px 14px 14px 14px; font-size: 14px; line-height: 1.4; font-weight: 500; }
.cp-ln-b b { color: #04913E; font-weight: 700; }
.cp-ln-rich { flex: none; display: none; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #CFE9D9; border-top: 1px solid #DDE7E1; }
.cp-ln-rich span { background: #fff; text-align: center; font-size: 11px; font-weight: 700; color: #04913E; padding: 6px 0; white-space: nowrap; }
.cp-ln-input { flex: none; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 6px; background: #fff; color: #8A8A8A; }
.cp-ln-input svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.cp-ln-plus { font-size: 16px; line-height: 1; }
.cp-ln-field { flex: 1; height: 18px; border-radius: 999px; background: #F2F2F2; font-size: 10px; line-height: 18px; padding-left: 8px; color: #AAA; }
.cp-ln-mic { width: 7px; height: 11px; border: 1.5px solid currentColor; border-radius: 4px; }

/* お店（スマホ） */
.cp-visual .cp-v-dev { max-width: 170px; height: 290px; border: 5px solid #111; border-radius: 26px; background: #F5F4F0; }
.cp-v-dev .cp-ip-status { background: linear-gradient(135deg, #F0618E 0%, #D9497A 100%); color: #fff; }
.cp-ad { position: relative; flex: 1; min-height: 0; display: flex; }
.cp-ad-side { display: none; }
.cp-ad-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-visual .cp-v-bar { flex: none; background: linear-gradient(135deg, #F0618E 0%, #D9497A 100%); box-shadow: 0 2px 6px rgba(217, 73, 122, .28); padding: 4px 10px 6px; }
.cp-visual .cp-v-cal { flex: 1; margin-right: 0 !important; background: #fff; }
.cp-ad-nav { flex: none; display: grid; grid-template-columns: repeat(6, 1fr); height: 34px; padding-bottom: 6px; background: linear-gradient(135deg, #F0618E 0%, #D9497A 100%);
  box-shadow: 0 -2px 8px rgba(217, 73, 122, .28); }
.cp-ad-nav span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: rgba(255, 255, 255, .6); font-size: 7px; font-weight: 600; white-space: nowrap; }
.cp-ad-nav span.on { color: #fff; }
.cp-ad-nav svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp-visual .cp-v-cust { position: absolute; left: 0; right: 0; bottom: 34px; top: auto; width: auto; }
.cp-visual .cp-v-dev .cp-v-toast { top: 52px; }
.cp-visual .cp-v-pre { top: 52px; }

/* 背の低いスマホ：枠を低く。LINE の入力欄・お店の下のタブは残し、記録の帯は出さない（右上に台帳の札だけ。直前のコミットと同じ） */
@media (max-width: 767px) and (max-height: 760px) {
  .cp-visual .cp-v-phone, .cp-visual .cp-v-dev { height: 200px; }
  .cp-ln-body { gap: 4px; padding: 6px 5px; }
  .cp-visual .cp-v-dev .cp-v-cust { top: 30px; bottom: auto; left: auto; right: 4px; }
  .cp-visual .cp-v-pre { top: auto; bottom: 38px; }
  .cp-visual .cp-v-dev .cp-v-toast { top: 30px; }
}

/* PC：LINE は iPhone、お店は横長の iPad mini 風（細い縁・長い辺の中央にカメラ・状態表示）。管理画面の iPad 幅の形：細い左の列＋白い上の帯 */
@media (min-width: 768px) {
  .cp-visual .cp-v-phone { max-width: 210px !important; height: 380px !important; border-width: 7px; border-radius: 34px; }
  .cp-visual .cp-ip::after { border-radius: 27px; }
  .cp-ip-island { height: 16px; top: 7px; }
  .cp-ip-status { height: 28px; font-size: 13px; padding: 0 16px 0 22px; }
  .cp-ip-icons svg { height: 10px; }
  .cp-ln-top { height: 34px; padding: 0 10px; }
  .cp-ln-top b { font-size: 15px; }
  .cp-ln-off { width: 15px; height: 15px; font-size: 10px; line-height: 15px; }
  .cp-ln-body { gap: 9px; padding: 10px 8px; }
  .cp-visual .cp-ln-row .cp-v-q, .cp-ln-b { font-size: 16px; padding: 8px 10px; }
  .cp-ln-meta { font-size: 11px; }
  .cp-ln-av { width: 28px; height: 28px; }
  .cp-ln-av img { width: 22px; }
  .cp-ln-rich { display: grid; }
  .cp-ln-rich span { font-size: 13px; padding: 8px 0; }
  .cp-ln-input { height: 38px; }
  .cp-ln-field { height: 22px; line-height: 22px; font-size: 12px; }

  .cp-visual .cp-v-dev { max-width: 520px; height: 380px; border: 12px solid #1C1C1E; border-radius: 30px; background: #fff;
    box-shadow: 0 0 0 1.5px #48484A, 0 24px 40px rgba(31, 31, 31, .22); }
  .cp-visual .cp-v-dev::before { display: none; }
  .cp-visual .cp-v-dev::after { border-radius: 18px; }
  .cp-v-dev .cp-ip-island { display: none; }
  .cp-v-dev .cp-ip-cam { display: block; position: absolute; z-index: 10; left: 50%; top: -8px; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: #3A3A3C; box-shadow: inset 0 0 0 1px #555; }
  .cp-v-dev .cp-ip-status { background: #fff; color: #111; height: 20px; font-size: 11px; padding: 0 14px; }
  .cp-ad-side { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 46px; flex: none; padding-top: 8px;
    background: linear-gradient(180deg, #D9497A 0%, #B23861 100%); box-shadow: 3px 0 10px rgba(0, 0, 0, .18); }
  .cp-ad-side i { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .78); }
  .cp-ad-side i.on { background: rgba(255, 255, 255, .22); color: #fff; }
  .cp-ad-side svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .cp-visual .cp-v-bar { background: linear-gradient(180deg, #fff 0%, #fff 55%, #F1F0EB 100%); color: #1A1A1A; border-bottom: 1px solid #D9D9D6; box-shadow: 0 2px 6px rgba(0, 0, 0, .07); padding: 8px 14px; }
  .cp-ad-nav { display: none; }
  .cp-visual .cp-v-cust { position: relative; left: auto; right: auto; bottom: auto; top: auto; width: 150px; flex: none; border-left: 3px solid #E5507F; border-top: 0; padding: 12px 10px; }
  .cp-visual .cp-v-dev .cp-v-toast { top: 64px; left: 46%; }
  .cp-visual .cp-v-pre { top: auto; bottom: 14px; left: 96px; right: auto; }
  .cp-v-dev .cp-ip-home { display: none; }
}

/* ── 2026/10/28 RE:RE の FV を参考に（形だけ。素材と文言は使っていない）──
   白い iPhone の枠、「LINE × きてこ」、白い丸のアイコン、見本に重なる丸い札、うすい写真を敷いたやわらかいグラデーション */
.cp-fv { position: relative; overflow: hidden; background: linear-gradient(160deg, #FFE3EC 0%, #FFEFE3 55%, #FFF8EE 100%); }
.cp-fv::before { content: ""; position: absolute; inset: -20px; background: url(/img/sp/salon.webp) 70% 30% / cover no-repeat; opacity: .10; filter: blur(6px); pointer-events: none; }
.cp-fv-in { position: relative; z-index: 1; }
.cp-pair { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.cp-pair-line { background: #06C755; color: #fff; font: 900 15px/1 "Hiragino Sans", "Noto Sans JP", sans-serif; padding: 5px 8px; border-radius: 6px; letter-spacing: .02em; }
.cp-pair-x { font-size: 16px; font-weight: 700; color: #1F1F1F; }
.cp-pair img { height: 24px; width: auto; }
.cp-pair-sub { font-size: 16px; font-weight: 700; color: #1F1F1F; margin-left: 4px; }
.cp-h1-line { color: #C8325F; }
/* 白い丸のアイコン（下にことば） */
.cp-icons { gap: 14px; }
.cp-icons li { flex-direction: column; gap: 3px; font-size: 16px; }
.cp-icons-ic { width: 44px; height: 44px; background: #fff; color: #C8325F; box-shadow: 0 4px 12px rgba(184, 48, 94, .18); }
.cp-icons-ic .ic { width: 22px; height: 22px; }
/* 見本に重なる丸い札 */
.cp-visual { position: relative; background: rgba(255, 255, 255, .55) !important; box-shadow: none !important; overflow: visible; }
.cp-roundbadge { position: absolute; z-index: 12; right: -6px; top: -14px; width: 76px; height: 76px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #F2645B; color: #fff; font: 900 16px/1.1 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; box-shadow: 0 6px 14px rgba(200, 50, 95, .3); transform: rotate(8deg); }
.cp-roundbadge small { font-size: 10px; font-weight: 900; margin-bottom: 1px; }
.cp-roundbadge b { font-size: 20px; }
.cp-roundbadge::after { content: ""; position: absolute; right: -4px; top: 2px; width: 16px; height: 16px; background: #FFD34D;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
/* 白い iPhone（白銀の縁） */
.cp-visual .cp-ip { border-color: #F4F4F6; box-shadow: 0 0 0 1.5px #C9CBD1, 0 0 0 3px #E9EAEE, 0 18px 30px rgba(31, 31, 31, .2); }
.cp-visual .cp-ip::before { background: #D3D5DA; box-shadow: 0 36px 0 #D3D5DA; left: -10px; }
/* お店の電話は少し奥に（小さく・傾ける） */
@media (max-width: 767px) {
  .cp-visual .cp-v-dev { transform: rotate(3deg) scale(.96); transform-origin: 50% 60%; }
}
@media (min-width: 768px) {
  .cp-pair-line { font-size: 20px; padding: 7px 12px; }
  .cp-pair-x { font-size: 22px; }
  .cp-pair img { height: 36px; }
  .cp-pair-sub { font-size: 20px; }
  .cp-icons-ic { width: 60px; height: 60px; }
  .cp-icons-ic .ic { width: 28px; height: 28px; }
  .cp-icons li { font-size: 17px; }
  .cp-roundbadge { width: 112px; height: 112px; right: -18px; top: -30px; font-size: 20px; }
  .cp-roundbadge small { font-size: 14px; }
  .cp-roundbadge b { font-size: 30px; }
  .cp-visual .cp-v-dev { border-color: #F4F4F6; }
}
@media (max-width: 767px) and (max-height: 760px) {
  .cp-pair-sub { display: none; }
  .cp-roundbadge { width: 64px; height: 64px; top: -8px; }
  .cp-roundbadge b { font-size: 17px; }
}
/* スマホ：2台を少し広く（矢印の列を細く）、吹き出しを広く、お店の返事の時刻は省く */
@media (max-width: 767px) { .cp-visual { grid-template-columns: 1fr 26px 1fr !important; padding: 10px 6px 8px !important; } .cp-v-arrow span { width: 28px !important; height: 28px !important; } .cp-v-arrow span img { width: 22px !important; } .cp-ln-row:not(.is-me) .cp-ln-meta { display: none; } .cp-ln-b, .cp-visual .cp-ln-row .cp-v-q { max-width: calc(100% - 24px); padding: 5px 7px; } .cp-ln-row.is-me .cp-ln-meta { font-size: 8px; } .cp-ln-av { width: 18px; height: 18px; } .cp-ln-av img { width: 14px; } .cp-ln-body { gap: 5px; padding: 6px 4px; } .cp-visual .cp-v-bar { white-space: nowrap; font-size: 12px; padding: 3px 8px 5px; } .cp-visual .cp-v-bar b { font-size: 11px; } }
@media (min-width: 768px) { .cp-visual { grid-template-columns: minmax(0, .82fr) 52px minmax(0, 1.3fr) !important; } .cp-visual .cp-v-phone { max-width: 230px !important; } .cp-ln-rich span { font-size: 12px; } .cp-ln-row:not(.is-me) .cp-ln-meta { display: none; } }
@media (min-width: 768px) { .cp-fv-in { grid-template-columns: minmax(0, .78fr) minmax(0, 1.6fr) !important; } .cp-visual { grid-template-columns: minmax(0, .7fr) 48px minmax(0, 1.35fr) !important; } .cp-visual .cp-v-bar { white-space: nowrap; } .cp-visual .cp-v-cust { width: 136px; } .cp-v-bk { font-size: 13px; } .cp-fv .cp-h1 { font-size: 46px; } }
@media (min-width: 768px) { .cp-fv .cp-h1 { font-size: 42px; } .cp-pair-sub { font-size: 17px; white-space: nowrap; } .cp-pair img { height: 30px; } .cp-pair-line { font-size: 17px; } .cp-visual .cp-v-cust { width: 150px; padding: 12px 8px; } .cp-visual .cp-v-dev .cp-v-add { font-size: 15px; padding: 4px 5px; } }

/* ── 2026/10/28「真ん中のきてこの赤丸いらない」「画面全部ガントチャートでいい」──
   真ん中の丸・矢印・点はやめ、2台を寄せて少し重ねる。お客様の記録の列はやめ、お店の画面は全部予約表（スマホ3人・iPad 5人）。
   流れ：LINE の返事（31%）→ お店に「予約が入りました」（50%）→ 14時に「カット 新規」（56%）→ 前日のお知らせ（77%） */
.cp-visual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 0 !important; }
.cp-v-line { position: relative; z-index: 2; }
.cp-v-shop { position: relative; z-index: 1; margin-left: -8px; }
.cp-v-pc { display: none; }
.cp-v-dev { --cols: 3; }
.cp-visual .cp-v-staff { grid-template-columns: 20px repeat(var(--cols), 1fr); }
.cp-visual .cp-v-grid { background:
    repeating-linear-gradient(#fff 0 calc(var(--row) - 1px), #EEE6E8 calc(var(--row) - 1px) var(--row)),
    repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--cols) - 1px), #EEE6E8 calc(100% / var(--cols) - 1px) calc(100% / var(--cols)));
  background-blend-mode: multiply; }
.cp-visual .cp-v-bk { width: calc(100% / var(--cols) - 4px); }
.cp-visual .cp-v-bk.b1 { left: 2px; }
.cp-visual .cp-v-bk.b2, .cp-visual .cp-v-bk.b4 { left: calc(100% / var(--cols) + 2px); }
.cp-visual .cp-v-bk.b3 { left: calc(200% / var(--cols) + 2px); }
.cp-visual .cp-v-new { left: 2px; width: calc(200% / var(--cols) - 4px); }
.cp-visual .cp-v-pre { left: 6px; right: 6px; top: auto; bottom: 40px; }
@media (max-width: 767px) and (max-height: 760px) {
  .cp-visual .cp-v-pre { bottom: 38px; }
}
@media (min-width: 768px) {
  .cp-visual { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr) !important; align-items: center; }
  .cp-v-shop { margin-left: -28px; }
  .cp-v-dev { --cols: 5; }
  .cp-v-pc { display: block; }
  .cp-visual .cp-v-staff { grid-template-columns: 34px repeat(var(--cols), 1fr); }
  .cp-visual .cp-v-staff span.cp-v-pc { display: block; }
  .cp-visual .cp-v-dev { max-width: 560px; }
  .cp-visual .cp-v-bk.b5 { left: calc(300% / var(--cols) + 2px); top: calc(var(--row) * .5); height: calc(var(--row) * 1.5 - 2px); background: #EBDDFB; border-left: 3px solid #9B6BDB; }
  .cp-visual .cp-v-bk.b6 { left: calc(300% / var(--cols) + 2px); top: calc(var(--row) * 3); height: calc(var(--row) * 1.5 - 2px); background: #FFE9C7; border-left: 3px solid #F0A43A; }
  .cp-visual .cp-v-bk.b7 { left: calc(400% / var(--cols) + 2px); top: 0; height: calc(var(--row) - 2px); background: #D7F2DC; border-left: 3px solid #3FB25E; }
  .cp-visual .cp-v-bk.b8 { left: calc(400% / var(--cols) + 2px); top: calc(var(--row) * 4.5); height: calc(var(--row) * 1.5 - 2px); background: #CFE5FF; border-left: 3px solid #5B9BE6; }
  .cp-visual .cp-v-new { width: calc(100% / var(--cols) - 4px); }
  .cp-visual .cp-v-pre { left: auto; right: 14px; top: 34px; bottom: auto; border-radius: 999px; }
  .cp-visual .cp-v-dev .cp-v-toast { left: 50%; }
}
@media (min-width: 768px) { .cp-visual .cp-v-new { width: calc(200% / var(--cols) - 4px); } }
@media (max-width: 767px) and (max-height: 760px) { .cp-visual .cp-v-pre { top: 30px; bottom: auto; } }
/* 2026/10/28「SPとタブレット、かぶってる」：2台を重ねない（間をあける）。スマホは傾けない */
.cp-v-shop { margin-left: 0 !important; }
.cp-visual { column-gap: 8px !important; }
@media (max-width: 767px) { .cp-visual .cp-v-dev { transform: none; } }
@media (min-width: 768px) { .cp-visual { column-gap: 24px !important; } .cp-roundbadge { top: -36px; right: -22px; } }
/* スマホ：前日のお知らせは上に（15時の枠に重ねない。「予約が入りました」はその前に消えている） */
@media (max-width: 767px) { .cp-visual .cp-v-pre { top: 52px; bottom: auto; } }
@media (max-width: 767px) and (max-height: 760px) { .cp-visual .cp-v-pre { top: 30px; } }
/* 丸い札と前日のお知らせを重ねない：PC は前日のお知らせを予約表のいちばん下（16時の空いた行）に。背の低いスマホは丸い札を出さない（上の札に同じ「3か月無料」がある） */
@media (min-width: 768px) { .cp-visual .cp-v-pre { top: auto; bottom: 8px; left: 64px; right: auto; } }
@media (max-width: 767px) and (max-height: 760px) { .cp-roundbadge { display: none; } }
@media (min-width: 768px) { .cp-visual .cp-v-pre { left: 40%; } .cp-visual .cp-v-phone { height: 400px !important; } }
@media (min-width: 768px) { .cp-visual .cp-v-pre { left: auto; right: 8px; bottom: 6px; } }

/* ── 2026/10/28「この辺、もっと丁寧に」：FV の下（きてこで、できること）──
   絵が主役のカード（上に絵、下に文）。絵は FV と同じ白い iPhone の枠を小さくしたもの。プランは灰色の枠の小さな札（注意書きに見せない）。
   間は 8px の倍数。影は「4つの特典」のカードとそろえる */
.cp-f2 { background: linear-gradient(180deg, #fff 0%, #FFF8F1 100%); padding: 24px 0 56px; }
.cp-f2 .alt2 { margin: 0 0 40px; }
.cp-f2-h { margin: 0 0 8px; font: 900 28px/1.4 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; color: #1F1F1F; text-align: center; }
.cp-f2-cat { display: block; margin-bottom: 4px; font-size: 16px; color: #B8305E; }
.cp-f2-lead { margin: 0 auto 32px; max-width: 36em; text-align: center; font-size: 17px; line-height: 1.8; color: #1F1F1F; }
.cp-f2-br { display: inline; }
.cp-f2-cards { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 24px; }
.cp-f2-card { display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 8px 0 rgba(184, 48, 94, .10), 0 16px 28px rgba(184, 48, 94, .10); }
.cp-f2-pic { display: flex; align-items: flex-end; justify-content: center; height: 216px; padding: 24px 16px 0; background: linear-gradient(160deg, #FFE3EC 0%, #FFF1E6 100%); overflow: hidden; }
.cp-f2-body { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 24px; }
.cp-f2-t { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 900 20px/1.4 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; color: #1F1F1F; }
.cp-f2-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--cp-rose), var(--cp-orange-dk)); }
.cp-f2-ic .ic { width: 20px; height: 20px; }
.cp-f2-pts { list-style: none; margin: 0 0 16px; padding: 0; }
.cp-f2-pts li { position: relative; padding: 4px 0 4px 24px; font-size: 16px; line-height: 1.7; color: #1F1F1F; max-width: 36ch; }
.cp-f2-pts li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: #E5507F; }
.cp-f2-plan { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cp-f2-plan span { display: inline-block; border: 1.5px solid #C9C4C0; border-radius: 999px; padding: 2px 12px; font-size: 16px; line-height: 1.5; font-weight: 700; color: #3D3D3D; background: #FAFAF8; }

/* ミニ端末（FV と同じ白い iPhone の枠を小さく。上半分だけ見せる） */
.cp-mini { position: relative; width: 168px; height: 196px; border: 5px solid #F4F4F6; border-bottom: 0; border-radius: 26px 26px 0 0; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1.5px #C9CBD1, 0 -2px 0 3px #E9EAEE, 0 12px 24px rgba(31, 31, 31, .16); }
.cp-mini::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 5px; width: 40%; height: 11px; margin-left: -20%; border-radius: 999px; background: #000; }
.cp-mini-top { display: flex; align-items: center; gap: 4px; padding: 22px 8px 6px; border-bottom: 1px solid #E5E5E5; font-size: 12px; color: #111; }
.cp-mini-top span { font-size: 16px; line-height: 1; }
.cp-mini-top b { font-weight: 700; }
.cp-mini-top i { font-style: normal; width: 12px; height: 12px; border-radius: 50%; background: #06C755; color: #fff; font-size: 8px; line-height: 12px; text-align: center; }
.cp-mini-body { padding: 8px 6px; display: flex; flex-direction: column; gap: 6px; height: 100%; }
.cp-mini-body.is-line { background: #8CABD9; }
.cp-mini-me, .cp-mini-you { margin: 0; padding: 6px 8px; font-size: 14px; line-height: 1.4; color: #111; max-width: 86%; }
.cp-mini-me { align-self: flex-end; background: #85E249; border-radius: 14px 14px 4px 14px; }
.cp-mini-you { align-self: flex-start; background: #fff; border-radius: 4px 14px 14px 14px; }
.cp-mini-you b { display: block; color: #04913E; }
.cp-mini-card { align-self: flex-start; width: 88%; background: #fff; border-radius: 12px; overflow: hidden; }
.cp-mini-card-t { margin: 0; padding: 6px 8px; background: linear-gradient(135deg, #F0618E, #D9497A); color: #fff; font-size: 13px; font-weight: 900; }
.cp-mini-coupon { margin: 6px; padding: 6px; border: 2px dashed #F0A43A; border-radius: 8px; font-size: 13px; line-height: 1.4; color: #111; }
.cp-mini-coupon b { display: block; color: #C8325F; font-size: 14px; }
.cp-mini.is-shot img { display: block; width: 100%; height: auto; }

/* 無料期間の帯 */
.cp-f2-trial { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 32px; padding: 14px 16px; border-radius: 14px;
  background: #FFF6D6; font-size: 17px; font-weight: 700; color: #1F1F1F; text-align: left; }
.cp-f2-trial-ic { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #fff; color: #C8325F; display: flex; align-items: center; justify-content: center; }
.cp-f2-trial-ic .ic { width: 18px; height: 18px; stroke-width: 3; }

/* 出張・締切 */
.cp-f2-info { display: grid; gap: 24px; }
.cp-f2-box { background: #fff; border-radius: 20px; padding: 24px 20px; box-shadow: 0 8px 0 rgba(184, 48, 94, .10), 0 16px 28px rgba(184, 48, 94, .10); }
.cp-f2-map { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 16px; }
.cp-f2-box-t { margin: 0 0 12px; font: 900 18px/1.6 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; color: #1F1F1F; }
.cp-f2-box-t b { color: #B8305E; }
.cp-f2-box-s { margin: 0; font-size: 16px; line-height: 1.7; color: #1F1F1F; }
.cp-f2-cities { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: nowrap; gap: 8px; }
.cp-f2-cities li { flex: 1; text-align: center; white-space: nowrap; background: #C8325F; color: #fff; font-weight: 900; font-size: 16px; line-height: 1.4; border-radius: 999px; padding: 4px 6px; }
.cp-f2-box.is-cal { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center; }
.cp-f2-cal { display: flex; flex-direction: column; align-items: center; width: 112px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #F2BFCF, 0 8px 16px rgba(184, 48, 94, .12); }
.cp-f2-cal span { width: 100%; padding: 6px 0; text-align: center; background: #C8325F; color: #fff; font-size: 14px; font-weight: 900; }
.cp-f2-cal b { font: 900 52px/1.1 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; color: #1F1F1F; padding-top: 4px; }
.cp-f2-cal i { font-style: normal; font-size: 14px; font-weight: 700; padding-bottom: 8px; color: #3D3D3D; }
.cp-f2-big { margin: 0 0 4px; font: 900 18px/1.3 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; color: #1F1F1F; }
.cp-f2-big b { font-size: 36px; color: #C8325F; margin-left: 4px; }

@media (max-width: 767px) {
  .cp-f2-br { display: none; }
  .cp-f2-h { font-size: 26px; }
}
@media (min-width: 768px) {
  .cp-f2 { padding: 40px 0 88px; }
  .cp-f2 .wrap { max-width: 1040px; }
  .cp-f2 .alt2 { max-width: 560px; margin: 0 auto 64px; }
  .cp-f2-h { font-size: 36px; }
  .cp-f2-cat { font-size: 18px; }
  .cp-f2-lead { margin-bottom: 48px; font-size: 18px; }
  .cp-f2-cards { grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
  .cp-f2-pic { height: 248px; padding-top: 32px; }
  .cp-mini { width: 196px; height: 216px; }
  .cp-f2-body { padding: 24px 32px 32px; }
  .cp-f2-t { font-size: 22px; }
  .cp-f2-pts li { font-size: 17px; }
  .cp-f2-trial { max-width: 640px; margin: 0 auto 48px; font-size: 18px; }
  .cp-f2-info { grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
  .cp-f2-box { padding: 32px; }
}
.cp-mini.is-shot { padding-top: 20px; background: #fff; }
.cp-f2-pts li { max-width: none; }
@media (max-width: 767px) { .cp-f2-plan span { border-radius: 12px; } .cp-f2-box.is-cal { grid-template-columns: 96px 1fr; gap: 16px; padding: 20px 16px; } .cp-f2-cal { width: 96px; } .cp-f2-cal b { font-size: 44px; } .cp-f2-box.is-cal .cp-f2-box-t { font-size: 16px; } .cp-f2-box.is-cal .cp-f2-box-t b { display: block; } .cp-f2-box.is-cal .cp-f2-box-s br { display: none; } }
@media (max-width: 767px) { .cp-f2-box.is-cal .cp-f2-box-t b { display: inline; } .cp-f2-box .cp-f2-box-t { font-size: 16px; } }

/* FV の3つのアイコンを大きく、文の列の中央に（2026/10/28 渡井さん） */
.cp-icons { justify-content: center; gap: 22px; }
.cp-icons-ic { width: 64px; height: 64px; }
.cp-icons-ic .ic { width: 30px; height: 30px; }
.cp-icons li { font-size: 17px; gap: 6px; }
@media (min-width: 768px) {
  .cp-icons { gap: 36px; margin: 8px 0 28px; }
  .cp-icons-ic { width: 84px; height: 84px; }
  .cp-icons-ic .ic { width: 38px; height: 38px; }
  .cp-icons li { font-size: 19px; }
}

/* 見出しを「予約は、LINEで自動受付。」に、アイコンに「低コスト」（月額1,980円〜）を足して4つに（2026/10/28 渡井さん）。
   4つでも1行に収まるよう、スマホでは丸を少し小さく */
@media (max-width: 767px) { .cp-icons { gap: 12px; } .cp-icons-ic { width: 56px; height: 56px; } .cp-icons-ic .ic { width: 26px; height: 26px; } .cp-icons li { font-size: 16px; } }
@media (min-width: 768px) { .cp-icons { gap: 26px; } .cp-icons-ic { width: 76px; height: 76px; } }

/* 「オープン記念 3か月無料」の丸い札を動かす（RE:RE の札のように、ふわふわ浮いて、きらりと光る）。動きを減らす設定では止める */
@media (prefers-reduced-motion: no-preference) {
  .cp-roundbadge { animation: cpfloat 3.2s ease-in-out infinite; }
  .cp-roundbadge::after { animation: cptwinkle 1.6s ease-in-out infinite; }
  .cp-roundbadge::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(240, 97, 142, .45); animation: cpring 2.4s ease-out infinite; pointer-events: none; }
}
@keyframes cpfloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes cptwinkle { 0%, 100% { transform: scale(.6) rotate(0deg); opacity: .6; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes cpring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
/* 4つにしたら PC で「LINE予約」が2行に割れたので、ラベルは折り返さない・間を少し詰める */
.cp-icons li { white-space: nowrap; }
@media (min-width: 768px) { .cp-icons { gap: 18px; } .cp-icons li { font-size: 18px; } }
/* スマホは見出しを1行に（2026/10/28 渡井さん「SPはタイトル改行しなくてもよくない？」）。390px で収まる大きさに */
@media (max-width: 767px) {
  .cp-fv .cp-h1 br { display: none; }
  .cp-fv .cp-h1 { font-size: clamp(24px, 7.6vw, 32px); white-space: nowrap; letter-spacing: -.01em; }
}

/* ── 2026/10/28「まだ迷ってる方へ、をもっと強烈にわかりやすく丁寧に」（キャンペーン版だけ。site/salon/campaign/consult.html）──
   大きな見出し → 軽い順に3つ（LINE で聞く → 資料 → 説明）のカード → 安心の帯。ボタンは高さ56px以上 */
.cp .consult.cp-cs { background: linear-gradient(170deg, #FFF1F4 0%, #FFF8EE 100%); padding: 48px 0 56px; text-align: left; }
.cp-cs-kick { margin: 0 0 8px; display: inline-block; background: #C8325F; color: #fff; font: 900 16px/1.5 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; padding: 4px 14px; border-radius: 999px; }
.cp-cs-h { margin: 0 0 8px; font: 900 30px/1.35 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; color: #1F1F1F; }
.cp-cs-sub { margin: 0 0 28px; font-size: 18px; font-weight: 700; color: #1F1F1F; }
.cp-cs-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 20px; counter-reset: none; }
.cp-cs-step { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 20px; padding: 20px 18px 18px;
  box-shadow: 0 8px 0 rgba(184, 48, 94, .10), 0 16px 28px rgba(184, 48, 94, .10); border-top: 6px solid var(--cs, #E5507F); }
.cp-cs-step.is-line { --cs: #06C755; --cs-bg: #E8FAF0; --cs-dk: #04913E; }
.cp-cs-step.is-doc  { --cs: #E5507F; --cs-bg: #FFF1F4; --cs-dk: #B8305E; }
.cp-cs-step.is-talk { --cs: #00753A; --cs-bg: #E9F5EE; --cs-dk: #00753A; }
.cp-cs-who { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; font-weight: 900; color: var(--cs-dk); }
.cp-cs-no { width: 28px; height: 28px; border-radius: 50%; background: var(--cs); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.cp-cs-row { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; margin-bottom: 16px; }
.cp-cs-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--cs-bg); color: var(--cs-dk); display: flex; align-items: center; justify-content: center; }
.cp-cs-ic .ic { width: 34px; height: 34px; }
.cp-cs-step.is-line .cp-cs-ic .ic { fill: currentColor; }
.cp-cs-t { margin: 0 0 6px; font: 900 22px/1.35 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; color: #1F1F1F; }
.cp-cs-d { margin: 0 0 8px; font-size: 16px; line-height: 1.75; color: #1F1F1F; }
.cp-cs-meta { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 2px 10px; border-radius: 999px; background: var(--cs-bg); color: var(--cs-dk); font-size: 16px; font-weight: 700; }
.cp-cs-meta .ic { width: 18px; height: 18px; }
.cp-cs-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; border-radius: 999px; text-decoration: none;
  font: 900 19px/1.2 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; }
.cp-cs-btn .ic { width: 24px; height: 24px; }
.cp-cs-btn.is-line { background: #06C755; color: #fff; box-shadow: 0 4px 0 #04913E; }
.cp-cs-btn.is-line .ic { fill: currentColor; }
.cp-cs-btn.is-doc { background: #fff; color: #B8305E; border: 3px solid #C8325F; box-shadow: 0 4px 0 rgba(200, 50, 95, .25); }
.cp-cs-btn.is-talk { background: #fff; color: #00753A; border: 3px solid #00753A; box-shadow: 0 4px 0 rgba(0, 117, 58, .2); }
.cp-cs-btn:focus-visible { outline: 3px solid #1F1F1F; outline-offset: 3px; }
.cp-cs-safe { list-style: none; margin: 0; padding: 14px 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; background: #fff; border-radius: 16px; border: 2px solid #F2BFCF; }
.cp-cs-safe li { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 900; color: #1F1F1F; white-space: nowrap; }
.cp-cs-safe .ic { width: 22px; height: 22px; color: #C8325F; }
@media (min-width: 768px) {
  .cp .consult.cp-cs { padding: 80px 0 88px; text-align: center; }
  .cp-cs .wrap { max-width: 1080px; }
  .cp-cs-h { font-size: 42px; }
  .cp-cs-h br { display: none; }
  .cp-cs-sub { font-size: 20px; margin-bottom: 44px; }
  .cp-cs-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; margin-bottom: 32px; }
  .cp-cs-step { padding: 24px 24px 24px; }
  .cp-cs-row { grid-template-columns: 1fr; }
  .cp-cs-safe { max-width: 720px; margin: 0 auto; padding: 16px 20px; gap: 12px 32px; }
}
/* スマホは見出しとその上（札・LINE×きてこ）を中央に（2026/10/28 渡井さん） */
@media (max-width: 767px) {
  .cp-fv .cp-badge { display: flex; margin-left: auto; margin-right: auto; width: fit-content; }
  .cp-fv .cp-pair { justify-content: center; }
  .cp-fv .cp-h1 { text-align: center; }
}
@media (max-width: 767px) { .cp-cs-meta { margin-left: -78px; white-space: nowrap; } .cp-cs-d { margin-bottom: 10px; } }
@media (max-width: 767px) { .cp-cs-h { font-size: 26px; } }
/* 説明の文は、文の中では左詰め・かたまりごと中央に（2026/10/28 渡井さん）。中央揃えの複数行は読みにくい */
.cp .cp-f2-lead { text-align: left; width: fit-content; max-width: 34em; margin-left: auto; margin-right: auto; }
/* 「（ベーシック以上）」が、行の中で別の列になって崩れていた。文のあとに小さな札として続ける */
.cp-ba-note { display: inline-block; margin-left: 6px; padding: 0 8px; border: 1.5px solid #B9AFA8; border-radius: 999px; font-size: 14px; font-weight: 700; color: #5E554F; line-height: 1.6; vertical-align: 2px; white-space: nowrap; }
/* 「キャンペーンの4つの特典」の見出しの札を中央に（2026/10/28 渡井さん）。見出しの中の文字も中央 */
.cp-gifts-head { align-items: center; text-align: center; }
@media (min-width: 768px) { .cp-gifts-head { justify-content: center; } }
/* 特典のカード：アイコンの横にタイトル、その下に説明（2026/10/28 渡井さん） */
.cp-coupon { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.cp-coupon > .cp-coupon-ic { grid-column: 1; grid-row: 1; }
.cp-coupon > h3 { grid-column: 2; grid-row: 1; margin: 0; padding-right: 58px; }
.cp-coupon > :not(.cp-coupon-ic):not(h3):not(.cp-no) { grid-column: 1 / -1; }
.cp-coupon > p { margin-top: 12px; }

/* 申込ボタンをゆらゆら（2026/10/28 渡井さん）。4秒ごとに小さく揺れて目を引く。下に付いてくるボタンは揺らさない（落ち着かないので）。
   押したとき・動きを減らす設定では止める */
@media (prefers-reduced-motion: no-preference) {
  .cp .cta:not(.sticky .cta) { animation: cpsway 4s ease-in-out infinite; transform-origin: 50% 60%; }
  .cp .cta:hover, .cp .cta:active, .cp .cta:focus-visible { animation-play-state: paused; }
}
@keyframes cpsway {
  0%, 62%, 100% { transform: none; }
  66% { transform: rotate(-2deg) scale(1.03); }
  71% { transform: rotate(2deg) scale(1.03); }
  76% { transform: rotate(-1.5deg) scale(1.02); }
  81% { transform: rotate(1deg) scale(1.01); }
  86% { transform: none; }
}
/* かかる時間（1分など）は、アイコンの真下に（2026/10/28 渡井さん） */
.cp-cs-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cp-cs-side .cp-cs-meta { padding: 2px 8px; white-space: nowrap; }
@media (min-width: 768px) { .cp-cs-side { flex-direction: row; justify-content: flex-start; gap: 12px; } }
/* かかる時間をアイコンの下に移したので、前の「左へずらす」指定を消す。長い「オンライン30分・訪問60分」は折り返して収める */
@media (max-width: 767px) {
  .cp-cs-row { grid-template-columns: 96px minmax(0, 1fr); }
  .cp-cs-side .cp-cs-meta { margin-left: 0; white-space: normal; text-align: center; justify-content: center; line-height: 1.4; padding: 4px 8px; border-radius: 12px; }
}
/* 最後の申込の見出し：文は左詰め、かたまりごと中央に（2026/10/28 渡井さん） */
.cp .final .h2 { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }
/* 最後の申込の見出しは1行・中央に（2026/10/28 渡井さん「改行なしでセンタリング」。上の左詰めの指定を上書き） */
.cp .final .h2 { width: auto; text-align: center; }
.cp .final .h2 br { display: none; }
@media (max-width: 767px) { .cp .final .h2 { white-space: nowrap; font-size: clamp(24px, 7.4vw, 32px); } }
/* スマホ：丸い「3か月無料」の札を、お店のスマホの右下へ（2026/10/28 渡井さん）。上の予約表の帯・お知らせにかからない */
@media (max-width: 767px) {
  .cp-roundbadge { top: auto; bottom: 34px; right: -10px; }
}

/* ── 2026/10/28 機能カードの3・4枚目（4枚ともライトで使えるものに）──
   3：インスタ風のプロフィール（ロゴ・商標は使わない）のリンクから、店の Web 予約ページへ。4：LINE の「予約の確認」から変更・キャンセル */
.cp-f2-pic { gap: 6px; }
.cp-f2-arrow { align-self: center; font-size: 28px; font-weight: 900; color: #C8325F; line-height: 1; }
.cp-mini.is-ig, .cp-mini.is-web { width: 140px; padding-top: 22px; }
.cp-ig-head { display: flex; align-items: center; gap: 6px; padding: 4px 8px; }
.cp-ig-av { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #E5507F; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #F79A4D; }
.cp-ig-av img { width: 26px; height: auto; }
.cp-ig-head b { display: block; font-size: 11px; color: #111; }
.cp-ig-head span { display: block; font-size: 10px; color: #3D3D3D; }
.cp-ig-bio { margin: 2px 8px 4px; font-size: 10px; line-height: 1.45; color: #111; }
.cp-ig-link { position: relative; margin: 0 8px 6px; }
.cp-ig-link span { display: inline-block; font-size: 13px; font-weight: 700; color: #1D4FA3; background: #FFF6D6; border-radius: 6px; padding: 2px 6px; }
.cp-ig-tap { position: absolute; right: 4px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 3px solid #E5507F; background: rgba(229, 80, 127, .18); }
.cp-ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0 2px; }
.cp-ig-grid i { aspect-ratio: 1; background: linear-gradient(135deg, #F7C9D6, #FBE0C8); }
.cp-ig-grid i:nth-child(even) { background: linear-gradient(135deg, #D9E6F2, #F1E4F5); }
.cp-web-bar { margin: 0; padding: 6px 8px; background: #E5507F; color: #fff; font-size: 11px; font-weight: 900; }
.cp-web-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cp-web-f { margin: 0; padding: 4px 6px; border: 1.5px solid #E2DCD8; border-radius: 6px; font-size: 13px; line-height: 1.3; color: #111; }
.cp-web-f small { display: block; font-size: 9px; color: #6A625D; }
.cp-web-btn { margin: 2px 0 0; padding: 6px 0; text-align: center; border-radius: 999px; background: linear-gradient(120deg, #E5507F, #E06A2E); color: #fff; font-size: 13px; font-weight: 900; }
.cp-mini-body.is-liff { background: #F5F4F0; padding: 10px 8px; gap: 8px; }
.cp-liff-card { background: #fff; border-radius: 10px; padding: 8px; font-size: 13px; line-height: 1.4; color: #111; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.cp-liff-card small { display: block; font-size: 10px; color: #6A625D; }
.cp-liff-card b { display: block; font-size: 15px; }
.cp-liff-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cp-liff-btns span { text-align: center; padding: 6px 0; border-radius: 999px; background: #06C755; color: #fff; font-size: 12px; font-weight: 900; }
.cp-liff-btns span.is-cancel { background: #fff; color: #B8305E; border: 1.5px solid #C8325F; }
.cp-liff-done { margin: 0; padding: 6px 8px; border-radius: 10px; background: #E8FAF0; color: #04913E; font-size: 13px; font-weight: 900; line-height: 1.35; }
@media (min-width: 768px) {
  .cp-mini.is-ig, .cp-mini.is-web { width: 168px; }
}
.cp-ig-link span { font-size: 12px; white-space: nowrap; }
.cp-web-body { gap: 4px; padding: 6px; }
.cp-web-f { font-size: 12px; padding: 2px 5px; }
.cp-web-f small { font-size: 8px; }
.cp-web-btn { font-size: 12px; padding: 5px 0; }
.cp-mini-body.is-liff { padding: 8px 6px; gap: 6px; }
.cp-liff-card { padding: 6px 8px; font-size: 12px; }
.cp-liff-card b { font-size: 13px; white-space: nowrap; }
.cp-liff-btns span { padding: 4px 0; }
.cp-liff-done { font-size: 12px; padding: 5px 7px; }
/* 3・4枚目の見本の下（申し込むボタン・変更しましたの表示）まで見えるように、絵の枠を少し高く */
.cp-f2-pic { height: 252px; }
.cp-mini { height: 228px; }
@media (min-width: 768px) { .cp-f2-pic { height: 276px; } .cp-mini { height: 244px; } }
/* 機能カードのタイトル：2行になるとアイコンが行の真ん中にずれたので、アイコンは1行目にそろえる（2026/10/28 渡井さん「アイコンずれてる」） */
.cp-f2-t { align-items: flex-start; }
.cp-f2-t .cp-f2-ic { flex: none; margin-top: -2px; }
.cp-liff-done { white-space: nowrap; letter-spacing: -.02em; }
/* 特典カードを「アイコンの横にタイトル」にしたあと、PC で崩れていた（特典3の行が引き伸ばされ、特典4は前の2列の指定とぶつかった）。
   行は上に詰め、特典4のポップの絵は説明の下に中央で置く */
.cp-coupon { align-content: start; }
@media (min-width: 768px) {
  .cp-coupon-pop { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; }
  .cp-coupon-pop > .cp-coupon-ic { grid-column: 1; grid-row: 1; }
  .cp-coupon-pop > h3 { grid-column: 2; grid-row: 1; }
  .cp-coupon-pop > p { grid-column: 1 / -1; grid-row: auto; }
  .cp-coupon-pop .cp-pop { grid-column: 1 / -1; grid-row: auto; justify-content: center; display: flex; padding-top: 14px; }
}

/* ── 2026/10/28 特典の帯（出張設定0円・先着20店・12/31）。機能カードと違う、強い桃色の帯。画面の端まで広げる ── */
.cp-perk { position: relative; margin: 8px calc(50% - 50vw) 0; padding: 40px 16px 44px; overflow: hidden; color: #fff; text-align: center;
  background: linear-gradient(135deg, #C8325F 0%, #E5507F 50%, #E06A2E 100%); }
.cp-perk::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background: radial-gradient(circle at 10% 20%, #fff 0 3px, transparent 4px) 0 0 / 60px 60px, radial-gradient(circle at 70% 60%, #FFD34D 0 3px, transparent 4px) 0 0 / 80px 80px; }
.cp-perk > * { position: relative; }
.cp-perk-rib { display: inline-block; margin: 0 0 20px; padding: 6px 18px; background: #FFD34D; color: #1F1F1F; border-radius: 6px; transform: rotate(-2deg);
  font: 900 20px/1.3 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; box-shadow: 0 4px 0 rgba(120, 30, 60, .3); }
.cp-perk-grid { display: grid; gap: 16px; max-width: 980px; margin: 0 auto 24px; }
.cp-perk-box { background: rgba(255, 255, 255, .14); border: 2px solid rgba(255, 255, 255, .55); border-radius: 20px; padding: 20px 16px; }
.cp-perk-lab { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 16px; font-weight: 900; }
.cp-perk-lab .ic { width: 22px; height: 22px; }
.cp-perk-big { margin: 0 0 8px; font: 900 30px/1.1 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; text-shadow: 0 3px 0 rgba(120, 30, 60, .35); }
.cp-perk-big b { font-size: 76px; color: #FFD34D; letter-spacing: -.02em; }
.cp-perk-big span { font-size: 30px; }
.cp-perk-t { margin: 0 0 8px; font-size: 17px; font-weight: 900; line-height: 1.6; }
.cp-perk-map { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 10px; }
.cp-perk-cities { list-style: none; margin: 0 0 10px; padding: 0; display: flex; gap: 6px; justify-content: center; }
.cp-perk-cities li { flex: 1; max-width: 88px; background: #fff; color: #C8325F; font-weight: 900; font-size: 16px; border-radius: 999px; padding: 4px 4px; white-space: nowrap; }
.cp-perk-s { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.6; }
.cp-perk-dl { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 12px; }
.cp-perk-cal { width: 84px; border-radius: 12px; overflow: hidden; background: #fff; color: #1F1F1F; box-shadow: 0 6px 0 rgba(120, 30, 60, .3); }
.cp-perk-cal span { display: block; background: #FFD34D; font-size: 14px; font-weight: 900; padding: 3px 0; }
.cp-perk-cal b { display: block; font: 900 40px/1.2 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; }
.cp-perk-until { margin: 0; font: 900 22px/1.2 "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; text-align: left; }
.cp-perk-until b { font-size: 44px; color: #FFD34D; margin-right: 2px; }
.cp-perk-days { margin: 6px 0 0; font-size: 16px; font-weight: 900; text-align: left; }
.cp-perk-days b { font-size: 24px; color: #FFD34D; margin: 0 2px; }
.cp .cp-perk-cta { max-width: 440px; margin: 0 auto; background: #fff !important; color: #C8325F; }
.cp-perk-sub { margin: 10px 0 0; font-size: 16px; font-weight: 700; }
@media (min-width: 768px) {
  .cp-perk { padding: 64px 24px 72px; margin-top: 16px; }
  .cp-perk-rib { font-size: 26px; margin-bottom: 32px; }
  .cp-perk-grid { grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 36px; }
  .cp-perk-box { padding: 28px 28px; }
  .cp-perk-big { font-size: 38px; }
  .cp-perk-big b { font-size: 104px; }
  .cp-perk-t { font-size: 18px; }
}
@media (min-width: 768px) {
  .cp .cp-coupon-pop > h3 { grid-column: 2; grid-row: 1; }
  .cp .cp-coupon-pop > .cp-coupon-ic { grid-column: 1; grid-row: 1; }
  .cp .cp-coupon .cp-key { font-size: 28px; white-space: nowrap; }
}
/* 「わからなければ、お店にうかがって設定します。」を中央に（2026/10/28 渡井さん） */
.cp .help { justify-content: center; text-align: center; }
/* 「予約まわりが、こう変わります」を1行・中央に（2026/10/28 渡井さん） */
.cp .cp-ba-h { text-align: center; }
.cp .cp-ba-h br { display: none; }
@media (max-width: 767px) { .cp .cp-ba-h { white-space: nowrap; font-size: clamp(20px, 6.4vw, 28px); } }
/* 「オンライン30分・訪問60分」が細かく折れて読みにくかった（2026/10/28）。2段に分けて、それぞれ1行で */
.cp-cs-meta.is-two { flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 12px; }
.cp-cs-meta.is-two span { display: block; white-space: nowrap; font-size: 14px; line-height: 1.4; }
.cp-cs-meta.is-two b { font-size: 16px; margin-left: 2px; }
@media (min-width: 768px) { .cp-cs-meta.is-two { flex-direction: row; gap: 10px; } }
@media (max-width: 767px) { .cp-cs-step:has(.cp-cs-meta.is-two) .cp-cs-row { grid-template-columns: 124px minmax(0, 1fr); } }

/* ── 新しいデザインの通常版（body.cp-std。2026/10/28）──
   広告別 FV（html[data-fv=A|B|C]。<head> の先頭の script が utm_content で決める）：見出しと一言だけ広告の文言に替える */
.cp-std .cp-hv-A, .cp-std .cp-hv-B, .cp-std .cp-hv-C, .cp-std .cp-std-say { display: none; }
html[data-fv=A] .cp-std .cp-hv-d, html[data-fv=B] .cp-std .cp-hv-d, html[data-fv=C] .cp-std .cp-hv-d { display: none; }
html[data-fv=A] .cp-std .cp-hv-A, html[data-fv=B] .cp-std .cp-hv-B, html[data-fv=C] .cp-std .cp-hv-C { display: inline; }
html[data-fv=A] .cp-std .cp-std-say, html[data-fv=B] .cp-std .cp-std-say, html[data-fv=C] .cp-std .cp-std-say { display: block; margin: -4px 0 12px; font-size: 17px; font-weight: 700; color: #1F1F1F; }

/* デモへの入口（2026/10/28 渡井さん「デモ画面のリンクがない」）。FV は控えめな文字リンク、機能の下は目立つカード */
.cp-demo-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: #B8305E; font-weight: 900; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
.cp-demo-link .ic { width: 18px; height: 18px; color: #06C755; }
.cp-fv-act { text-align: center; }
.cp-demo-card { display: flex; align-items: center; gap: 14px; max-width: 720px; margin: 0 auto 20px; padding: 16px 18px; background: #fff; border: 3px solid #06C755; border-radius: 18px;
  color: #1F1F1F; text-decoration: none; box-shadow: 0 6px 16px rgba(4, 145, 62, .14); }
.cp-demo-card:focus-visible { outline: 3px solid #1F1F1F; outline-offset: 2px; }
.cp-demo-card-ic { width: 52px; height: 52px; flex: none; border-radius: 14px; background: #E6F8EE; color: #06C755; display: flex; align-items: center; justify-content: center; }
.cp-demo-card-ic .ic { width: 28px; height: 28px; }
.cp-demo-card b { display: block; font-size: 18px; line-height: 1.4; }
.cp-demo-card small { display: block; font-size: 16px; line-height: 1.5; color: #1F1F1F; }
.cp-demo-card-go { margin-left: auto; flex: none; padding: 8px 14px; border-radius: 999px; background: #06C755; color: #fff; font-weight: 900; font-size: 16px; white-space: nowrap; }
@media (max-width: 767px) { .cp-demo-card { flex-wrap: wrap; } .cp-demo-card-go { margin-left: 0; width: 100%; text-align: center; } }
/* 管理画面のデモ（2026/10/28）。LINE のデモと並べ、色だけ「きてこ」の桃色に */
.cp-demo-card-admin { border-color: #F0618E; }
.cp-demo-card-admin .cp-demo-card-ic { background: #FDE3EA; color: #F0618E; }
.cp-demo-card-admin .cp-demo-card-go { background: #F0618E; }
/* FV のデモの入口を2つに（お客様の画面・お店の管理画面。2026/10/28） */
.cp-demo-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; margin: 10px 0 0; font-size: 16px; }
.cp-demo-links > span { width: 100%; font-weight: 700; color: #1F1F1F; font-size: 14px; }
.cp-demo-links .cp-demo-link { margin-top: 0; }
.cp-demo-link.is-admin .ic { color: #C8325F; }
/* FV のデモをボタンに（2026/10/28 渡井さん「ボタンぽくして」）。申込・LINE より一段控えめな、白地に緑の枠 */
.cp-demo-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; margin: 12px 0 0; padding: 6px 14px; border-radius: 999px;
  background: #fff; color: #04913E; border: 2.5px solid #06C755; font-weight: 900; font-size: 16px; line-height: 1.3; text-decoration: none; box-shadow: 0 4px 12px rgba(4, 145, 62, .12); }
.cp-demo-btn .ic { width: 20px; height: 20px; flex: none; color: #06C755; }
.cp-demo-btn::after { content: "›"; font-size: 20px; line-height: 1; margin-left: 2px; }
.cp-demo-btn:hover { background: #F1FBF5; }
.cp-demo-btn:focus-visible { outline: 3px solid #1F1F1F; outline-offset: 2px; }
.cp-demo-btn { min-height: 44px; margin-top: 10px; white-space: nowrap; }