@charset "UTF-8";
/* 無料モニターの特設頁（/monitor/・2026-10-19）。この頁だけが読む（style.css は変えない＝ほかの頁はそのまま）。
   2026-10-20 LINE 風（白い地・緑）。緑は、判・残りの枠・条件の項目名・見本の種類の字だけ（前の要所の柿色と同じ場所）。
   文章・押すところ・流れの図・頁の終わりの帯は、顧客起点の頁の部品（.ctext・.go__link・.csteps・data-closing）をそのまま使う。
   色・罫・角丸の基は style.css の変数（--paper --ink --ink-soft --line --line-strong --green --accent --mark --sans --r --c-sheet --c-wide --c-wider）。 */

/* 屋号 nishi-web はハイフンの後ろで折らない（src/monitor_page.py の brand_nobr が囲む） */
[data-monitor-page] .nobr { white-space: nowrap; }

/* 一番上は触れる見本から始まるので、見出しだけの頁のような大きな上の余白は取らない */
[data-monitor-page] .section.mtop { padding-top: clamp(1.2rem, 3vw, 2rem); }

/* ---------- 触れる見本 2 枚（2026-10-20）----------
   電話の画面の形（390×844）の絵を横に 2 枚。電話の幅でも 2 列。パソコンでは大きく、ただし絵の高さは画面の 68% ほどまで
   （2 枚の幅 ＝ 1 枚の幅 × 2 ＋ すき間。1 枚の幅 ＝ 68svh × 390 / 844 ≒ 31.4svh）。文章の柱より広く --c-wide まで */
