/* デザインの数字（B案「SNS の画像と資料の水色」）。サイトの見た目はこのファイルだけで切り替える。
   決まりの理由は knowledge/design-rules.md。値を足す時は、役割（何に使うか）を先に決める。 */
:root {
  /* 色は役割で決める（2026-10-20 本人が4案から④を選んだ。SNS の画像と AI経理・融資の資料と同じ水色のトンマナ。brands/better-idea.md の「SNS の画像」）。
     地は白、飾りは #78F0FF・#96C8FF 系の水色のぼかし。文字は紺 #14284B、強調は #0070D0。サービスのページは末尾の「サービスごとの色」で色だけ変える */
  --c-bg: #ffffff;
  --c-surface: #f3f8fd;
  --c-text: #14284b;
  --c-text-muted: #3a5a80;       /* 白地で 7:1 */
  --c-line: #dbe6f2;
  --c-accent: #0070d0;           /* 白文字で 4.9:1 */
  --c-accent-strong: #0058a6;
  --c-accent-soft: #e2f0fc;
  --c-on-accent: #ffffff;
  --c-inverse-bg: #f0f6fc;
  --c-inverse-text: #14284b;
  --c-inverse-muted: #3a5a80;
  --c-glow-cyan: rgb(120 240 255 / 0.50);
  --c-glow-sky: rgb(150 200 255 / 0.50);
  --c-glow-aqua: rgb(120 210 255 / 0.40);
  --bg-airy:
    radial-gradient(34rem 28rem at 70% 14%, var(--c-glow-cyan), transparent 65%),
    radial-gradient(36rem 34rem at 94% 76%, var(--c-glow-sky), transparent 62%),
    radial-gradient(26rem 24rem at 4% 96%, var(--c-glow-aqua), transparent 60%),
    #ffffff;

  /* 書体。見出しは太い Zen Kaku Gothic New、本文は Noto Sans JP、欧文は Inter */
  --font-sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-heading: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-latin: "Inter", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;

  /* 文字の大きさ。見出しの差を A より大きくする（親しみ・分かりやすさ） */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.979rem + 0.093vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.167rem + 0.37vw, 1.5rem);
  --fs-h2: clamp(1.875rem, 1.5rem + 1.667vw, 3rem);      /* 30→48 */
  --fs-h1: clamp(2.375rem, 1.667rem + 3.148vw, 4.5rem);  /* 38→72 */
  --fs-display: clamp(2.75rem, 1.5rem + 5.556vw, 6.5rem);/* 44→104 */
  --lh-body: 1.9;
  --lh-heading: 1.35;
  --lh-tight: 1.15;
  --tracking-body: 0.04em;
  --tracking-heading: 0.01em;
  --tracking-label: 0.14em;

  /* 余白の段階（近接） */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem;
  --gap-inner: var(--sp-4);
  --gap-item: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  --gap-head: clamp(2.5rem, 2rem + 2.2vw, 4rem);
  --gap-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, 0.5rem + 3.6vw, 4rem);

  /* 幅（整列） */
  --w-content: 72rem;
  --w-wide: 90rem;
  --w-narrow: 46rem;
  --measure: 40em;

  /* 形（反復）。角丸は大きめの2種類 */
  --radius: 16px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 18px 40px -20px rgb(20 40 75 / 0.16);
  --header-h: 4.5rem;

  /* 動き */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 900ms;

  /* 3D の色（使わない時も変数は残す） */
  --scene-1: #0070d0;
  --scene-2: #52b7e2;
  --scene-3: #e2f0fc;
}

/* B案だけの面の作り。site.css より後に効かせるため html を付けて強める。
   トップ・各ページの上部・問い合わせの帯を、濃い色の面ではなく、白地にぼかしの円を重ねた明るい面にする */
