/* ============================================================
   ensō AI — home.css
   ------------------------------------------------------------
   メインページのヒーロー(二幕):
   ① ラップトップ: 左のAIチャットで頼む → 右の ensō の画面に反映
   ② スマホが前に出て、お客様のLINEに届く
   状態は .hm-stage の .s-pc / .s-phone で切り替える(js/home.js)。
   調整ポイント: .laptop の max-width、.hm-phone の位置と大きさ
   ============================================================ */

.hm-stage { position: relative; min-height: 560px; }

/* ---------- ラップトップ ---------- */
.laptop {
  position: relative; width: 100%; max-width: 880px; margin: 0 auto;
  transition: transform 0.7s var(--ease-soft), opacity 0.7s var(--ease-soft), filter 0.7s var(--ease-soft);
}
.laptop-screen {
  position: relative; aspect-ratio: 16 / 10.2;
  padding: 14px 14px 18px; background: #14120F; border-radius: 16px 16px 4px 4px;
  box-shadow: inset 0 0 0 1.5px #55504A, 0 40px 70px -40px rgba(26, 24, 21, 0.55);
}
.laptop-screen::before { /* カメラ */
  content: ''; position: absolute; left: 50%; top: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2A2825;
}
.laptop-base {
  height: 14px; margin: 0 -3%; background: linear-gradient(#DAD6CC, #C9C5BA); border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 20px -14px rgba(26, 24, 21, 0.5);
}
.laptop-base::after { content: ''; position: absolute; left: 50%; width: 120px; height: 5px; margin-left: -60px; background: #B8B4A8; border-radius: 0 0 5px 5px; }

/* 画面の中のアプリ */
.app { position: absolute; inset: 14px 14px 18px; background: #FFFFFF; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.app-bar { display: flex; align-items: center; gap: 24px; padding: 10px 18px; border-bottom: 1px solid #E3DFD4; background: #F7F4EE; }
.app-tabs { display: flex; gap: 18px; font-size: 11px; letter-spacing: 0.12em; color: #8B887F; }
.app-tabs .on { color: #1A1815; border-bottom: 1px solid #1A1815; padding-bottom: 1px; }
.app-body { flex: 1; display: grid; grid-template-columns: 38% 1fr; min-height: 0; }
.pane-lbl { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.2em; color: #8B887F; margin-bottom: 10px; }
.pane-lbl .ai-tag { font-size: 8.5px; }

/* 左: AIチャット */
.hm-chat { display: flex; flex-direction: column; padding: 16px; border-right: 1px solid #E3DFD4; background: #FBFAF6; }
.hm-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.hm-msg { max-width: 94%; padding: 9px 12px; font-size: 12px; line-height: 1.7; border-radius: 12px; }
.hm-me { align-self: flex-end; background: #1A1815; color: #F7F4EE; border-radius: 12px 12px 3px 12px; min-height: 2.6em; }
.hm-ai { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid #E3DFD4; border-radius: 12px 12px 12px 3px; color: #1A1815; opacity: 0; transform: translateY(6px); transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft); }
.hm-chat.replied .hm-ai { opacity: 1; transform: none; }
.hm-ask.typing::after { background: #F7F4EE; border-color: #F7F4EE; }
.hm-input { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 8px 12px; border: 1px solid #E3DFD4; border-radius: 8px; background: #FFFFFF; font-size: 11px; color: #B8B4A8; }
.hm-input i { width: 18px; height: 18px; border-radius: 50%; background: #1A1815; }

/* 右: ensō の画面 */
.hm-enso { display: flex; flex-direction: column; padding: 16px 20px; }
.hm-rows { display: flex; flex-direction: column; gap: 6px; }
.hm-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid #E3DFD4; font-size: 12.5px; line-height: 1.6; }
.hm-row > span { flex: none; width: 62px; font-size: 9.5px; letter-spacing: 0.12em; color: #8B887F; }
.hm-row > div { flex: 1; min-width: 0; min-height: 1.6em; color: #1A1815; }
.hm-enso .ai-apply { padding: 10px 0 0; margin-top: auto; min-height: 44px; }
.hm-enso .ai-apply-btn { height: 32px; font-size: 11px; }
.hm-ring { width: 20px; height: 20px; margin-left: auto; display: inline-block; }
.hm-ring svg { width: 100%; height: 100%; overflow: visible; }
.hm-ring-bg { fill: none; stroke: #1A1815; stroke-width: 3; stroke-linecap: round; opacity: 0.12; }
.hm-ring-line { fill: none; stroke: #1A1815; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s var(--ease-soft); }

/* ---------- スマホ(お客様のLINE) ---------- */
.hm-phone {
  position: absolute; right: 2%; bottom: -24px; width: 250px;
  opacity: 0; transform: translateY(48px);
  transition: opacity 0.6s var(--ease-soft), transform 0.7s var(--ease-soft);
}
.hm-phone .phone { max-width: 250px; padding: 9px; border-radius: 40px; }
.hm-phone .screen { border-radius: 32px; }
.hm-phone .screen::before { width: 70px; height: 22px; top: 9px; }
.hm-phone .status { height: 40px; padding: 11px 20px 0 24px; font-size: 12px; }
.hm-phone .phone-bar { padding: 6px 12px 9px; font-size: 11.5px; }
.hm-phone .chat { padding: 14px 12px; gap: 9px; }
.hm-phone .bub { font-size: 11.5px; padding: 9px 11px; }
.hm-phone .chat-input { padding: 8px 12px 22px; }
.hm-phone-cap { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font-size: 10px; letter-spacing: 0.24em; color: #8B887F; white-space: nowrap; }
.hm-bub-shop, .hm-bub-me, .hm-date { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease-soft), transform 0.4s var(--ease-soft); }
.hm-phone.arrived .hm-date, .hm-phone.arrived .hm-bub-shop { opacity: 1; transform: none; }
.hm-phone.replied .hm-bub-me { opacity: 1; transform: none; }
.hm-tag { margin-bottom: 2px; }
.hm-slots { margin-top: 8px; }
.hm-slots .slot { transition: background 0.25s var(--ease-soft), color 0.25s var(--ease-soft); }
.hm-slots .slot.tap { background: #1A1815; color: #F7F4EE; }

/* ---------- 二幕の切り替え ---------- */
.hm-stage.s-phone .laptop { transform: translateX(-6%) scale(0.96); opacity: 0.45; filter: saturate(0.9); }
.hm-stage.s-phone .hm-phone { opacity: 1; transform: none; }

/* ---------- モバイル ---------- */
@media (max-width: 767px) {
  .hm-stage { min-height: 0; }
  .laptop { max-width: none; }
  .laptop-screen { aspect-ratio: auto; height: 420px; padding: 10px 10px 12px; border-radius: 12px 12px 3px 3px; }
  .app { inset: 10px 10px 12px; }
  .app-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .hm-chat { border-right: 0; border-bottom: 1px solid #E3DFD4; padding: 12px; }
  .hm-msgs { min-height: 70px; }
  .hm-input { display: none; }
  .app-tabs { display: none; }
  .hm-enso { padding: 12px; }
  .hm-phone { position: relative; right: auto; bottom: auto; width: 230px; margin: 40px auto 0; display: none; }
  .hm-stage.s-phone .hm-phone { display: block; }
  .hm-stage.s-phone .laptop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .laptop, .hm-phone, .hm-ai, .hm-bub-shop, .hm-bub-me, .hm-date, .hm-ring-line { transition: none; }
}

/* 調整: ラップトップを少し低く、スマホをラップトップより低く収める */
.laptop { max-width: 820px; }
.laptop-screen { aspect-ratio: 16 / 9.4; }
.hm-stage { min-height: 0; padding-bottom: 12px; }
.hm-phone { width: 212px; right: 3%; bottom: -6px; }
.hm-phone .phone { max-width: 212px; padding: 8px; border-radius: 36px; }
.hm-phone .screen { border-radius: 29px; }
.hm-phone .status { height: 36px; padding: 10px 18px 0 22px; font-size: 11px; }
.hm-phone .chat { padding: 12px 10px; gap: 8px; }
.hm-phone .bub { font-size: 11px; padding: 8px 10px; }
.hm-phone .chat-input { padding: 7px 10px 18px; }
.hm-phone .chat-input i { height: 28px; }
.hm-msgs { justify-content: flex-start; }
.hm-chat .hm-input { margin-top: auto; }
@media (max-width: 767px) { .laptop-screen { aspect-ratio: auto; } .hm-phone { width: 230px; right: auto; bottom: auto; } }

/* ---------- 機能: 8つを一枚で ---------- */
.hf-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid #E3DFD4; }
.hf { display: grid; grid-template-columns: 40px 1fr; gap: 6px 16px; padding: 22px 0; border-bottom: 1px solid #E3DFD4; }
.hf .hf-ic { grid-row: span 2; }
.hf .hf-ic svg { width: 36px; height: 36px; }
.hf h3 .feat-ai { vertical-align: 2px; margin-left: 4px; }
@media (min-width: 640px) { .hf-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (min-width: 1024px) { .hf-grid { grid-template-columns: repeat(4, 1fr); column-gap: 32px; } .hf { grid-template-columns: 1fr; padding: 24px 0 26px; } .hf .hf-ic { grid-row: auto; margin-bottom: 8px; } }

/* ---------- 業種の入口 ---------- */
.ind-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .ind-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ind-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.ind {
  display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 22px;
  border: 1px solid #DAD6CC; border-radius: 10px; background: #FFFFFF; color: #1A1815;
  transition: transform 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft);
}
.ind:hover { transform: translateY(-4px); border-color: #1A1815; box-shadow: 0 24px 40px -32px rgba(26, 24, 21, 0.5); }
.ind-n { font-size: 13px; letter-spacing: 0.1em; color: #8B887F; }
.ind-shot { margin-top: 12px; padding: 12px; border-radius: 8px; background: #F7F4EE; font-size: 11px; line-height: 1.6; }
.ind-row { display: flex; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #E3DFD4; }
.ind-row span { flex: none; width: 34px; font-size: 9px; letter-spacing: 0.12em; color: #8B887F; }
.ind-row div { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-bub { margin-top: 10px; padding: 8px 10px; background: #FFFFFF; border: 1px solid #E3DFD4; border-radius: 10px 10px 10px 3px; font-size: 10.5px; }
.ind-go { margin-top: auto; padding-top: 14px; font-size: 12px; letter-spacing: 0.1em; color: #1A1815; }
.ind-go::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-top: 1px solid #1A1815; border-right: 1px solid #1A1815; transform: rotate(45deg) translateY(-1px); transition: transform 0.3s var(--ease-soft); }
.ind:hover .ind-go::after { transform: rotate(45deg) translate(2px, -3px); }

/* ============================================================
   枠をリッチに(素材なし・CSSのみ)
   ラップトップ: 金属の縁 → 黒いガラスの段 → 画面 / ヒンジ → 天板 → 前縁 / 机に落ちる影
   スマホ: チタンの縁 → 黒いガラスの段 → 画面 / 机に落ちる影
   ============================================================ */
.hm-stage { isolation: isolate; }
.hm-stage::before { /* 台の光: 和紙の上に淡く白を置いて枠を浮かせる */
  content: ''; position: absolute; left: 50%; top: 40%; width: 120%; height: 90%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none; z-index: -1;
}
.laptop { z-index: 1; }
.laptop-screen {
  padding: 16px 16px 20px; border-radius: 18px 18px 6px 6px;
  background: linear-gradient(118deg, #45423C 0%, #26241F 22%, #14120F 50%, #1C1A17 78%, #33302B 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),   /* 金属の縁のハイライト */
    inset 0 0 0 2px rgba(0, 0, 0, 0.6),          /* 縁の内側の落ち */
    0 1px 0 rgba(255, 255, 255, 0.35),           /* 上面の光 */
    0 60px 90px -44px rgba(26, 24, 21, 0.6),
    0 24px 34px -26px rgba(26, 24, 21, 0.4);
}
.laptop-screen::before { /* カメラ: レンズの芯と光 */
  width: 7px; height: 7px; top: 4.5px; margin-left: -3.5px;
  background: radial-gradient(circle at 36% 34%, #5C6873 0 18%, #0F1113 62%);
  box-shadow: 0 0 0 1.5px #1F1D1A, 0 0 0 2.5px rgba(255, 255, 255, 0.08);
}
.app {
  inset: 16px 16px 20px; border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 5px #070706; /* 黒いガラスの段 */
}
.laptop-screen::after { /* ガラスの反射: 画面の上を斜めに走る */
  content: ''; position: absolute; inset: 16px 16px 20px; border-radius: 8px; pointer-events: none; z-index: 3;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 22%, rgba(255, 255, 255, 0) 40%);
  mix-blend-mode: soft-light; opacity: 0.9;
}
.laptop-base {
  position: relative; height: 18px; margin: 0 -4.5%;
  background: linear-gradient(180deg, #F1EEE6 0%, #DBD7CC 42%, #C4C0B4 78%, #A9A599 100%);
  border-radius: 3px 3px 16px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 2px 0 -1px rgba(255, 255, 255, 0.25),
    0 18px 26px -16px rgba(26, 24, 21, 0.55);
}
.laptop-base::before { /* ヒンジ */
  content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 3px;
  background: linear-gradient(180deg, #7E7A70, #B3AFA3); border-radius: 0 0 3px 3px; opacity: 0.85;
}
.laptop-base::after { /* 指をかける溝 */
  width: 140px; height: 6px; margin-left: -70px; top: 0;
  background: linear-gradient(180deg, #AEAA9E, #CFCBC0); border-radius: 0 0 7px 7px;
  box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, 0.18);
}
.laptop::after { /* 机に落ちる影 */
  content: ''; position: absolute; left: 4%; right: 4%; bottom: -26px; height: 44px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(26, 24, 21, 0.32) 0%, rgba(26, 24, 21, 0.1) 40%, rgba(26, 24, 21, 0) 70%);
  filter: blur(5px);
}

/* スマホ */
.hm-phone { z-index: 2; }
.hm-phone .phone {
  background: linear-gradient(155deg, #4A4741 0%, #221F1B 30%, #14120F 62%, #3A3732 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 2px rgba(0, 0, 0, 0.55),
    inset 0 0 0 3.5px #0B0A09,
    0 1px 0 rgba(255, 255, 255, 0.3),
    0 60px 90px -44px rgba(26, 24, 21, 0.65),
    0 24px 34px -22px rgba(26, 24, 21, 0.45);
}
.hm-phone .phone::before, .hm-phone .phone::after { background: linear-gradient(90deg, #3C3934, #23211D); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
.hm-phone .phone::before { background: linear-gradient(#2E2B27 0 42%, transparent 42% 58%, #2E2B27 58% 100%); }
.hm-phone .screen { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
.hm-phone::after { /* 机に落ちる影 */
  content: ''; position: absolute; left: 6%; right: 6%; bottom: -22px; height: 40px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(26, 24, 21, 0.34) 0%, rgba(26, 24, 21, 0) 68%);
  filter: blur(5px);
}

/* 二幕: ラップトップは奥に退くだけで、質感は保つ */
.hm-stage.s-phone .laptop { opacity: 0.55; filter: saturate(0.85) brightness(1.02); }

@media (max-width: 767px) {
  .laptop-screen { padding: 11px 11px 14px; border-radius: 13px 13px 4px 4px; }
  .app, .laptop-screen::after { inset: 11px 11px 14px; border-radius: 6px; }
  .app { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 4px #070706; }
  .laptop-base { height: 14px; margin: 0 -3%; }
  .laptop-base::after { width: 90px; margin-left: -45px; height: 5px; }
  .hm-stage::before { display: none; }
}

/* ---------- ensō画面: お客様に届く文面のプレビュー(下書きが揃ったら現れる) ---------- */
.hm-preview { margin-top: 18px; opacity: 0; transform: translateY(6px); transition: opacity 0.45s var(--ease-soft), transform 0.45s var(--ease-soft); }
.hm-enso.drafted .hm-preview { opacity: 1; transform: none; }
.hm-preview .pane-lbl { margin-bottom: 8px; }
.hm-pv-bub { display: flex; flex-direction: column; gap: 2px; max-width: 78%; padding: 9px 12px; background: #F7F4EE; border: 1px solid #E3DFD4; border-radius: 12px 12px 12px 3px; font-size: 11.5px; line-height: 1.65; color: #1A1815; }
.hm-pv-tag { font-size: 9px; letter-spacing: 0.14em; color: #FB8446; }
@media (max-width: 767px) { .hm-preview { display: none; } }

/* ---------- 二幕: 奥のラップトップはピントを外す(薄めない) ---------- */
.hm-stage.s-phone .laptop { opacity: 0.8; filter: blur(1.6px) saturate(0.9); transform: translateX(-5%) scale(0.955); }

/* ---------- スマホ: 吹き出しが収まる高さに ---------- */
.hm-phone { width: 236px; right: 2%; bottom: -10px; }
.hm-phone .phone { max-width: 236px; }
.hm-phone .chat { padding: 12px 10px 8px; }
.hm-phone .hm-chatline { justify-content: flex-end; overflow: hidden; }
.hm-phone-cap { top: -28px; }

/* ============================================================
   1画面に収める: PCでは 左=コピー+CTA / 右=舞台 の二段組
   ヒーロー全体をファーストビュー(ヘッダー分を引いた高さ)に収める
   ============================================================ */
@media (min-width: 1024px) {
  .hm-wrap {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 44px; align-items: center;
    min-height: min(calc(100svh - 72px), 800px); padding-top: 24px; padding-bottom: 48px;
  }
  .hm-copy { padding-bottom: 8px; }
  #hm h1 { font-size: clamp(28px, 2.75vw, 40px); }
  #hm .hm-copy > p:not(.lbl) { max-width: 440px; }
  .hm-vis .hm-stage { margin-top: 0; }
  .laptop { max-width: none; }
  .hm-phone { width: 224px; right: -2%; bottom: -14px; }
  .hm-phone .phone { max-width: 224px; }
  .hm-stage.s-phone .laptop { transform: translateX(-4%) scale(0.95); }
}
@media (min-width: 1280px) {
  .hm-wrap { column-gap: 56px; }
  .hm-phone { width: 236px; }
  .hm-phone .phone { max-width: 236px; }
}

/* 二段組で縮んだ画面に、下書き+プレビュー+ボタンが収まるように */
@media (min-width: 1024px) {
  .laptop-screen { aspect-ratio: 16 / 10.4; }
  .hm-enso { padding: 14px 18px 14px; }
  .hm-rows { gap: 4px; }
  .hm-row { padding: 6px 0; font-size: 12px; }
  .hm-preview { margin-top: 12px; }
  .hm-preview .pane-lbl { margin-bottom: 6px; }
  .hm-pv-bub { max-width: 86%; padding: 8px 11px; font-size: 11px; line-height: 1.6; }
  .hm-pv-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hm-enso .ai-apply { padding-top: 8px; min-height: 40px; }
  .hm-chat { padding: 14px; }
  .hm-msg { font-size: 11.5px; padding: 8px 11px; }
  /* コピー側: ラベルとボタンが折れないように */
  #hm .lbl { letter-spacing: 0.18em; }
  .hm-ctas > div { flex-wrap: wrap; }
  .hm-ctas a { white-space: nowrap; padding-left: 26px; padding-right: 26px; }
}

/* 舞台を広く(4.5 : 7.5)、画面の中身は一回り小さく描く */
@media (min-width: 1024px) {
  .hm-wrap { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); }
  .app-body { zoom: 0.9; }
  #hm .lbl { font-size: 11px; letter-spacing: 0.16em; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hm-preview { display: none; }
}
@media (max-width: 767px) { #hm .lbl { font-size: 11px; letter-spacing: 0.18em; } }

/* ============================================================
   演出の強化(1 吹き出しが飛ぶ / 2 店に戻って予約が入る / 3 字幕 / 5 手の気配 / 7 カメラワーク)
   状態: .s-pc(第一幕) → .s-phone(第二幕) → .s-return(第三幕: 店に戻る)
   ============================================================ */

/* 7. カメラ: 舞台に奥行きを持たせ、マウスに合わせて群れごと少し傾く(--px/--py は js/home.js) */
.hm-stage { perspective: 1600px; perspective-origin: 50% 40%; }
.hm-cam { position: relative; transform-style: preserve-3d; transform: rotateY(calc(var(--px, 0) * 4deg)) rotateX(calc(var(--py, 0) * -2.5deg)); transition: transform 0.6s ease-out; }
.laptop { transform-origin: 50% 100%; will-change: transform, filter; }
.hm-phone { transform-origin: 50% 100%; will-change: transform; }
.hm-stage.s-phone .laptop { transform: translate3d(-4%, 0, -80px) rotateY(9deg) scale(0.95); opacity: 0.8; filter: blur(1.6px) saturate(0.9); }
.hm-stage.s-phone .hm-phone { transform: translate3d(0, 0, 40px) rotateX(0deg); }
.hm-phone { transform: translate3d(0, 48px, 0) rotateX(12deg); }
/* 第三幕: ラップトップにピントが戻り、スマホは右下に退く */
.hm-stage.s-return .laptop { transform: none; opacity: 1; filter: none; }
.hm-stage.s-return .hm-phone { opacity: 0.55; transform: translate3d(5%, 14px, -60px) rotateY(-8deg) scale(0.93); filter: blur(1.2px); transition: opacity 0.7s var(--ease-soft), transform 0.8s var(--ease-soft), filter 0.7s var(--ease-soft); }
.hm-stage.s-return .hm-phone-cap { opacity: 0; }
.hm-phone-cap { transition: opacity 0.4s var(--ease-soft); }

/* 5. 手の気配: カーソル */
.hm-cursor { position: absolute; left: 62%; top: 88%; width: 15px; height: 18px; z-index: 6; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  transition: left 0.6s var(--ease-soft), top 0.6s var(--ease-soft), opacity 0.3s var(--ease-soft), transform 0.12s var(--ease-soft); }
.hm-cursor.show { opacity: 1; }
.hm-cursor.click { transform: scale(0.8); }
/* 5. 入力欄に人が打つ → 送信で吹き出しになる */
.hm-input { position: relative; transition: border-color 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft); }
.hm-input.focus { border-color: #1A1815; box-shadow: 0 0 0 2px rgba(26, 24, 21, 0.06); }
.hm-input-text { color: #B8B4A8; min-height: 1.4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hm-input.focus .hm-input-text { color: #1A1815; }
.hm-input-text.typing::after { content: ''; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: #1A1815; border: 0; border-radius: 0; animation: caret 0.9s steps(1) infinite; }
.hm-send { transition: transform 0.15s var(--ease-soft), background 0.3s var(--ease-soft); }
.hm-send.press { transform: scale(0.85); }
.hm-me { opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity 0.35s var(--ease-soft), transform 0.4s var(--ease-soft); }
.hm-chat.sent .hm-me { opacity: 1; transform: none; }
.hm-ai2 { display: none; }
.hm-chat.booked .hm-ai2 { display: inline-flex; animation: hm-pop 0.4s var(--ease-soft) both; }
@keyframes hm-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 1. 吹き出しが ensō の画面からスマホへ飛ぶ */
.hm-fly { position: absolute; z-index: 9; pointer-events: none; display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; background: #F7F4EE; border: 1px solid #E3DFD4; border-radius: 12px 12px 12px 3px; font-size: 11.5px; line-height: 1.65; color: #1A1815;
  box-shadow: 0 2px 6px -4px rgba(26, 24, 21, 0.2);
  transition: left 0.95s cubic-bezier(0.55, 0, 0.2, 1), top 0.95s cubic-bezier(0.4, 0, 0.15, 1), width 0.95s var(--ease-soft), background 0.6s var(--ease-soft) 0.3s, box-shadow 0.6s var(--ease-soft), opacity 0.25s var(--ease-soft); }
.hm-fly.go { background: #FFFFFF; box-shadow: 0 24px 40px -22px rgba(26, 24, 21, 0.5); }
.hm-fly.go > * { animation: hm-lift 0.95s var(--ease-soft) both; }
.hm-fly.land { opacity: 0; }
.hm-fly .hm-pv-tag { font-size: 9px; letter-spacing: 0.14em; color: #FB8446; }
@keyframes hm-lift { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(-26px) scale(1.04); } 100% { transform: translateY(0) scale(1); } }

/* 2. 店に戻る: 下書きの画面が、予約の画面に切り替わる */
.hm-enso { position: relative; }
.hm-draft { display: flex; flex-direction: column; flex: 1; min-height: 0; transition: opacity 0.4s var(--ease-soft); }
.hm-book { position: absolute; inset: 14px 18px 14px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.45s var(--ease-soft) 0.15s, transform 0.45s var(--ease-soft) 0.15s; }
.hm-enso.booked .hm-draft { opacity: 0; }
.hm-enso.booked .hm-book { opacity: 1; transform: none; }
.hm-book-src { display: inline-block; padding: 1px 6px; border: 1px solid #06C755; border-radius: 3px; font-size: 8.5px; letter-spacing: 0.12em; color: #06C755; font-style: normal; }
.hm-book-rows { display: flex; flex-direction: column; }
.hm-brow { display: grid; grid-template-columns: 112px 1fr auto; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid #E3DFD4; font-size: 12px; line-height: 1.6; color: #55534C; }
.hm-brow b { font-weight: 500; color: #1A1815; }
.hm-brow em { font-style: normal; }
.hm-brow.new { position: relative; color: #1A1815; opacity: 0; transform: translateY(-6px); }
.hm-enso.booked .hm-brow.new { animation: hm-pop 0.5s var(--ease-soft) 0.45s both; }
.hm-brow.new::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: #1A1815; transform: scaleX(0); transform-origin: 0 50%; }
.hm-enso.booked .hm-brow.new::after { animation: hm-ink 0.7s var(--ease-soft) 0.8s both; }
.hm-brow.new em::before { content: '新規'; display: inline-block; margin-right: 8px; padding: 1px 5px; border-radius: 3px; background: #1A1815; color: #F7F4EE; font-size: 8.5px; letter-spacing: 0.12em; vertical-align: 1px; }
@keyframes hm-ink { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 3. 字幕: 進行に合わせて灯る */
.hm-steps { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 11.5px; letter-spacing: 0.12em; color: #B8B4A8; }
.hm-steps li { display: inline-flex; align-items: center; gap: 8px; transition: color 0.4s var(--ease-soft); }
.hm-steps li span { font-size: 12px; letter-spacing: 0.08em; }
.hm-steps li.done { color: #8B887F; }
.hm-steps li.on { color: #1A1815; }
.hm-steps li + li::before { content: ''; width: 14px; height: 1px; background: currentColor; opacity: 0.5; margin-right: 2px; }
@media (min-width: 1024px) { .hm-steps { margin-top: 30px; justify-content: center; } }
@media (max-width: 767px) {
  .hm-steps { gap: 6px 14px; font-size: 10.5px; margin-top: 22px; }
  .hm-stage { perspective: none; }
  .hm-cam { transform: none; }
  .hm-stage.s-return .laptop { display: block; }
  .hm-stage.s-return .hm-phone { display: none; }
  .hm-book { inset: 12px; }
  .hm-brow { grid-template-columns: 96px 1fr auto; font-size: 11px; }
}
@media (min-width: 1024px) { .hm-book { inset: 14px 18px 14px; } }
@media (prefers-reduced-motion: reduce) { .hm-cam, .hm-cursor, .hm-fly, .hm-brow.new, .hm-brow.new::after { transition: none; animation: none; } }

/* 調整: 飛ぶ吹き出しはスマホより手前に / スマホは手前に寄せすぎない / 1024〜1439px ではスマホを一回り小さく */
.hm-fly { transform: translateZ(90px); }
.hm-stage.s-phone .hm-phone { transform: translate3d(0, 0, 0) rotateX(0deg); }
.hm-stage.s-return .hm-phone { transform: translate3d(11%, 10px, -60px) rotateY(-8deg) scale(0.93); }
@media (min-width: 1024px) and (max-width: 1439px) {
  .hm-phone { width: 214px; right: -1%; bottom: -8px; }
  .hm-phone .phone { max-width: 214px; }
  .hm-phone-cap { top: -26px; }
}
@media (min-width: 1024px) and (max-width: 1439px) { .hm-phone .phone-bar { font-size: 10.5px; } .hm-phone .pb-name small { display: none; } }

/* メニューは外した: 画面名は右側の見出しに残す。バーは 印 + 円 だけ */
.app-bar { justify-content: space-between; padding: 9px 18px; }
.app-tabs { display: none; }

/* 送信ボタン: 縮まない丸 + 上向きの矢印 */
.hm-input { gap: 10px; }
.hm-input-text { flex: 1; min-width: 0; }
.hm-input .hm-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #1A1815; }
.hm-input .hm-send svg { width: 11px; height: 11px; }
.hm-input.focus .hm-send { background: #1A1815; }
/* 入力欄: 長い頼みは2行まで折り返す(本物のチャット欄と同じ挙動) */
.hm-input { align-items: flex-end; }
.hm-input-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.6; }
.hm-input-text { display: block; overflow: visible; text-overflow: clip; -webkit-line-clamp: none; }

/* 商品カード: LINEの吹き出しに写真枠(素材なし・布地の質感を線で) */
.hm-pic { display: none; position: relative; height: 62px; margin: 4px 0 8px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg, #E4E0D6 0%, #D3CEC1 100%); font-size: 9px; letter-spacing: 0.06em; color: #55534C; align-items: flex-end; padding: 6px 8px; }
.hm-pic.show { display: flex; }
.hm-pic::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 7px); opacity: 0.7; }
.hm-pic::after { content: ''; position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(26, 24, 21, 0.28); background: radial-gradient(circle at 40% 38%, rgba(255, 255, 255, 0.55), transparent 62%); }
/* 商品カードの回: スマホの縦幅に収める(日付は省き、写真枠は低めに) */
.hm-phone.has-pic .hm-date { display: none; }
.hm-phone.has-pic .hm-pic { height: 46px; margin: 3px 0 6px; }
.hm-phone.has-pic .chat { gap: 6px; }
.hm-phone.has-pic .hm-slots { margin-top: 6px; }

/* ============================================================
   A: スマホは最初から机の上に(ロック画面)。第二幕はカメラが寄るだけ
   B: 段取りを直列に(吹き出しが浮く → カメラが寄る → バネで収まる → 着地で点く)
   D: モバイル幅はクロスフェード(ラップトップが左へ滑って薄くなり、スマホが重なって入る)
   ============================================================ */
#hm { overflow: hidden; }
.hm-lock { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; padding-top: 24%; gap: 2px;
  background: linear-gradient(165deg, #3A3733 0%, #1E1C19 45%, #14120F 100%); color: #F7F4EE; border-radius: inherit;
  transition: opacity 0.45s var(--ease-soft) 0.35s; }
.hm-lock b { font-weight: 300; font-size: 40px; letter-spacing: 0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.hm-lock span { font-size: 9.5px; letter-spacing: 0.12em; opacity: 0.7; }
.hm-stage.s-phone .hm-lock { opacity: 0; }
.hm-stage.s-return .hm-lock { transition-delay: 0.5s; }
/* 飛び立ったあと、元のプレビューは空になる */
.hm-preview.flown .hm-pv-bub { opacity: 0; transform: translateY(-6px); transition: opacity 0.25s var(--ease-soft), transform 0.25s var(--ease-soft); }
.hm-fly { transition: left 1.15s cubic-bezier(0.6, 0, 0.25, 1), top 1.15s cubic-bezier(0.45, 0, 0.2, 1), width 1.15s var(--ease-soft), background 0.6s var(--ease-soft) 0.4s, box-shadow 0.7s var(--ease-soft), opacity 0.25s var(--ease-soft); }
.hm-fly.go > * { animation-duration: 1.15s; }

@media (min-width: 768px) {
  /* 机の上のスマホ: 右手前に小さく、少し斜め */
  .hm-phone { opacity: 1; filter: none; transform-origin: 100% 100%;
    transform: translate3d(14%, 0, -160px) rotateY(-20deg) scale(0.62);
    transition: transform 0.9s cubic-bezier(0.34, 1.22, 0.64, 1), opacity 0.5s var(--ease-soft), filter 0.6s var(--ease-soft); }
  .hm-stage.s-phone .hm-phone { transform: translate3d(0, 0, 0) rotateY(0deg) scale(1); }
  .hm-stage.s-return .hm-phone { opacity: 1; filter: none; transform: translate3d(14%, 0, -160px) rotateY(-20deg) scale(0.62); transition: transform 0.9s var(--ease-soft); }
  .hm-phone-cap { opacity: 0; }
  .hm-stage.s-phone .hm-phone-cap { opacity: 1; transition-delay: 0.5s; }
  /* ラップトップは少し左に寄せ、スマホの居場所をつくる */
  .laptop { transition: transform 0.9s var(--ease-soft), opacity 0.7s var(--ease-soft), filter 0.7s var(--ease-soft); }
  .hm-stage.s-pc .laptop, .hm-stage.s-return .laptop { transform: translate3d(-3.5%, 0, 0) scale(0.97); opacity: 1; filter: none; }
  .hm-stage.s-phone .laptop { transform: translate3d(-8%, 0, -90px) rotateY(9deg) scale(0.93); }
}

@media (max-width: 767px) {
  .hm-stage { position: relative; min-height: 0; padding-top: 30px; }
  .laptop { transition: transform 0.7s var(--ease-soft), opacity 0.5s var(--ease-soft); }
  .hm-phone { display: block; position: absolute; left: 50%; top: 30px; right: auto; bottom: auto; width: 220px; margin: 0; z-index: 3; pointer-events: none;
    opacity: 0; transform: translate3d(calc(-50% + 56px), 20px, 0) scale(0.94); transform-origin: 50% 50%;
    transition: transform 0.75s cubic-bezier(0.34, 1.18, 0.64, 1), opacity 0.45s var(--ease-soft); }
  .hm-stage.s-phone .hm-phone { display: block; opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  .hm-stage.s-phone .laptop { display: block; transform: translate3d(-56px, 0, 0) scale(0.94); opacity: 0; filter: none; }
  .hm-stage.s-return .hm-phone { display: block; opacity: 0; transform: translate3d(calc(-50% + 56px), 20px, 0) scale(0.94); transition: transform 0.6s var(--ease-soft), opacity 0.4s var(--ease-soft); }
  .hm-stage.s-return .laptop { display: block; transform: none; opacity: 1; }
  .hm-lock { display: none; }
  .hm-phone-cap { top: -26px; }
  .hm-stage.s-return .hm-phone-cap { opacity: 0; }
}
/* 机の上のスマホはラップトップより手前(zを下げるとラップトップの裏に隠れる) */
@media (min-width: 768px) {
  .hm-phone { transform: translate3d(18%, 0, 0) rotateY(-16deg) scale(0.58); }
  .hm-stage.s-return .hm-phone { transform: translate3d(18%, 0, 0) rotateY(-16deg) scale(0.58); }
  .hm-stage.s-pc .laptop, .hm-stage.s-return .laptop { transform: translate3d(-5%, 0, 0) scale(0.97); }
}
@media (min-width: 768px) {
  .hm-phone, .hm-stage.s-return .hm-phone { transform: translate3d(10%, 0, 30px) rotateY(-16deg) scale(0.58); }
  .hm-stage.s-pc .laptop, .hm-stage.s-return .laptop { transform: translate3d(-7%, 0, 0) scale(0.96); }
}

/* 机の上のスマホ: ロック画面はやめ、白いトーク画面のまま置く。台の角に重ね、ラップトップに影を落として境界を立てる */
.hm-lock { display: none; }
@media (min-width: 768px) {
  .hm-phone, .hm-stage.s-return .hm-phone { transform: translate3d(12%, 7%, 30px) rotateY(-14deg) scale(0.56); }
  .hm-phone .phone { transition: box-shadow 0.9s var(--ease-soft); }
  .hm-stage.s-pc .hm-phone .phone, .hm-stage.s-return .hm-phone .phone {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.3),
      inset 0 0 0 2px rgba(0, 0, 0, 0.55),
      inset 0 0 0 3.5px #0B0A09,
      -18px 22px 30px -10px rgba(26, 24, 21, 0.5),
      -4px 6px 10px -4px rgba(26, 24, 21, 0.35);
  }
  .hm-stage.s-pc .hm-phone .chat, .hm-stage.s-return .hm-phone .chat { background: #F2F0EA; }
}
@media (min-width: 768px) { .hm-steps { margin-top: 46px; } }

/* 机の上のスマホ: 底を台の線に揃え、影は真下に、傾きは浅く */
@media (min-width: 768px) {
  .hm-phone { bottom: 0; transform-origin: 50% 100%; }
  .hm-phone, .hm-stage.s-return .hm-phone { transform: translate3d(14%, 0, 30px) rotateY(-6deg) scale(0.56); }
  .hm-stage.s-phone .hm-phone { transform: translate3d(0, -10px, 0) rotateY(0deg) scale(1); }
  .hm-stage.s-pc .hm-phone .phone, .hm-stage.s-return .hm-phone .phone {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.3),
      inset 0 0 0 2px rgba(0, 0, 0, 0.55),
      inset 0 0 0 3.5px #0B0A09,
      0 22px 30px -14px rgba(26, 24, 21, 0.55),
      0 6px 10px -6px rgba(26, 24, 21, 0.35);
  }
  .hm-phone::after { bottom: -14px; height: 30px; left: 8%; right: 8%; }
}

/* 商品カード: 模様の写真枠をやめ、墨の線画(ニット)を和紙の上に置く */
.hm-pic { background: #F7F4EE; border: 1px solid #E3DFD4; align-items: center; justify-content: flex-start; gap: 10px; padding: 6px 10px; height: 56px; }
.hm-pic::before, .hm-pic::after { display: none; }
.hm-pic svg { flex: none; width: 40px; height: 40px; }
.hm-pic b { font-weight: 400; font-size: 10px; line-height: 1.5; color: #1A1815; letter-spacing: 0.04em; }
.hm-phone.has-pic .hm-pic { height: 54px; }
.hm-pic b { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.hm-pic b small { font-size: 9.5px; color: #55534C; letter-spacing: 0.04em; }

/* ============================================================
   業種の入口: 案A(編集の行) / 案B(一文字のカード)
   ============================================================ */
/* 共通: 場面 = ensōの記録 → 墨の線 → お客様のLINEの吹き出し */
.ind-scene { display: flex; flex-direction: column; gap: 0; }
.ind-rec { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; background: #FFFFFF; border: 1px solid #E3DFD4; border-radius: 6px; font-size: 11px; line-height: 1.5; color: #1A1815; }
.ind-rec span { flex: none; font-size: 9px; letter-spacing: 0.14em; color: #8B887F; }
.ind-rec b { font-weight: 500; }
.ind-rec em { font-style: normal; margin-left: auto; color: #FB8446; font-size: 10px; white-space: nowrap; }
.ind-ink { width: 24px; height: 22px; margin: -1px 0 -1px 22px; }
.ind-ink path { fill: none; stroke: #1A1815; stroke-width: 1.6; stroke-linecap: round; }
.ind-bub2 { position: relative; align-self: flex-start; max-width: 92%; padding: 8px 11px; background: #FFFFFF; border: 1px solid #E3DFD4; border-radius: 12px 12px 12px 3px; font-size: 11px; line-height: 1.6; color: #1A1815; }
.ind-bub2 i { display: block; font-style: normal; font-size: 9px; letter-spacing: 0.14em; color: #06C755; margin-bottom: 1px; }

/* 案A: 編集の行 */
.indr-list { border-top: 1px solid #1A1815; }
.indr { display: grid; grid-template-columns: 56px 1fr 40px; gap: 14px 20px; align-items: center; padding: 26px 0; border-bottom: 1px solid #E3DFD4; color: #1A1815; transition: background 0.35s var(--ease-soft); }
.indr .ind-n { font-size: 14px; letter-spacing: 0.1em; color: #8B887F; transition: color 0.3s var(--ease-soft); }
.indr h3 { margin: 0; }
.indr p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.9; color: #55534C; }
.indr .ind-scene { grid-column: 2; }
.indr .ind-arrow { grid-column: 3; grid-row: 1; width: 40px; height: 40px; border: 1px solid #DAD6CC; border-radius: 50%; display: grid; place-items: center; transition: background 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft); }
.indr .ind-arrow::after { content: ''; width: 7px; height: 7px; border-top: 1px solid #1A1815; border-right: 1px solid #1A1815; transform: rotate(45deg) translate(-1px, 1px); transition: transform 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft); }
.indr:hover .ind-n { color: #1A1815; }
.indr:hover .ind-arrow { background: #1A1815; border-color: #1A1815; }
.indr:hover .ind-arrow::after { border-color: #F7F4EE; transform: rotate(45deg) translate(1px, -1px); }
@media (min-width: 768px) {
  .indr { grid-template-columns: 64px minmax(0, 1fr) 340px 44px; padding: 30px 0; }
  .indr .ind-scene { grid-column: 3; grid-row: 1; }
  .indr .ind-arrow { grid-column: 4; }
}

/* 案B: 一文字のカード */
.ind2-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .ind2-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ind2-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.ind2 { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 22px 22px; overflow: hidden;
  background: #FBFAF6; border: 1px solid #E3DFD4; border-radius: 12px; color: #1A1815;
  transition: transform 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft), background 0.45s var(--ease-soft); }
.ind2::before { /* 業種の一文字: 墨を薄く */
  content: attr(data-kanji); position: absolute; right: -6px; top: -22px; font-family: 'Shippori Mincho', serif; font-size: 128px; line-height: 1; color: #1A1815; opacity: 0.05; pointer-events: none;
  transition: opacity 0.45s var(--ease-soft), transform 0.6s var(--ease-soft); }
.ind2:hover { transform: translateY(-5px); background: #FFFFFF; border-color: #1A1815; box-shadow: 0 30px 44px -34px rgba(26, 24, 21, 0.5); }
.ind2:hover::before { opacity: 0.09; transform: translate(-4px, 4px); }
.ind2 .ind-n { font-size: 13px; letter-spacing: 0.1em; color: #8B887F; }
.ind2 h3 { margin: 0; }
.ind2 > p { margin: 0; font-size: 13.5px; line-height: 1.9; color: #55534C; min-height: 3.6em; }
.ind2 .ind-scene { margin-top: 14px; }
.ind2 .ind-bub2 { transform: translateY(4px); opacity: 0.85; transition: transform 0.45s var(--ease-soft), opacity 0.45s var(--ease-soft); }
.ind2:hover .ind-bub2 { transform: none; opacity: 1; }
.ind2 .ind-go { margin-top: auto; padding-top: 18px; font-size: 12px; letter-spacing: 0.1em; }
/* 案A採用: モバイルは 番号+見出し / 場面 / 矢印は見出しの右 */
@media (max-width: 767px) {
  .indr { grid-template-columns: 40px 1fr 36px; gap: 12px 14px; padding: 22px 0; }
  .indr .ind-arrow { width: 36px; height: 36px; }
  .indr .ind-scene { grid-column: 1 / -1; }
  .ind-rec em { display: none; }
}

/* ============================================================
   業種の入口(採用: 一文字が主役の 2×2)
   墨の一文字 + 業種名 + 一文。ホバーで一文字が少し寄り、朱の印が押される
   ============================================================ */
.ind-k-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid #1A1815; }
.ind-k { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; padding: 26px 0; border-bottom: 1px solid #E3DFD4; color: #1A1815; overflow: hidden; }
.ind-k-char { position: relative; display: inline-block; font-size: 84px; line-height: 1; letter-spacing: 0; color: #1A1815; transition: transform 0.6s var(--ease-soft); }
.ind-k-char i { position: absolute; right: -10px; top: 2px; width: 13px; height: 13px; border-radius: 2.5px; background: #FB8446; transform: rotate(8deg) scale(0.6); opacity: 0; transition: opacity 0.3s var(--ease-soft), transform 0.35s var(--ease-soft); }
.ind-k-body { min-width: 0; }
.ind-k-body .ind-n { font-size: 13px; letter-spacing: 0.1em; color: #8B887F; }
.ind-k-body h3 { margin: 4px 0 0; }
.ind-k-body p { margin: 6px 0 0; font-size: 14px; line-height: 1.9; color: #55534C; }
.ind-k-go { display: inline-block; margin-top: 12px; padding-bottom: 2px; font-size: 12px; letter-spacing: 0.12em; border-bottom: 1px solid #1A1815; transition: transform 0.4s var(--ease-soft); }
.ind-k-go::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-top: 1px solid #1A1815; border-right: 1px solid #1A1815; transform: rotate(45deg) translateY(-1px); }
.ind-k:hover .ind-k-char { transform: translateX(-3px); }
.ind-k:hover .ind-k-char i { opacity: 1; transform: rotate(8deg) scale(1); }
.ind-k:hover .ind-k-go { transform: translateX(4px); }
@media (min-width: 768px) {
  .ind-k-grid { grid-template-columns: 1fr 1fr; border-left: 1px solid #E3DFD4; }
  .ind-k { grid-template-columns: 150px 1fr; gap: 22px; min-height: 216px; padding: 36px 32px; border-right: 1px solid #E3DFD4; }
  .ind-k-char { font-size: 132px; }
  .ind-k-char i { right: -12px; top: 6px; width: 16px; height: 16px; }
  .ind-k-body p { margin-top: 8px; }
  .ind-k-go { margin-top: 14px; }
}

/* 並びの変更: 4列の縦積み(一文字が上、文字が下)。導入の流れの3列と同じリズム */
@media (min-width: 768px) {
  .ind-k-grid { grid-template-columns: repeat(4, 1fr); border-left: 0; border-top: 1px solid #1A1815; }
  .ind-k { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; padding: 34px 26px 32px 0; margin-right: 26px; border-right: 1px solid #E3DFD4; border-bottom: 0; }
  .ind-k:last-child { border-right: 0; margin-right: 0; }
  .ind-k-char { font-size: 108px; margin: 0 0 22px 2px; }
  .ind-k-char i { right: -14px; top: 4px; width: 15px; height: 15px; }
  .ind-k-body h3 { font-size: 21px; }
  .ind-k-body p { margin-top: 8px; min-height: 3.8em; }
  .ind-k-go { margin-top: 12px; }
  .ind-k:hover .ind-k-char { transform: translateY(-3px); }
}
@media (min-width: 1024px) { .ind-k-char { font-size: 124px; } }
.ind-k-go { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1023px) { .ind-k-go { font-size: 11px; letter-spacing: 0.05em; } .ind-k-go::after { margin-left: 6px; } }
/* 二文字に: 美容 ・ 診療 ・ 装い ・ 商い。列に収まる大きさ */
.ind-k-char { letter-spacing: 0.02em; white-space: nowrap; }
@media (max-width: 767px) { .ind-k-char { font-size: 56px; } .ind-k { grid-template-columns: 126px 1fr; } }
@media (min-width: 768px) { .ind-k-char { font-size: 66px; } }
@media (min-width: 1024px) { .ind-k-char { font-size: 88px; } }
@media (min-width: 1280px) { .ind-k-char { font-size: 96px; } }

/* 業種ページ末尾「ほかの業種で見る」: 小さめの4列。今のページは薄く、リンク文言を「このページ」に */
.ind-k-mini { border-top-color: #E3DFD4; }
.ind-k-mini .ind-k { padding-top: 26px; padding-bottom: 24px; }
.ind-k-mini .ind-k-char { font-size: 44px; margin-bottom: 14px; }
@media (min-width: 768px) { .ind-k-mini .ind-k-char { font-size: 52px; } }
@media (min-width: 1024px) { .ind-k-mini .ind-k-char { font-size: 60px; } }
.ind-k-mini .ind-k-body p { display: none; }
.ind-k-mini .ind-k-go { margin-top: 10px; }
.ind-k-now { display: none; margin-top: 10px; font-size: 11px; letter-spacing: 0.14em; color: #8B887F; }
.ind-k.is-now { pointer-events: none; }
.ind-k.is-now .ind-k-char, .ind-k.is-now h3 { opacity: 0.35; }
.ind-k.is-now .ind-k-go { display: none; }
.ind-k.is-now .ind-k-now { display: inline-block; }
@media (max-width: 767px) { .ind-k-mini .ind-k { grid-template-columns: 100px 1fr; padding: 18px 0; } }

/* ============================================================
   業種の入口 L2: 絵(枠なし) → 差し色の二文字 → 番号・業種名・一文・リンク
   PC 4列 / タブレット 2×2 / モバイル 1列(絵が左)
   ============================================================ */
.ind-k.has-art .ind-k-char { color: var(--c, #1A1815); }
.ind-k-art { display: grid; place-items: center; overflow: hidden; }
/* 生成した絵: 紙の色を飛ばして線だけ残し、和紙に乗算でなじませる */
.ind-k-art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); filter: grayscale(1) brightness(1.13) contrast(1.35); mix-blend-mode: multiply; transition: transform 0.7s var(--ease-soft); }
.ind-k-art .ind-k-tmp { width: 62%; height: auto; opacity: 0.85; transition: transform 0.7s var(--ease-soft); }
.ind-k.has-art:hover .ind-k-art img { transform: scale(1.24); }
.ind-k.has-art:hover .ind-k-art .ind-k-tmp { transform: scale(1.05); }
@media (max-width: 767px) {
  .ind-k.has-art { grid-template-columns: 104px 1fr; grid-template-rows: auto auto; gap: 2px 18px; align-items: start; padding: 22px 0; }
  .ind-k.has-art .ind-k-art { grid-row: 1 / span 2; aspect-ratio: 1 / 1; align-self: center; }
  .ind-k.has-art .ind-k-char { font-size: 34px; margin: 2px 0 6px; }
  .ind-k.has-art .ind-k-body h3 { font-size: 19px; }
}
@media (min-width: 768px) {
  .ind-k.has-art .ind-k-art { width: 100%; aspect-ratio: 1 / 0.8; margin-bottom: 6px; }
  .ind-k.has-art .ind-k-char { font-size: 44px; margin: 0 0 14px; }
  .ind-k.has-art:hover .ind-k-char { transform: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ind-k-grid { grid-template-columns: 1fr 1fr; }
  .ind-k.has-art { border-bottom: 1px solid #E3DFD4; }
  .ind-k.has-art:nth-child(2n) { border-right: 0; margin-right: 0; }
  .ind-k.has-art .ind-k-art { aspect-ratio: 1 / 0.62; }
  .ind-k.has-art .ind-k-art img { object-fit: contain; transform: none; }
  .ind-k-go { font-size: 12px; letter-spacing: 0.12em; }
}
@media (min-width: 1280px) { .ind-k.has-art .ind-k-char { font-size: 46px; } }
/* L2 調整: 絵の高さを固定して4列の二文字の位置を揃える。絵は切らずに収める */
.ind-k-art img { object-fit: contain; transform: scale(1.22); }
.ind-k.has-art:hover .ind-k-art img { transform: scale(1.28); }
@media (min-width: 768px) {
  .ind-k.has-art .ind-k-art { aspect-ratio: auto; height: 176px; }
  .ind-k-art .ind-k-tmp { width: auto; height: 58%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ind-k.has-art .ind-k-art { aspect-ratio: auto; height: 190px; }
  .ind-k.has-art .ind-k-art img { transform: scale(1.22); }
}
/* 乗算の相手を絵の直下に置く: 出現アニメーションの区画(重なりの文脈)の中でも、紙の色が確実に混ざるように */
.ind-k-art { background: #F7F4EE; isolation: isolate; }
/* 4枚の線画: 枠の中に収め(拡大しない)、細い線が薄く見えないようコントラストを上げる */
.ind-k-art img { transform: none; filter: grayscale(1) brightness(1.1) contrast(2.3); }
.ind-k.has-art:hover .ind-k-art img { transform: scale(1.05); }
@media (min-width: 768px) { .ind-k.has-art .ind-k-art { height: 184px; } }
@media (min-width: 768px) and (max-width: 1023px) { .ind-k.has-art .ind-k-art img { transform: none; } }
@media (max-width: 767px) { .ind-k.has-art .ind-k-art img { transform: scale(1.12); } }
/* 線画は下ごしらえ済み(白地に墨の線)。表示側は乗算だけで和紙になじませる */
.ind-k-art img { filter: none; }
/* 絵は枠の高さに合わせる(横幅基準だと枠より大きくなり、縦長の絵が下で切れていた) */
.ind-k-art img { width: auto; height: 100%; max-width: 100%; }
@media (min-width: 768px) { .ind-k.has-art .ind-k-art { height: 200px; } }
@media (min-width: 768px) and (max-width: 1023px) { .ind-k.has-art .ind-k-art { height: 210px; } }
@media (max-width: 767px) { .ind-k.has-art .ind-k-art img { transform: none; } }

/* 二文字(美容・診療・装い・商い)は外す: 絵が業種を語るので、絵 → 番号 → 業種名 → 一文 → リンク に。
   差し色は番号に残し、業種ページの色とつなぐ */
.ind-k.has-art .ind-k-char { display: none; }
.ind-k.has-art .ind-k-body .ind-n { color: var(--c, #8B887F); }
@media (min-width: 768px) { .ind-k.has-art .ind-k-art { margin-bottom: 18px; } .ind-k.has-art .ind-k-body h3 { font-size: 22px; } }
@media (max-width: 767px) { .ind-k.has-art { grid-template-rows: auto; align-items: center; } .ind-k.has-art .ind-k-art { grid-row: auto; } }
/* 上の線も薄い罫線に揃える(絵が主役になったので、濃い横線は外す) */
.ind-k-grid { border-top-color: #E3DFD4; }

/* 業種ページ末尾「ほかの業種で見る」: メインと同じ絵を小さく。番号・業種名・リンクだけ。いまのページは薄く */
.ind-k-mini .ind-k.has-art { padding-top: 22px; padding-bottom: 22px; }
.ind-k-mini .ind-k.has-art .ind-k-body .ind-n { color: var(--c, #8B887F); }
.ind-k-mini .ind-k.is-now .ind-k-art { opacity: 0.32; }
.ind-k-mini .ind-k.is-now .ind-k-body .ind-n { color: #8B887F; }
@media (min-width: 768px) {
  .ind-k-mini .ind-k.has-art .ind-k-art { height: 104px; margin-bottom: 12px; justify-items: start; }
  .ind-k-mini .ind-k.has-art .ind-k-body h3 { font-size: 18px; }
}
@media (min-width: 768px) and (max-width: 1023px) { .ind-k-mini .ind-k.has-art .ind-k-art { height: 120px; } }
@media (max-width: 767px) {
  .ind-k-mini .ind-k.has-art { grid-template-columns: 76px 1fr; gap: 0 16px; padding: 16px 0; }
}

/* 絵の収め方を確実に: 枠を基準に絶対配置 + contain(%の高さはグリッドの中で効かず、横幅基準で大きくなっていた)。
   乗算の相手の色は、業種ページの紙の色(--paper)に合わせる */
.ind-k-art { position: relative; background: var(--paper, #F7F4EE); }
.ind-k-art img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; }
@media (min-width: 768px) { .ind-k.has-art .ind-k-art { height: 212px; } }
@media (min-width: 768px) { .ind-k-mini .ind-k.has-art .ind-k-art { height: 104px; } .ind-k-mini .ind-k-art img { object-position: left center; } }
@media (min-width: 768px) and (max-width: 1023px) { .ind-k-mini .ind-k.has-art .ind-k-art { height: 120px; } }
/* いまのページの絵は、枠ごとではなく絵だけを薄くする(枠ごと薄くすると四角がうっすら見える) */
.ind-k-mini .ind-k.is-now .ind-k-art { opacity: 1; }
.ind-k-mini .ind-k.is-now .ind-k-art img { opacity: 0.3; }
/* 差し色は外す: 番号は全業種で同じ灰に(色は墨と和紙、朱=記録、緑=LINE だけ) */
.ind-k.has-art .ind-k-body .ind-n, .ind-k-mini .ind-k.has-art .ind-k-body .ind-n { color: #8B887F; }
/* 業種カード: 本文の行数が違っても「ページへ」の高さを揃える(リンクを下端に寄せる) */
@media (min-width: 1024px) {
  .ind-k-grid:not(.ind-k-mini) .ind-k-body { display: flex; flex-direction: column; flex: 1; width: 100%; }
  .ind-k-grid:not(.ind-k-mini) .ind-k-body p { flex: 1; min-height: 3.8em; }
  .ind-k-grid:not(.ind-k-mini) .ind-k-go { margin-top: 14px; align-self: flex-start; }
}
.ind-k-grid:not(.ind-k-mini) .ind-k-body p { text-wrap: balance; word-break: auto-phrase; }
@media (min-width: 1024px) and (max-width: 1279px) { .ind-k-grid:not(.ind-k-mini) .ind-k.has-art .ind-k-body h3 { font-size: 19px; letter-spacing: 0.02em; white-space: nowrap; } }
@media (max-width: 1023px) { .ind-k-grid:not(.ind-k-mini) .ind-k-body p { min-height: 3.8em; } }