/* ヒメテルの販売ページ（/himetel/）。見た目は本体 panhouse.jp（手島さんのデザイン）に揃える＝本体の /assets/style.css を先に読み、色・書体・角丸・影・ボタン・ヘッダー・足もとは本体の物を使う。
   このファイルは本体に無い部品だけを、本体の変数（--ink・--blue・--navy・--r-card・--shadow-card など）で書く。色や数値をここに写さない（本体を直せばこちらも揃う）。
   Imalog のページ（/imalog/assets/site.css）と同じ組み方。Imalog の赤の差し色は使わず、本体の青のまま。外部の読み込みなし。 */

.mt { font-feature-settings: "palt" 0; }
.mt h1, .mt h2, .mt h3, .mt p, .mt li, .mt summary { word-break: auto-phrase; line-break: strict; }
@supports not (word-break: auto-phrase) { .mt :is(h1, h2, h3, summary):has(wbr) { word-break: keep-all; overflow-wrap: anywhere; } }
.mt h1, .mt h2, .mt h3, .mt summary, .mt .btn-pill { font-feature-settings: "palt" 1; }
.mt .nw { white-space: nowrap; }
.mt main a:not(.btn-pill) { color: var(--blue); }
.mt main a:not(.btn-pill):hover { color: var(--blue-deep); text-decoration: underline; }