html .hero--text { min-height: min(86svh, 46rem); align-items: center; padding-block: var(--sp-9); background: var(--bg-airy); }
html .page-header { background: var(--bg-airy); }
html .tone-accent { background: var(--bg-airy); color: var(--c-text); --c-text-muted: #3a5a80; }
html .tone-accent .eyebrow { color: var(--c-accent); }
html .tone-accent .button--primary { background: var(--c-accent); color: var(--c-on-accent); }
html .tone-accent .button--primary:hover { background: var(--c-accent-strong); }
html .site-footer { border-top: 1px solid var(--c-line); }
/* 料金の金額は「10万円〜」のように漢字を含むので、見出しより一段小さくして1行に収める */
html .plan__amount { font-size: var(--fs-h2); white-space: nowrap; }
/* ぼかしの面の下端を白へなじませ、次のセクションとの境目を消す。サービスのカードは参考サイトの緑→水色の薄い帯を敷く */
html .hero--text, html .page-header { background: linear-gradient(to bottom, transparent 70%, #ffffff), var(--bg-airy); }
html .section--services .card { background: linear-gradient(100deg, rgb(120 240 255 / 0.12), rgb(150 200 255 / 0.14)); }

/* 作り物に見える飾りを減らす（2026-10-20 本人「デザインが AI すぎる」）。
   水色のぼかしの円は本人の選んだ色なので、トップ・各ページの上部・問い合わせの帯に残す（同日 本人「色合いは水色のやつでいい」）。
   できることの番号（01〜06）と塗りのカードをやめ、上の線で区切った一覧にする。悩みの丸い印をやめ、左の線にする。
   LINE のページは本人が選んだ資料の作り（番号のタブ、グラデーションの帯）なので対象外 */
html body:not(.page-line) .section--features .num { display: none; }
html body:not(.page-line) .section--features .card { background: none; box-shadow: none; border-radius: 0; padding: var(--sp-5) 0 0; border-top: 2px solid var(--c-text); }
html body:not(.page-line) .problem { grid-template-columns: 1fr; background: none; border-radius: 0; border-left: 3px solid var(--c-accent); padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); }
html body:not(.page-line) .problem::before { display: none; }

/* トップのサービス一覧。カード全体がリンクで、下端にページへ進むボタンを置く */
html .section--services .card { display: flex; flex-direction: column; }
html .section--services .card .card__go { margin-top: auto; align-self: flex-start; }

/* サービスごとの色（2026-10-20 本人）。ページの作りは同じで、色だけを body の page-<key> で切り替える。
   LINE は他のページと同じ「白地にぼかしの円」の作りで、水色の円を緑 #07C755 と黄緑 #9BD42A に置き換える（2026-10-20 本人「水色の色合いを緑や黄緑に」）。
   ボタンと文字の緑は白地で読める濃さ（#047A38 は白地で 5.5:1、薄い緑の地で 5.0:1）に下げる */
html body.page-line {
  --c-text: #1f2937;
  --c-text-muted: #4b5563;
  --c-surface: #f0fbf4;
  --c-line: #d1d5db;
  --c-accent: #047a38;
  --c-accent-strong: #035f2b;
  --c-accent-soft: #e7f9ef;
  --c-inverse-bg: #e7f9ef;
  --c-inverse-text: #1f2937;
  --c-inverse-muted: #4b5563;
  --c-glow-cyan: rgb(7 199 85 / 0.32);
  --c-glow-sky: rgb(155 212 42 / 0.42);
  --c-glow-aqua: rgb(120 225 140 / 0.38);
  --bg-airy:
    radial-gradient(34rem 28rem at 70% 14%, var(--c-glow-cyan), transparent 65%),
    radial-gradient(36rem 34rem at 94% 76%, var(--c-glow-sky), transparent 62%),
    radial-gradient(26rem 24rem at 4% 96%, var(--c-glow-aqua), transparent 60%),
    #ffffff;
  --scene-1: #07c755;
  --scene-2: #9bd42a;
  --scene-3: #e7f9ef;
}
html body.page-line .tone-accent { --c-text-muted: #4b5563; }
html body.page-line .button--primary { background: var(--c-accent); }
html body.page-line .button--primary:hover { background: var(--c-accent-strong); }
html body.page-line .section--services .card,
html body.page-line .card { --c-accent-soft: #e7f9ef; }
html .section--services .card > p { margin-bottom: var(--sp-5); }
/* できることが4つの時は2列×2段にし、3列の下に1枚だけ残る形を避ける */
html .section--features .card-grid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* LINE のページは LINE 系の資料（Better idea/materials/_line-tone）の作りに合わせる（2026-10-20 本人）。
   地はごく薄い緑 #F6FCF3、カードは白＋灰の枠＋角丸14px、見出しは左に縦の帯。
   上部と最後の問い合わせの帯は、他のページと同じぼかしの面（緑と黄緑）。白文字を載せる番号は読める濃さの緑に下げる */
html body.page-line { --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; --font-heading: var(--font-sans); --radius: 14px; word-break: auto-phrase; }
html body.page-line main { background: #f6fcf3; }
html body.page-line main > .section:not(.tone-accent) { background: transparent; }

/* 上部の帯：他のページと同じぼかしの面（緑と黄緑の円）。下端は地の薄い緑へなじませる */
html body.page-line .page-header { background: linear-gradient(to bottom, transparent 70%, #f6fcf3), var(--bg-airy); }

/* 見出し：左上の縦の帯（黄緑→緑）、英字の小見出し、題 */
html body.page-line .section-head--start { position: relative; padding-left: 1.5rem; }
html body.page-line .section-head--start::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 8px; height: min(100%, 5.5rem); border-radius: 4px; background: linear-gradient(180deg, #9bd42a, #07c755); }
html body.page-line .section-head .eyebrow { color: var(--c-text); font-family: var(--font-latin); font-weight: 600; letter-spacing: 0.04em; }
html body.page-line .section-lead { color: var(--c-text); font-weight: 700; }

/* カード：白、灰の枠、角丸。上端に番号のタブ（緑→黄緑の細い帯） */
html body.page-line .card,
html body.page-line .problem,
html body.page-line .plan { background: #fff; border: 1.5px solid #d1d5db; border-radius: 14px; box-shadow: none; }
html body.page-line .section--features .card { position: relative; overflow: hidden; padding-top: calc(clamp(1.5rem, 1.2rem + 1vw, 2.25rem) + 6px); }
html body.page-line .section--features .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, #07c755, #9bd42a); }
html body.page-line .num { display: inline-flex; align-self: flex-start; padding: 0.15em 0.75em; border-radius: 999px; background: linear-gradient(90deg, #047a38, #3a7a10); color: #fff; font-size: var(--fs-xs); letter-spacing: 0.06em; }
html body.page-line .problem::before { box-shadow: inset 0 0 0 6px #e7f9ef, inset 0 0 0 12px #047a38; background: #e7f9ef; }
html body.page-line .problems__resolve { text-align: center; color: var(--c-text); }
html body.page-line .problems__resolve,
html body.page-line .section--problems .problem-list { margin-inline: auto; }

/* 料金：おすすめは緑の太枠。プラン名の上に緑の帯 */
html body.page-line .plan { position: relative; overflow: hidden; padding-top: calc(var(--sp-7) + 6px); }
html body.page-line .plan::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, #07c755, #9bd42a); }
html body.page-line .plan--featured { border: 2px solid #047a38; }
html body.page-line .plan__amount { color: #047a38; }

/* 流れ：STEP の箱。丸い番号は緑→濃い黄緑、箱は白 */
html body.page-line .step { padding: var(--sp-6) var(--sp-5); border: 1.5px solid #d1d5db; border-radius: 14px; background: #fff; }
html body.page-line .step::before { display: none; }
html body.page-line .step__num { display: inline-flex; padding: 0.3em 0.9em; border-radius: 999px; background: linear-gradient(90deg, #047a38, #3a7a10); color: #fff; }

/* よくある質問：白い箱の中に並べる */
html body.page-line .faq { border: 1.5px solid #d1d5db; border-radius: 14px; background: #fff; padding-inline: var(--sp-6); }
html body.page-line .faq__item:last-child { border-bottom: 0; }

/* 最後の問い合わせの帯：上部と同じぼかしの面に紺の文字 */
html body.page-line .section--cta.tone-accent { background: var(--bg-airy); }

/* 事例が4件の時は2列×2段、流れの5段階は PC で1列に並べ、下に1枚だけ残る形を避ける */
html .section--cases .card-grid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
@media (min-width: 64em) { html body.page-line .steps:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); } }
/* スマホでは題が「アカウン／ト」で切れるので一段小さくし、「LINE公式アカウントの」を1行に収める */
@media (max-width: 40em) { html body.page-line .page-header__title { font-size: 1.75rem; } }

/* 事例の事業ごとの切り替え（2026-10-20 本人「事例は事業ごとに見えるように」）。上に事業の名前を並べ、押すとその事業の見出しへ移る */
html .case-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-8); }
html .case-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-5); border: 1.5px solid var(--c-line); border-radius: 999px; background: #fff; color: var(--c-text); font-weight: var(--fw-bold); font-size: var(--fs-sm); text-decoration: none; }
html .case-tabs a:hover { border-color: var(--c-accent); color: var(--c-accent); }
html .case-group { scroll-margin-top: 6rem; }
html .case-group + .case-group { margin-top: var(--sp-9); }
html .case-group__title { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--c-text); font-family: var(--font-heading); font-size: var(--fs-h3); }
html .case-group__count { font-family: var(--font-latin); font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--c-text-muted); }
html .case-group .empty { color: var(--c-text-muted); }
/* メディア掲載。お知らせの一覧と同じ並びで、媒体名を小さな札にする */
html .media-list .tag { white-space: nowrap; }


/* 事例の下の注記 */
.case-note { margin-top: var(--sp-4); font-size: .8125rem; color: var(--c-text-muted); }

/* 代表のSNS（代表メッセージの名前の下） */
.owner-social { display: flex; justify-content: flex-end; gap: .75rem; list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.owner-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line); text-decoration: none; color: var(--c-text); background: var(--c-surface); transition: color .2s, border-color .2s; }
.owner-social a:hover, .owner-social a:focus-visible { color: var(--c-accent); border-color: var(--c-accent); }
.owner-social__word { font-family: var(--font-heading); font-size: .75rem; font-weight: 700; letter-spacing: -.02em; }