.mtouch {
  --mt-gap: clamp(.8rem, 3.4vw, 2.2rem);
  --mt-w: min(var(--c-wide), 62.8vh + var(--mt-gap));
  list-style: none;
  width: var(--mt-w);
  margin: 0 0 clamp(1.8rem, 5vw, 2.6rem);
  margin-inline: calc(50% - var(--mt-w) / 2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mt-gap);
  align-items: stretch;
}
@supports (height: 1svh) {
  .mtouch { --mt-w: min(var(--c-wide), 62.8svh + var(--mt-gap)); }
}
.mtouch__item { min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.mtouch__item p { margin: 0; }
.mtouch__shot { cursor: pointer; overflow: hidden; aspect-ratio: 390 / 844; background: #0b0b0b; border: 1px solid var(--line-strong); border-radius: calc(var(--r) * 2); }
.mtouch__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mtouch__name { margin-top: .3rem; font-family: var(--sans); font-weight: 700; font-size: clamp(1rem, 3.6vw, 1.15rem); line-height: 1.5; letter-spacing: .03em; }
.mtouch__body { font-size: clamp(.8rem, 3.3vw, .92rem); line-height: 1.75; }
/* 説明の行数が 2 枚で違っても、ボタンの高さをそろえる（ボタンを枚の下端に寄せる）。
   緑の地に白い字なので、字は太字 1.17rem（18.7px）のまま小さくしない（2026-10-20 LINE 風の読みやすさの決まり）。
   電話の幅では 2 枚が並ぶので、字間と左右の余白を詰めて 1 行に収める */
.mtouch .mtouch__go { align-items: stretch; margin-top: auto; padding-top: .25rem; }
.mtouch .mtouch__open {
  width: 100%;
  gap: .3em;
  padding-inline: .4em;
  letter-spacing: 0;
  white-space: nowrap;
}

/* 全画面の枠（dialog）。上の帯に名前と「閉じる」（44px 以上）、その下を見本のサイトの枠が埋める。
   開いている間は後ろの頁をスクロールさせない（monitor.js が html に is-frame-open を付ける） */
html.is-frame-open, html.is-frame-open body { overflow: hidden; }
.mframe {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  color: #ffffff;
  background: #0b0b0b;
}
@supports (height: 100dvh) {
  .mframe { height: 100dvh; }
}
.mframe[open] { display: flex; flex-direction: column; }
.mframe::backdrop { background: rgba(11, 11, 11, .92); }
.mframe__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.4rem;
  padding: max(.3rem, env(safe-area-inset-top)) max(.5rem, env(safe-area-inset-right)) .3rem max(1rem, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.mframe .mframe__name { margin: 0; font-family: var(--sans); font-weight: 700; font-size: 1rem; letter-spacing: .04em; }
.mframe__close {
  min-width: 5.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  color: #0b0b0b;
  background: #ffffff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.mframe__close:hover, .mframe__close:focus-visible { background: var(--paper-sub); outline: 2px solid var(--green); outline-offset: 2px; }
.mframe__stage { position: relative; flex: 1 1 auto; min-height: 0; }
.mframe__frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #0b0b0b; }
/* 開いた直後の案内。指の操作は下の枠へ通す（pointer-events: none） */
.mframe .mframe__hint {
  position: absolute;
  left: 50%;
  bottom: 16%;
  z-index: 1;
  margin: 0;
  padding: .7em 1.2em;
  font-size: .95rem;
  line-height: 1.6;
  letter-spacing: .04em;
  white-space: nowrap;
  color: #fff;
  background: rgba(11, 11, 11, .78);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  transform: translateX(-50%);
  pointer-events: none;
  animation: mframe-hint 2s ease both;
}
.mframe__hint[hidden] { display: none; }
@keyframes mframe-hint {
  0% { opacity: 0; }
  12%, 82% { opacity: 1; }
  100% { opacity: 0; }
}

/* 判と見出し。見出しは読点の後ろでだけ折り返す（.phrase は style.css）。
   判は緑の地の丸い札。字が小さい（.92rem）ので、地はボタンの緑（白い字で 3.15:1）ではなく字の緑 --accent（白い字で 5.1:1） */
.ctext .mstamp {
  display: inline-block;
  margin: 0 0 .9em;
  padding: .22em 1em .28em;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.6;
  letter-spacing: .1em;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
}
.mhead h1 { font-size: clamp(1.4rem, 5.6vw, 2.4rem); line-height: 1.5; letter-spacing: .04em; margin-bottom: .7em; }

/* 残りの枠。数字は太字で大きく緑の字、10 の丸は緑の輪。埋まった枠だけ塗る */
.mseats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .55rem 1.2rem;
  padding: 1rem 1.15rem 1.05rem;
  background: var(--c-sheet);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--green);
  border-radius: var(--r);
}
.mseats p { margin: 0; }
.mseats__label { grid-column: 1 / -1; font-size: .82rem; letter-spacing: .14em; color: var(--ink-soft); }
.mseats__count { font-family: var(--sans); line-height: 1; white-space: nowrap; }
.mseats__count b { font-weight: 700; font-size: clamp(2.6rem, 8vw, 3.3rem); color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.mseats__unit { margin-left: .15em; font-size: 1.1rem; }
.mseats__of { display: block; margin-top: .5rem; font-family: var(--sans); font-size: .8rem; letter-spacing: .06em; color: var(--ink-soft); }
.mseats__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1.75rem)); gap: .35rem; }
.mseat { aspect-ratio: 1; border: 2px solid var(--green); border-radius: 50%; }
.mseat--taken { background: var(--green); }
.mseats__note { grid-column: 1 / -1; font-size: .84rem; line-height: 1.75; color: var(--ink-soft); }

/* モニターの条件。項目名と中身を罫で区切る。広い画面は 2 列 */
.mterms { margin: 0; border-top: 1px solid var(--line-strong); }
.mterms__row { padding: .95em 0; border-bottom: 1px solid var(--line); }
.mterms__name { margin: 0 0 .3em; font-family: var(--sans); font-weight: 700; font-size: .95rem; letter-spacing: .04em; color: var(--accent); }
.mterms__body { margin: 0; line-height: 1.8; }
@media (min-width: 720px) {
  .mterms__row { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 1.4em; }
  .mterms__name { margin: 0; }
}

/* 動く見本 3 つ（2026-10-20）。谷川SEOサービスはトップと同じ埋め込みの枠（motion-demo.css の .mdemo）で 1 段ぶち抜き。
   歯科と鍼灸の動画は、広い画面は横に 2 つ、狭い画面は縦に積む */
