/* ラボル（taste で作り直した画面・inc/taste-page.php）。クラスはすべて rt- から始め、テーマの部品とぶつけない。
   見本：docs/design-mock/taste-raboru/mix/index.html（taste の検査 0 FAIL・自作の検査 fails 0）。
   Aの色（灰＋藍）と折り角の1枚／Bの1文と書体（Dela Gothic One＋BIZ UDPゴシック）／Cの目次と章ごとの色。 */
.rt {
  --bg: #eef0f3;
  --ink: #0b0c0e;
  --accent: #1f2de6;
  --accent-deep: #141d9c;
  --accent-ink: #ffffff;
  --c1: #ffffff;
  --c2: #dfe3ff;
  --c3: #e2e5ea;
  --c4: #0b0c0e;
  --c5: #1f2de6;
  --font-display: "Dela Gothic One", "BIZ UDPGothic", sans-serif;
  --font-text: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
  /* 文字は5段だけ */
  --s1: 16px;
  --s2: 20px;
  --s3: clamp(28px, 1.2rem + 1.6vw, 40px);
  --s4: clamp(34px, 0.4rem + 5.6vw, 96px);
  --s5: clamp(48px, 1.6rem + 5vw, 104px);
  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --ear: 28px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
.rt, .rt *, .rt *::before, .rt *::after { box-sizing: border-box; }
.rt { background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--s1); line-height: 1.7; }
.rt h1, .rt h2, .rt h3 { font-family: var(--font-display); font-weight: 400; margin: 0; padding: 0; border: 0; background: none; letter-spacing: -0.01em; color: inherit; }
.rt h1::before, .rt h1::after, .rt h2::before, .rt h2::after, .rt h3::before, .rt h3::after { content: none; }
.rt p, .rt figure, .rt ul, .rt ol { margin: 0; }
.rt img { display: block; max-width: 100%; height: auto; }
.rt a { color: inherit; }
.rt :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.rt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rt-sheet { clip-path: polygon(0 0, calc(100% - var(--ear)) 0, 100% var(--ear), 100% 100%, 0 100%); }
.rt-src { font-size: var(--s1); }
.rt-c1 { background: var(--c1); }
.rt-c2 { background: var(--c2); }
.rt-c3 { background: var(--c3); }
.rt-c4 { background: var(--c4); color: #fff; }
.rt-c5 { background: var(--c5); color: #fff; }

/* 広告のボタン：A8のテキスト素材（a と計測画像）と「広告」の印を、外側の枠で押せる形にする */
.rt .rt-cta { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rt .rt-cta a { display: inline-block; background: var(--accent); color: var(--accent-ink); padding: 18px 64px 18px 28px; font-weight: 700; font-size: var(--s2); text-decoration: none; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); transition: background-color .18s, transform .14s var(--ease); }
.rt .rt-cta a:hover { background: var(--accent-deep); }
.rt .rt-cta a:active { transform: translateY(2px); }
.rt .rt-cta img { width: 1px; height: 1px; }
.rt .rt-cta .ad-mark { color: inherit; font-size: var(--s1); background: none; border: 0; padding: 0; }
.rt-cta-note { display: block; margin-top: .75rem; }

/* 1画面目：左に1文、右に目次 */
.rt-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 0 var(--margin); min-height: min(860px, 88svh); }
.rt-hero__main { grid-column: 1 / 9; align-self: center; padding: 6vh 0 8vh; }
.rt .rt-line { font-family: var(--font-display); font-size: var(--s4); line-height: 1.3; }
.rt-ln { display: block; white-space: nowrap; }
.rt-slot { display: inline-block; width: 2.2em; height: .78em; vertical-align: -0.02em; overflow: hidden; margin: 0 .06em; }
.rt-slot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.rt-lead { font-size: var(--s2); line-height: 1.6; max-width: 32ch; margin: 2rem 0 !important; }
.rt-toc { grid-column: 9 / 13; align-self: stretch; display: grid; grid-template-rows: repeat(5, 1fr); margin-right: calc(var(--margin) * -1); }
.rt-toc a { display: flex; flex-direction: column; padding: 22px 24px; text-decoration: none; font-size: var(--s2); font-weight: 700; line-height: 1.45; transition: padding .18s var(--ease); }
.rt-toc a span { display: block; font-weight: 400; font-size: var(--s1); margin-top: .35rem; }
.rt-toc a:hover { padding-left: 32px; }
.rt .rt-toc a.rt-c1, .rt .rt-toc a.rt-c2, .rt .rt-toc a.rt-c3 { color: var(--ink); }
.rt .rt-toc a.rt-c4, .rt .rt-toc a.rt-c5 { color: #fff; }

/* 章 */
.rt-ch { padding: clamp(4.5rem, 9vw, 8rem) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; scroll-margin-top: 1rem; }
.rt-ch > h2 { grid-column: 1 / 10; font-size: var(--s3); line-height: 1.3; }

/* 役に立つ人・立たない人 */
.rt-fit { grid-column: 1 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.rt-fit > section { padding: 32px; }
.rt-yes { background: var(--c2); }
.rt-no { background: var(--c3); }
.rt .rt-fit h3 { font-family: var(--font-text); font-weight: 700; font-size: var(--s2); margin-bottom: 1.25rem; }
.rt-fit ul { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.rt-fit li { padding-left: 2.2em; position: relative; }
.rt-fit li::before { position: absolute; left: 0; top: -.1em; font-family: var(--font-display); font-size: var(--s2); }
.rt-yes li::before { content: "○"; color: var(--accent); }
.rt-no li::before { content: "×"; }
.rt-fit b { display: block; font-size: var(--s2); line-height: 1.5; margin-bottom: .25rem; }
.rt-urikake { grid-column: 1 / 8; }
.rt-urikake p { margin: 0 0 1rem; max-width: 40ch; }
.rt-urikake strong { font-size: var(--s2); }
.rt-photos { grid-column: 1 / 13; display: grid; grid-template-columns: 2fr 1fr; gap: var(--gutter); }
.rt-photos img { width: 100%; height: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.rt-photos img + img { aspect-ratio: auto; }

/* 計算：折り角の1枚。上の1割がラボルへ */
.rt-big { grid-column: 1 / 9; background: var(--accent); color: var(--accent-ink); --ear: clamp(56px, 7vw, 120px); }
.rt-cut { min-height: 84px; background: var(--accent-deep); padding: 22px clamp(24px, 4vw, 56px); padding-right: calc(var(--ear) + 20px); display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; font-size: var(--s2); }
.rt-cut b { font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-body { padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; gap: 1.5rem; }
.rt .rt-amount { width: 9ch; max-width: 100%; font: 400 var(--s3)/1.1 var(--font-display); color: var(--accent); background: var(--accent-ink); border: 0; border-radius: 0; padding: 10px 16px; margin: 0; font-variant-numeric: tabular-nums; box-shadow: none; }
.rt .rt-amount:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.rt-amount-unit { font: 400 var(--s3)/1.2 var(--font-display); margin-left: .25em; }
.rt-get b { display: block; font: 400 var(--s5)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.rt-get span { display: block; margin-top: .4rem; font-size: var(--s2); }
.rt-days { display: flex; gap: 8px; flex-wrap: wrap; border: 0; padding: 0; margin: 0; min-width: 0; }
.rt-days legend { padding: 0; margin-bottom: .5rem; font-size: var(--s1); color: inherit; }
.rt-days label { margin: 0; }
.rt-days input { position: absolute; opacity: 0; }
.rt-days span { display: inline-block; padding: 10px 20px; background: var(--accent-deep); cursor: pointer; }
.rt-days input:checked + span { background: var(--accent-ink); color: var(--accent); font-weight: 700; }
.rt-days input:focus-visible + span { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.rt-side { grid-column: 9 / 13; align-self: end; }
.rt-side p { margin: 0 0 1rem; }

/* 曜日：表 */
.rt .rt-table { grid-column: 1 / 9; border-collapse: collapse; width: 100%; font-size: var(--s2); background: none; margin: 0; border: 0; }
.rt .rt-table th, .rt .rt-table td { text-align: left; padding: 18px 16px 18px 0; vertical-align: top; border: 0; border-bottom: 1px solid rgba(11, 12, 14, .25); background: none; color: inherit; font-size: var(--s2); }
.rt .rt-table th { width: 34%; font-weight: 700; }
.rt-when-src { grid-column: 1 / 9; }
.rt-when-photo { grid-column: 9 / 13; grid-row: 2 / 4; }
.rt-when-photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; --ear: 36px; }

/* 取引先が払えなくなったら：黒い面 */
.rt-dark ul { grid-column: 1 / 8; list-style: none; padding: 0; display: grid; gap: 2rem; }
.rt-dark li b { display: block; font-size: var(--s2); margin-bottom: .35rem; }
.rt-dark li p { max-width: 42ch; }
.rt-dark figure { grid-column: 9 / 13; }
.rt-dark figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; --ear: 36px; }
.rt-risk-src { grid-column: 1 / 8; }

/* 最後：藍の面 */
.rt-last ol { grid-column: 1 / 8; padding-left: 1.4em; display: grid; gap: 1.25rem; font-size: var(--s2); }
.rt-last ol p { font-size: var(--s1); margin-top: .25rem; }
.rt-go { grid-column: 9 / 13; align-self: end; }
.rt .rt-last .rt-cta a { background: var(--accent-ink); color: var(--accent); }
.rt .rt-last .rt-cta a:hover { background: #dfe3ff; }

.rt-credits { padding: 2rem var(--margin); background: var(--ink); color: #fff; }
.rt-credits { max-width: none; }
.tp-ad-note { padding: 1.5rem var(--margin); background: var(--bg, #eef0f3); }

@media (max-width: 1000px) {
  .rt-hero { display: block; min-height: 0; padding: 0; }
  .rt-hero__main { padding: 6vh var(--margin) 3rem; }
  .rt-toc { margin: 0; grid-template-rows: none; }
  .rt-toc a { padding: 16px var(--margin); }
  .rt-ch > h2, .rt-fit, .rt-urikake, .rt-big, .rt-side, .rt .rt-table, .rt-when-src, .rt-when-photo, .rt-dark ul, .rt-dark figure, .rt-risk-src, .rt-last ol, .rt-go, .rt-photos { grid-column: 1 / 13; grid-row: auto; }
}
@media (max-width: 760px) {
  .rt .rt-line { font-size: clamp(30px, 9.6vw, 44px); }
  .rt-fit { grid-template-columns: 1fr; }
  .rt-fit > section { padding: 24px var(--margin); margin: 0 calc(var(--margin) * -1); }
  .rt-photos { grid-template-columns: 1fr; }
  .rt-big { margin: 0 calc(var(--margin) * -1); }
  .rt-cut, .rt-body { padding-left: var(--margin); padding-right: var(--margin); }
  .rt-cut { padding-right: calc(var(--ear) + 12px); }
  .rt .rt-table th, .rt .rt-table td { display: block; width: auto; padding: 0; border: 0; }
  .rt .rt-table td { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(11, 12, 14, .25); }
}

/* 動き（スクリプトが動いたときだけ少し下からずらして出す。動きを減らす設定では出しっぱなし）
   2026-10-28：透明にしてから出すのをやめた。読み込み直後の1〜4秒、1画面目が灰色の空白になり、
   節の背景も消えて後ろの暗い地色が見えていた（スマホで確認）。文字と背景は最初から見せ、位置だけ動かす。 */
@media (prefers-reduced-motion: no-preference) {
  .rt-js [data-rise] { transform: translateY(18px); animation: rt-rise .8s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .rt-js [data-reveal] { transform: translateY(24px); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .rt-js [data-reveal].is-in { transform: none; }
}
@keyframes rt-rise { to { transform: none; } }

/* サイトの頭の「広告を含みます」：仕事サイトの暗い頭で読めるように（記事の型では頭が白いので、この画面だけ） */
.tp-page .site-header__ad { color: #ffffff; border-color: rgba(255, 255, 255, .7); }
/* ラボルだけ：ページの地色を明るい灰に（お金のサービスで黒い地は不信感につながる・2026-10-28） */
body.tp-raboru { background: #eef0f3; }
/* テーマの main の上下の余白（40px）で、暗いページの地色が帯に見えていた */
.tp-page .l-main { padding-top: 0; padding-bottom: 0; }

/* 1画面目のボタンを A8 のバナーにするページ（ペイトナー・QuQuMo）。画像は素材のまま、上に「広告」の印と一文。
   押す場所が一目で分かるよう、アクセント色の太い枠で囲む（枠は 4px・影なし）。 */
.rt-banner .rt-banner__label { font-weight: 700; font-size: var(--s2); margin-bottom: 8px; }
.rt-banner .tool-banner { margin: 0; text-align: left; }
.rt-banner .tool-banner .ad-mark { display: block; margin-bottom: 8px; }
.rt-banner .tool-banner a { display: inline-block; background: none; padding: 0; clip-path: none; outline: 4px solid var(--accent); outline-offset: 0; transition: transform .14s var(--ease); }
.rt-banner .tool-banner a:hover { transform: translateY(-2px); }
.rt-banner .tool-banner img { display: block; width: auto; max-width: 100%; height: auto; }
.rt-last .rt-banner .tool-banner a { outline-color: #fff; }

/* 計算の下の広告（本人 10-19「最後だけでなく、押したくなる所にも」）。計算の箱の下に横いっぱい */
.rt-mid { grid-column: 1 / 13; }
.rt-src-name { text-decoration: none; }
/* 4列の比較表（QuQuMo の法人向け4社）。スマホでは横に流さず、文字を詰める */
.rt .rt-table--wide { grid-column: 1 / 13; font-size: var(--s1); }
.rt .rt-table--wide th, .rt .rt-table--wide td { font-size: var(--s1); padding: 12px 12px 12px 0; }
.rt .rt-table--wide th { width: auto; }
@media (max-width: 760px) {
  /* スマホ：4列の表は会社ごとのまとまりにする（見出しの行は隠し、各値の前に項目名） */
  .rt .rt-table--wide .rt-thead { display: none; }
  .rt .rt-table--wide tr { display: block; padding: 16px 0; border-bottom: 1px solid rgba(11, 12, 14, .25); }
  .rt .rt-table--wide th, .rt .rt-table--wide td { display: block; padding: 0; margin: 0; border: 0; }
  .rt .rt-table--wide th { font-size: var(--s2); margin-bottom: 8px; }
  .rt .rt-table--wide td::before { content: attr(data-label) "："; font-weight: 700; }
}