/* 冒頭（本体の .page-head の形＋青い帯） */
.mt-head { padding-bottom: clamp(32px, 4vw, 48px); }
.mt-fv { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 48px; margin: 34px -56px 0; padding: 56px; border-radius: var(--r-section); background: var(--blue); color: #fff; }
.mt-fv-copy, .mt-fv-fig { min-width: 0; }
.mt-fv-tagline { margin-bottom: 12px; font-size: 14px; line-height: 1.8; font-weight: 600; }
/* 名前はロゴ（紺地用＝青い地の上に置く版・字は輪郭にした SVG）。正本は docs/content/himetel.md のロゴの行 */
.mt-fv-brand img { display: block; width: clamp(240px, 26vw, 360px); height: auto; }
.mt-h1 { margin-top: 20px; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.5; font-weight: 700; color: #fff; text-wrap: balance; }
.mt-fv .lead { max-width: 760px; margin-top: 20px; font-size: 16px; line-height: 1.9; font-weight: 500; color: #fff; text-wrap: pretty; }

/* 冒頭の図: 御社の中の枠に 電話 → AI → 業務システム。外部のクラウドは枠の外 */
.mt-flow { padding: 26px 24px 22px; border-radius: var(--r-card); background: var(--surface); color: var(--ink); }
.mt-flow-in { padding: 18px 16px 16px; border: 2px solid var(--blue); border-radius: var(--r-card); }
.mt-flow-label { font-size: 13px; font-weight: 700; color: var(--blue); }
.mt-flow ol { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; margin-top: 12px; }
.mt-flow li { display: grid; place-items: center; padding: 14px 8px; border-radius: var(--r-card); background: var(--bg); font-size: 14px; line-height: 1.6; font-weight: 700; text-align: center; }
.mt-flow li.ai { background: var(--blue); color: #fff; }
.mt-flow li.arrow { padding: 0; background: transparent; color: var(--blue); font-size: 20px; }
.mt-flow li small { display: block; font-size: 12px; font-weight: 500; }
.mt-flow .outside { margin-top: 14px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: var(--r-card); font-size: 13px; line-height: 1.6; color: var(--ink-soft); text-align: center; }

.mt-toc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 32px -56px 0; }
.mt-toc-label { margin-right: 8px; font-family: var(--font-en); font-size: 13px; font-weight: 700; color: var(--ink); }
.mt main .mt-toc a { flex: 1 1 auto; padding: 8px 16px; border-radius: 999px; background: var(--blue); font-size: 13.5px; font-weight: 500; color: #fff; text-align: center; }
.mt main .mt-toc a:hover { background: var(--blue-deep); color: #fff; text-decoration: none; }

/* 節（地は本体の灰 --bg。1つおきに白い角丸の箱＝本体の .rounded-block の形） */
.mt-sec { padding: 104px 0; }
.mt-sec.is-white { background: var(--surface); border-radius: var(--r-section); margin: 0 var(--edge); }
.mt-sec .sec-sub { margin-top: 0; color: var(--blue); }
.mt-h2 { margin-top: 14px; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.45; font-weight: 700; color: var(--ink); }
.mt .para { max-width: 760px; margin-top: 28px; font-size: 16px; line-height: 2; color: var(--ink-soft); }
.mt-wide { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* 課題と技術: 課題 → 技術 の 1 行ずつ */
.mt-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.mt-pair { display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: var(--r-card); background: var(--bg); }
.mt-pair .pain { display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.7; font-weight: 600; color: var(--ink-soft); }
.mt-pair .pain .k, .mt-pair .tech .k { flex: none; padding: 0 10px; border-radius: 999px; font-size: 12px; line-height: 22px; font-weight: 700; }
.mt-pair .pain .k { background: var(--surface); color: var(--ink-soft); }
.mt-pair .tech .k { background: var(--blue); color: #fff; }
.mt-pair .tech { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mt-pair h3 { font-size: 20px; line-height: 1.55; font-weight: 700; color: var(--ink); }
.mt-pair p.body { margin-top: 10px; font-size: 15px; line-height: 1.85; color: var(--ink-soft); }

/* 動画（本体の青の枠＝静止画と見分ける） */
.mt-video-frame { max-width: 1156px; margin: 40px auto 0; padding: 10px; border-radius: var(--r-card); background: var(--blue); }
.mt-video-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 2px 4px 12px; color: #fff; }
.mt-video-label > span { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.mt-video-label svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.mt-video-label small { font-size: 12px; line-height: 1.6; }
.mt-video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: max(4px, calc(var(--r-card) - 6px)); background: #000; }
.mt .section-notes { margin-top: 16px; font-size: 12px; line-height: 1.8; color: var(--ink-soft); text-align: right; }

/* 導入の進め方: 3 段 */
.mt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; counter-reset: s; }
.mt-steps li { position: relative; padding: 30px 28px 28px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.mt-steps .n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--font-num); font-size: 15px; font-weight: 600; }
.mt-steps h3 { margin-top: 14px; font-size: 20px; line-height: 1.55; font-weight: 700; color: var(--ink); }
.mt-steps p { margin-top: 10px; font-size: 15px; line-height: 1.85; color: var(--ink-soft); }

/* データの扱い: 3 列 */
.mt-where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.mt-where > div { padding: 28px 26px; border: 2px solid transparent; border-radius: var(--r-card); background: var(--bg); }
.mt-where > .mine { background: var(--surface); border-color: var(--blue); }
.mt-where h3 { margin-bottom: 8px; font-size: 18px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.mt-where p { font-size: 15px; line-height: 1.85; color: var(--ink-soft); }
.mt-where p + p { margin-top: 8px; }

/* よくある質問（見た目は本体の .faq・PC では 2 列） */
.mt .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; max-width: none; margin-top: 36px; }
.mt .faq details { min-width: 0; margin-bottom: 0; }
.mt .faq summary { min-height: 96px; padding: 20px 18px; gap: 10px; align-items: center; }
.mt .faq summary .q, .mt .faq summary::after { flex: none; }
.mt .faq .a { padding: 0 18px 20px; overflow-wrap: anywhere; }

/* 相談の入口 */
.mt-cta-lead { margin-top: 56px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.6; color: var(--ink); text-align: center; }
.mt-cta-sub { margin-top: 8px; font-size: 15px; line-height: 1.8; color: var(--ink-soft); text-align: center; }
.mt-cta { display: flex; justify-content: center; margin-top: 20px; }
.mt #faq { padding-bottom: 72px; }
.mt .site-footer { margin-top: 24px; }

@media (max-width: 1400px) {
  .mt-fv { margin-inline: -40px; padding-inline: 40px; }
  .mt-toc { margin-inline: -40px; }
}
@media (max-width: 1000px) {
  .mt-fv { grid-template-columns: 1fr; gap: 32px; }
  .mt-pairs, .mt-steps, .mt-where { grid-template-columns: 1fr; gap: 12px; }
}
/* 767 幅以下（携帯・本体と同じ切れ目） */
@media (max-width: 767px) {
  .mt-fv { margin: 24px -12px 0; padding: 36px 16px; }
  .mt-h1 { font-size: 26px; }
  .mt-flow { padding: 16px 12px; }
  .mt-flow-in { padding: 14px 10px 12px; }
  .mt-flow ol { grid-template-columns: 1fr; gap: 4px; }
  .mt-flow li.arrow { transform: rotate(90deg); line-height: 1; }
  .mt-toc { gap: 6px; margin: 24px -12px 0; }
  .mt main .mt-toc a { padding: 7px 12px; font-size: 12.5px; }
  .mt-sec { padding: 72px 0; }
  .mt-wide { padding: 0 20px; }
  .mt-pair, .mt-steps li { padding: 22px 20px; }
  .mt-pair h3, .mt-steps h3 { font-size: 18px; }
  .mt-video-frame { margin-top: 28px; padding: 8px; }
  .mt .faq { grid-template-columns: 1fr; gap: 12px; }
  .mt .faq summary { min-height: 0; }
}