.msamples {
  list-style: none;
  width: var(--c-wider);
  margin: 0;
  margin-inline: calc(50% - var(--c-wider) / 2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 2.8rem) clamp(1.2rem, 2.6vw, 1.8rem);
  align-items: start;
}
.msample { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.msample--wide { grid-column: 1 / -1; }
.msample p { margin: 0; }
.msample__media { overflow: hidden; aspect-ratio: 16 / 9; background: #0b0b0b; border: 1px solid var(--line-strong); border-radius: var(--r); }
.msample__media img, .msample__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.msample .msample__kind { margin-top: .35rem; font-size: .78rem; letter-spacing: .12em; color: var(--accent); }
.msample__name { margin: 0; font-family: var(--sans); font-weight: 700; font-size: 1.15rem; line-height: 1.5; letter-spacing: .03em; }
.msample__body { font-size: .92rem; line-height: 1.85; }
.msample__body strong { font-weight: 700; background: linear-gradient(transparent 58%, var(--mark) 58%); }
.msample .go { margin-top: .3rem; }
@media (max-width: 900px) {
  .msamples { width: var(--c-wide); margin-inline: calc(50% - var(--c-wide) / 2); grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
}

/* 応募の下の 1 行と、ホームページ制作の頁への道（2026-10-20）。締め切った後は、応募のボタンの代わりにここだけが残る */
.mafter { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.mafter p { margin: 0; }
.mafter .mafter__line { font-size: .94rem; line-height: 1.8; }
[data-monitor-closed] .mafter { margin-top: 0; padding-top: 0; border-top: 0; }

/* 月額の 1 行と料金の頁への道。モニターの条件とは別の紙に置く */
.mmonthly {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.2rem;
  padding: 1rem 1.15rem;
  background: var(--c-sheet);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.mmonthly p { margin: 0; }
.mmonthly .mmonthly__line { flex: 1 1 16em; font-size: .94rem; line-height: 1.8; }

/* 応募のボタン。LINE → メール → 電話の順に縦に積む。色はサイトの相談の枠と同じ（LINE の緑・フォームの青・電話の赤）。
   アドレスと番号は、白い字を小さく色の上に載せず、ボタンの下に墨で置く（読みやすさ） */
.mways { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; width: min(100%, 24rem); }
.mways__item { display: flex; flex-direction: column; gap: .35rem; }
.mway {
  --way: var(--ink);
  --way-edge: rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  margin-bottom: 3px;
  padding: .6rem 1rem;
  font-family: "Arial", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--way);
  border: 1px solid var(--way);
  border-radius: var(--r);
  box-shadow: 0 3px 0 var(--way-edge);
  transition: transform .12s ease, box-shadow .12s ease;
}
.mway:hover, .mway:focus-visible { color: #fff; transform: translateY(1px); box-shadow: 0 2px 0 var(--way-edge); }
.mway:active { transform: translateY(3px); box-shadow: 0 0 0 var(--way-edge); }
.mway--line { --way: #00a83d; --way-edge: #008d33; }
.mway--mail { --way: #009de0; --way-edge: #007cb3; }
.mway--tel { --way: #fb5a4a; --way-edge: #d94335; }
.mways__sub { font-size: .86rem; line-height: 1.6; letter-spacing: .03em; text-align: center; color: var(--ink-soft); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .mway { transition: none; }
  .mframe .mframe__hint { animation: none; }
}

/* ---------- 頁の下のメニュー：YouTube だけ赤いボタン（2026-10-20 本人「YouTube のボタンだけ赤色にして」。ほかは文字のまま）----------
   この頁だけ。フッターの HTML は全頁共通の base.html.j2 のままで、href で見分ける（ほかの頁は変わらない）。
   白い再生の三角は /monitor/icons/youtube.svg を mask にして白で塗る。白字×赤 #e00000 は 5.0:1 */
.page--monitor .footer__nav { align-items: center; }
.page--monitor .footer__nav a[href*="youtube"] {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .9rem .35rem .75rem;
  font-weight: 600;
  color: #fff;
  background: #e00000;
  border: 0;
  border-radius: 999px;
}
.page--monitor .footer__nav a[href*="youtube"]::before {
  content: "";
  flex: none;
  width: .95rem;
  height: .95rem;
  background: currentColor;
  -webkit-mask: url(/monitor/icons/youtube.svg) center / contain no-repeat;
  mask: url(/monitor/icons/youtube.svg) center / contain no-repeat;
}
.page--monitor .footer__nav a[href*="youtube"]:hover,
.page--monitor .footer__nav a[href*="youtube"]:focus-visible { color: #fff; background: #b80000; }