/* しくみ堂 ── 夜の紺と山吹。LINEの緑は届いたお知らせだけ */
:root {
  --night: #141d33;     /* 夜の紺 */
  --night-2: #1d2946;
  --hero-top: #2a5aa3;  /* 最初の画面: 青から空色へ(2026-09-28 ボス「紺は暗い」) */
  --hero-end: #4f92df;
  --ink: #141d33;
  --ink-soft: #55607a;
  --mist: #c9d2e6;      /* 紺の上の本文 */
  --yellow: #f2b632;    /* 山吹 */
  --line: #06c755;      /* LINEの緑。お知らせの吹き出しだけ */
  --paper: #ffffff;
  --pale: #f3f5f9;
  --measure: 38em;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.9;
  font-feature-settings: "palt";
  overflow-wrap: anywhere;
}
.hero-grid > *, .two > *, .cases > *, .steps > * { min-width: 0; }
h1, h2, h3, .lead, .sec-lead, .offer p, .case p, .contact p { word-break: auto-phrase; }
a { color: inherit; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* 頭 */
.site-head { background: var(--hero-top); color: #fff; position: sticky; top: 0; z-index: 10; }
.head-row { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 26px; text-decoration: none; letter-spacing: .1em; }
nav { display: flex; gap: 26px; font-size: 15px; align-items: center; }
nav a { text-decoration: none; color: #f0f5fc; }
nav a:hover { color: #fff; }
nav .nav-cta { color: var(--night); background: var(--yellow); padding: 9px 20px; border-radius: 40px; font-weight: 700; }
nav .nav-cta:hover { color: var(--night); background: #ffc94d; }

/* 最初の画面 */
.hero { background: linear-gradient(165deg, var(--hero-top) 0%, var(--hero-end) 100%); color: #fff; padding: 48px 0 72px; border-radius: 0 0 50% 50% / 0 0 64px 64px; position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; }
h1 { font-size: clamp(34px, 5.2vw, 66px); line-height: 1.3; margin: 0 0 28px; font-weight: 900; letter-spacing: .01em; }
h1 span { display: block; color: #ffd34d; }  /* 青の上で浮くよう、見出しだけ明るい山吹 */
.lead { max-width: 26em; margin: 0 0 10px; font-size: 18px; color: #f0f5fc; }
.lead-sub { margin: 0 0 36px; font-size: 15px; color: #8e9ab5; }

.btn {
  display: inline-block; padding: 18px 36px; background: var(--yellow); color: var(--night);
  text-decoration: none; font-weight: 900; font-size: 18px; border-radius: 50px;
}
.btn:hover { background: #ffc94d; }

/* スマホの絵 */
.phone { margin: 0 auto; width: 300px; }
.phone-screen {
  height: 390px; padding: 28px 14px; border-radius: 40px; background: #e7ebf3;
  border: 10px solid #000; box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}
.phone-time { margin: 0 0 18px; text-align: center; font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.bubble {
  width: 86%; margin-bottom: 14px; padding: 11px 14px; background: #fff; color: var(--ink);
  border-radius: 18px 18px 18px 4px; font-size: 14px; line-height: 1.6;
}
.bubble { word-break: auto-phrase; }
.bubble small { display: block; font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.bubble.is-key { box-shadow: 0 0 0 3px var(--yellow); }
.bubble.is-reply { width: auto; max-width: 80%; margin-left: auto; border-radius: 18px 18px 4px 18px; background: var(--line); color: #fff; }
.bubble-read { margin: -8px 0 0; text-align: right; font-size: 11px; color: var(--ink-soft); }
.b1 { animation: arrive .5s ease-out .4s both; }
.b2 { animation: arrive .5s ease-out 1.3s both; }
.b3 { animation: arrive .5s ease-out 2.8s both; }
.phone figcaption { margin: 18px 0 0; font-size: 14px; line-height: 1.7; color: #fff; text-align: center; background: rgba(20, 29, 51, .30); border-radius: 10px; padding: 6px 12px; }
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } }

/* 節 */
section { padding: 96px 0; }
h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1.3; margin: 0 0 32px; font-weight: 900; letter-spacing: .03em; }
.sec-lead { max-width: var(--measure); margin: -12px 0 44px; }
h3 { font-size: 22px; margin: 0 0 12px; font-weight: 900; }
.note { font-size: 14px; color: var(--ink-soft); }
.small { font-size: 14px; word-break: auto-phrase; }
.pale { background: var(--pale); }

/* できること */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.offer { border-top: 6px solid var(--yellow); padding-top: 24px; }
.offer h3 { font-size: 28px; }
.offer-icon { width: 88px; height: 88px; display: block; margin-bottom: 14px; fill: none; stroke: var(--hero-top); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.offer-icon .fill { fill: var(--yellow); stroke: var(--hero-top); }  /* 最初の画面の青を、下の節でも1か所拾う */
.offer p { margin: 0 0 14px; }
.offer ul { margin: 0 0 14px; padding-left: 1.2em; }
.offer li { margin-bottom: 6px; }
.offer li::marker { color: var(--yellow); }

/* 例(紺の帯) */
.dark { background: var(--hero-top); color: #fff; border-radius: 50% 50% 50% 50% / 64px 64px 64px 64px; }
.dark .sec-lead { color: #f0f5fc; }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.case { background: var(--night-2); padding: 28px 26px 30px; border-radius: 6px; border-top: 4px solid var(--yellow); }
.case-num { margin: 0 0 10px; font-size: 28px; line-height: 1; font-weight: 900; color: var(--yellow); letter-spacing: .01em; }
.case-num small { font-size: 15px; margin-left: 4px; }
.case h3 { font-size: 19px; margin-bottom: 10px; }
.case h3 span { display: block; font-size: 14px; font-weight: 500; color: var(--mist); }
.case p:last-child { margin: 0; font-size: 15px; line-height: 1.8; color: var(--mist); }

/* 進め方(順番のある手順なので番号をふる) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); counter-reset: s; position: relative; }
.steps::before { content: ""; position: absolute; left: 24px; right: calc(100% / 6 - 24px); top: 24px; height: 3px; background: var(--yellow); }
.steps li { counter-increment: s; position: relative; padding-right: 12px; }
.steps li::before {
  content: counter(s); display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px;
  background: var(--night); color: var(--yellow); border-radius: 50%; font-size: 20px; font-weight: 900; position: relative;
}
.steps b { display: block; font-size: 19px; }
.steps span { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-top: 4px; }

/* 料金 */
.price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 20px; }
.plan { background: #fff; border-radius: 10px; padding: 28px 26px; border-top: 6px solid var(--yellow); }
.plan p { margin: 0; }
.plan-name { font-weight: 700; font-size: 17px; }
.plan-price { font-size: 38px; font-weight: 900; line-height: 1.3; margin: 10px 0 8px !important; }
.plan-price small { font-size: 17px; margin: 0 2px; }
.plan-note { word-break: auto-phrase; font-size: 14px; color: var(--ink-soft); line-height: 1.7; }

/* 相談(山吹の帯) */
.contact { background: var(--yellow); color: var(--night); text-align: center; border-radius: 50% 50% 0 0 / 64px 64px 0 0; padding-top: 72px; margin-top: -64px; position: relative; }
#ryokin { padding-bottom: 200px; }
.contact p { max-width: 30em; margin-left: auto; margin-right: auto; }
/* 問い合わせのボタン: 山吹の地の上で一番目立つよう、青で大きく */
.btn-dark { background: var(--hero-top); color: #fff; margin: 16px 0 18px; padding: 22px 48px; font-size: 20px; box-shadow: 0 8px 22px rgba(42, 90, 163, .35); }
.btn-dark::after { content: "→"; margin-left: 12px; }
.btn-dark:hover { background: #224b8a; }
.contact .small { color: #5b4a1c; }

.site-foot { padding: 40px 0; background: var(--hero-top); color: #e1e9f6; font-size: 14px; }
.site-foot p { margin: 0; }
.site-foot .logo { color: #fff; font-size: 22px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px !important; }
.foot-nav a { color: #f0f5fc; text-decoration: none; }
.foot-nav a:hover { color: #fff; text-decoration: underline; }

/* 案内役のロボット */
.stage { position: relative; }
.guide { position: relative; }
.guide img { display: block; height: auto; }
.say {
  position: relative; margin: 0; padding: 12px 16px; background: #fff; color: var(--night);
  border-radius: 16px; font-size: 15px; line-height: 1.6; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.say::after { content: ""; position: absolute; width: 16px; height: 16px; background: #fff; transform: rotate(45deg); }
.guide-hero { position: absolute; left: -175px; bottom: -20px; width: 230px; z-index: 2; animation: arrive .6s ease-out 3.4s both; }
.guide-hero .say { position: absolute; bottom: 100%; left: 0; width: 200px; margin-bottom: 4px; }
.guide-hero .say::after { bottom: -7px; left: 90px; }
/* ツクモンは青。紺の上では手(紺)が沈むので、白い縁取りで浮かせる */
.guide-hero img { width: 230px; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.sec-head { position: relative; }
#dekiru .sec-head { margin-bottom: 92px; }  /* ツクモンの足が下の線に重ならないように */
#dekiru .sec-head .guide-side { top: -60px; }
.sec-head .guide-side { position: absolute; right: 0; top: -50px; }
.guide-side { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 8px; }
.guide-side img { width: 160px; }
.guide-side .say { background: #fff; box-shadow: none; border: 1px solid #dfe3ec; margin-bottom: 130px; order: 1; }
.guide-side img { order: 2; }
.guide-side .say::after { background: #fff; border-right: 1px solid #dfe3ec; border-top: 1px solid #dfe3ec; right: -9px; top: 45%; }
.guide-contact { display: flex; flex-direction: column; align-items: center; margin: -120px auto 40px; width: fit-content; }
.guide-contact img { width: 150px; order: 2; position: relative; }
.guide-contact::before { content: ""; position: absolute; width: 210px; height: 210px; bottom: -20px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: rgba(255, 255, 255, .55); }
.guide-contact .say { position: relative; z-index: 1; }
.guide-contact .say { order: 1; margin-bottom: 10px; }
.guide-contact .say::after { bottom: -7px; left: calc(50% - 8px); }

.say-name { display: block; color: #b07a0c; font-size: 16px; margin-bottom: 2px; }

/* 最初の画面の下の数字 */
.proof { list-style: none; margin: 56px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(255, 255, 255, .15); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; color: var(--mist); font-size: 15px; }
.proof b { display: block; color: var(--yellow); font-size: 64px; line-height: 1.1; font-weight: 900; }
.proof small { font-size: 22px; margin-left: 4px; }

/* スマホの下に固定する相談ボタン */
.sp-cta { display: none; }

/* 進め方を紺の帯に */
.dark .steps li::before { background: var(--yellow); color: var(--night); }
.dark .steps span { color: #f0f5fc; }
.dark .guide-side .say { border-color: transparent; }
.dark .guide-side .say::after { border-color: transparent; }
.dark .guide-side img { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff); }
.hero { padding-bottom: 96px; }

/* スマホ */
@media (max-width: 860px) {
  .phone figcaption { margin: 18px -24px 0; }  /* スマホでは絵より少し広げて折れを防ぐ */
  body { padding-bottom: 76px; }
  .sp-cta {
    display: block; position: fixed; left: 16px; right: 16px; bottom: 12px; z-index: 20;
    padding: 15px; text-align: center; background: var(--yellow); color: var(--night);
    font-weight: 900; font-size: 17px; text-decoration: none; border-radius: 50px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  }
  .hero, .dark { border-radius: 0 0 50% 50% / 0 0 32px 32px; }
  .hero { background: linear-gradient(180deg, var(--hero-top) 0%, #4585d2 100%); }
  .dark { border-radius: 50% 50% 50% 50% / 32px 32px 32px 32px; }
  .contact { border-radius: 50% 50% 0 0 / 32px 32px 0 0; }
  .stage { padding-left: 0; }
  .guide-hero { position: relative; left: auto; bottom: auto; width: auto; display: flex; align-items: flex-end; gap: 10px; margin: 0 0 18px; }
  .guide-hero img { width: 130px; order: 1; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
  .guide-hero .say { position: relative; order: 2; bottom: auto; left: auto; width: auto; margin: 0 0 40px; }
  .guide-hero .say::after { bottom: auto; top: 50%; left: -7px; }
  .proof { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
  .proof b { display: inline; font-size: 30px; margin-right: 6px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 0; }
  #dekiru .sec-head { margin-bottom: 0; }
  .guide-side { margin: 0 0 24px; }
  .guide-side img { width: 100px; }
  .guide-side .say { margin-bottom: 60px; }
  nav .nav-cta { display: none; }
  .bubble { font-size: 15px; }
  .bubble small, .phone-time, .bubble-read { font-size: 12px; }
  #ryokin { padding-bottom: 150px; }
  .contact { margin-top: -32px; }
  .guide-side .say { margin-bottom: 40px; font-size: 14px; }
  .guide-side .say::after { right: -7px; }
  .guide-contact { margin-top: -110px; }
  .guide-contact img { width: 120px; }
  .guide-contact::before { width: 160px; height: 160px; }
  .price { grid-template-columns: 1fr; gap: 16px; }
  .plan-price { font-size: 32px; }
  .phone { width: 240px; }
  .phone-screen { height: auto; padding-bottom: 20px; }
  .sec-head .guide-side { position: static; }
  .proof b { display: block; font-size: 44px; margin: 0; }
  .guide-side .say { order: 2; margin-bottom: 50px; }
  .guide-side img { order: 1; width: 110px; }
  .guide-side .say::after { right: auto; left: -9px; transform: rotate(-135deg); }
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .head-row { height: 60px; }
  nav a:not(.nav-cta) { display: none; }
  .hero { padding: 32px 0 64px; }
  .hero-grid, .two, .cases { grid-template-columns: 1fr; gap: 40px; }
  .cases { gap: 18px; }
  .phone { width: 240px; }
  .phone-screen { height: auto; padding-bottom: 20px; }
  section { padding: 64px 0; }
  .steps { grid-template-columns: 1fr; row-gap: 18px; }
  .steps::before { left: 23px; right: auto; top: 24px; bottom: 24px; width: 3px; height: auto; }
  .steps li { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: center; }
  .steps li::before { margin: 0; grid-row: span 2; }
  .steps span { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; scroll-behavior: auto !important; }
}
.nw { white-space: nowrap; }

/* 進め方の青い帯の下に料金の灰色を潜らせ、継ぎ目の白い角を消す(チャン君 2026-09-28) */
#susumekata { margin-bottom: -64px; position: relative; z-index: 1; }
#ryokin { padding-top: 160px; }
@media (max-width: 860px) {
  #susumekata { margin-bottom: -32px; }
  #ryokin { padding-top: 96px; }
  /* 下に固定した相談ボタンは、山吹の「ご相談」の節が見えている間は隠す(同じ色で溶けるため) */
  .sp-cta { transition: opacity .2s, visibility .2s; }
  .sp-cta.is-hidden { opacity: 0; visibility: hidden; }
}
/* 最初の画面の吹き出しを、見出しと絵のスマホの間に収める */
@media (min-width: 861px) and (max-width: 1100px) {
  .guide-hero .say { left: -10px; }
}

/* プライバシーポリシーのページ */
.policy { padding: 64px 0 96px; }
.policy .wrap { max-width: 820px; }
.policy h1 { font-size: clamp(30px, 4.4vw, 44px); margin: 0 0 24px; }
.policy h2 { font-size: 22px; margin: 44px 0 12px; letter-spacing: .02em; }
.policy p, .policy li, .policy dd { font-size: 16px; line-height: 1.9; word-break: auto-phrase; }
.policy ul { padding-left: 1.3em; }
.policy dl { display: grid; grid-template-columns: 7em 1fr; gap: 6px 12px; margin: 0; }
.policy dt { font-weight: 700; }
.policy dd { margin: 0; }
.policy a { color: var(--hero-top); }
.policy-date { margin-top: 48px; color: var(--ink-soft); font-size: 14px; }