/* 069 たねまき特許事務所 ― 色はここだけ触れば差し替わる */
:root {
  --c-bg: #f6fbef;
  --c-leaf: #9bd36a;
  --c-green: #3fae5a;
  --c-deep: #2f7d3f;
  --c-yellow: #ffe066;
  --c-mint: #bfe8d6;
  --c-ink: #1f3d23;
  --c-accent-text: #2a7a3b;
  --c-text: #374151;
  --c-sub: #4b5563;
  --font: "M PLUS 2", sans-serif;
  --font-ja: "RocknRoll One", "M PLUS 2", sans-serif;
  --font-en: "Nunito", "M PLUS 2", sans-serif;
  --line: 3px solid var(--c-ink);
  --shadow: 0 6px 0 var(--c-ink);
  --head: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--head); }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.95; color: var(--c-text); background: var(--c-bg); }
main { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, figure, dd { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dd, li { word-break: auto-phrase; }

.en { font-family: var(--font-en); font-weight: 900; font-size: 18px; color: var(--c-accent-text); }
.title { font-family: var(--font-ja); font-size: clamp(30px, 5vw, 50px); line-height: 1.4; color: var(--c-ink); margin: 4px 0 24px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: var(--line); border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: 0 4px 0 var(--c-ink); white-space: nowrap; flex: none; transition: transform .15s, box-shadow .15s; }
.btn:hover, .btn:focus-visible { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-ink); }
.btn--deep { background: var(--c-deep); color: #fff; }
.btn--white { background: #fff; color: var(--c-ink); }
.btn--lg { min-height: 58px; padding: 0 30px; font-size: 17px; }

/* ===== ヘッダー ===== */
.header { position: sticky; top: 0; z-index: 60; background: var(--c-bg); border-bottom: var(--line); }
.header__inner { display: flex; align-items: center; gap: 10px; height: var(--head); padding: 0 20px; max-width: 1280px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 8px; min-height: 48px; text-decoration: none; color: var(--c-ink); font-family: var(--font-ja); font-size: 22px; line-height: 1.1; white-space: nowrap; flex: none; }
.logo small { display: block; font-size: 15px; }
.logo__mark { width: 38px; height: 38px; }
.logo__mark .seed { fill: var(--c-yellow); stroke: var(--c-ink); stroke-width: 2.4; }
.logo__mark .leaf { fill: var(--c-leaf); stroke: var(--c-ink); stroke-width: 2.4; stroke-linejoin: round; }
.gnav { display: none; }
.header__btn { margin-left: auto; min-height: 44px; padding: 0 16px; }
@media (min-width: 1080px) {
  .header__inner { padding: 0 40px; gap: 28px; }
  .gnav { display: flex; gap: 6px; margin-left: auto; }
  .gnav a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--c-ink); }
  .gnav a:hover { background: var(--c-leaf); }
  .header__btn { margin-left: 0; }
}
.spmenu { flex: none; }
.spmenu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 48px; height: 48px; border: var(--line); border-radius: 50%; background: var(--c-leaf); }
.spmenu summary::-webkit-details-marker { display: none; }
.spmenu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spmenu__bar, .spmenu__bar::before, .spmenu__bar::after { display: block; width: 20px; height: 3px; border-radius: 3px; background: var(--c-ink); position: relative; }
.spmenu__bar::before, .spmenu__bar::after { content: ""; position: absolute; left: 0; }
.spmenu__bar::before { top: -7px; } .spmenu__bar::after { top: 7px; }
.spmenu[open] .spmenu__bar { background: transparent; }
.spmenu[open] .spmenu__bar::before { top: 0; transform: rotate(45deg); }
.spmenu[open] .spmenu__bar::after { top: 0; transform: rotate(-45deg); }
.spmenu__nav { position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); background: #fff; border: var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 8px 20px; display: flex; flex-direction: column; }
.spmenu__nav a { display: flex; align-items: center; min-height: 50px; text-decoration: none; font-weight: 700; color: var(--c-ink); border-bottom: 2px dashed var(--c-mint); }
.spmenu__nav a:last-child { border-bottom: 0; }
@media (min-width: 1080px) { .spmenu { display: none; } }

/* ===== D03：ぼかした色の雲（動く版では、ゆっくり形を変える） ===== */
.clouds { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.cl { position: absolute; display: block; filter: blur(48px); opacity: .75; border-radius: 42% 58% 62% 38% / 45% 40% 60% 55%; }
.cl--1 { width: 60vw; max-width: 620px; aspect-ratio: 1; background: var(--c-leaf); top: -10%; left: -14%; }
.cl--2 { width: 50vw; max-width: 520px; aspect-ratio: 1; background: var(--c-yellow); top: 20%; right: -12%; }
.cl--3 { width: 46vw; max-width: 460px; aspect-ratio: 1; background: var(--c-mint); bottom: -14%; left: 24%; }
.cl--4 { width: 30vw; max-width: 300px; aspect-ratio: 1; background: #d6f0a8; top: 8%; left: 44%; }
.is-motion .cl--1 { animation: morph1 16s ease-in-out infinite alternate; }
.is-motion .cl--2 { animation: morph2 19s ease-in-out infinite alternate; }
.is-motion .cl--3 { animation: morph1 22s ease-in-out infinite alternate-reverse; }
.is-motion .cl--4 { animation: morph2 14s ease-in-out infinite alternate-reverse; }
@keyframes morph1 { 0% { border-radius: 42% 58% 62% 38% / 45% 40% 60% 55%; transform: translate(0, 0) scale(1); } 50% { border-radius: 60% 40% 35% 65% / 55% 65% 35% 45%; transform: translate(6%, 8%) scale(1.08); } 100% { border-radius: 38% 62% 55% 45% / 35% 50% 50% 65%; transform: translate(-4%, 4%) scale(.95); } }
@keyframes morph2 { 0% { border-radius: 55% 45% 40% 60% / 50% 60% 40% 50%; transform: translate(0, 0) scale(1); } 50% { border-radius: 35% 65% 60% 40% / 40% 45% 55% 60%; transform: translate(-8%, 6%) scale(1.1); } 100% { border-radius: 62% 38% 45% 55% / 60% 35% 65% 40%; transform: translate(4%, -6%) scale(.96); } }

/* ===== メインビジュアル（イラスト＋A11） ===== */
.hero { position: relative; overflow: hidden; border-bottom: var(--line); }
.hero__inner { position: relative; z-index: 1; display: grid; gap: 8px; max-width: 1240px; margin: 0 auto; padding: 32px 20px 72px; }
.hero__inner > * { min-width: 0; }
.hero__word { position: relative; height: clamp(120px, 30vw, 230px); }
.hero__word-text { display: grid; place-items: center; height: 100%; font-family: var(--font-ja); font-size: clamp(64px, 20vw, 180px); line-height: 1; color: var(--c-deep); letter-spacing: .04em; text-shadow: 3px 3px 0 var(--c-yellow); }
.hero__canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.is-particles .hero__canvas { display: block; }
.is-particles .hero__word-text { visibility: hidden; }
.hero__title { font-family: var(--font-ja); font-size: clamp(32px, 5.4vw, 60px); line-height: 1.4; color: var(--c-ink); }
.hero__title em { font-style: normal; background: linear-gradient(transparent 60%, var(--c-yellow) 60%); }
.hero__lead { margin: 16px 0 24px; color: var(--c-ink); background: rgba(246, 251, 239, .7); border-radius: 12px; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.bulb { width: min(64%, 280px); justify-self: center; overflow: visible; margin-top: 24px; }
.bulb__glass { fill: #fffbe0; stroke: var(--c-ink); stroke-width: 5; }
.bulb__rays path { stroke: var(--c-ink); stroke-width: 5; stroke-linecap: round; fill: none; }
.bulb__sprout { stroke: var(--c-deep); stroke-width: 6; stroke-linecap: round; fill: none; }
.bulb__leaf { fill: var(--c-leaf); stroke: var(--c-ink); stroke-width: 4; stroke-linejoin: round; }
.bulb__eye { fill: var(--c-ink); }
.bulb__smile { fill: none; stroke: var(--c-ink); stroke-width: 4; stroke-linecap: round; }
.bulb__base { fill: var(--c-mint); stroke: var(--c-ink); stroke-width: 4; }
.bulb__tip { fill: var(--c-ink); }
.is-motion .bulb__leaf { transform-box: fill-box; transform-origin: 100% 100%; animation: sway 3.2s ease-in-out infinite alternate; }
.is-motion .bulb__leaf--r { transform-origin: 0% 100%; animation-delay: -1.6s; }
.is-motion .bulb__rays { animation: twinkle 1.6s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes twinkle { from { opacity: .3; } to { opacity: 1; } }
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); grid-template-rows: auto auto; padding: 48px 40px 96px; column-gap: 40px; }
  .hero__word { grid-column: 1 / -1; }
  .hero__copy { grid-column: 1; }
  .bulb { grid-column: 2; grid-row: 2; width: 300px; margin-top: -40px; }
}

/* ===== 区切り ===== */
.sec { padding: 88px 20px; max-width: 1120px; margin: 0 auto; }
.sec__lead { color: var(--c-sub); margin-top: -12px; }
@media (min-width: 1080px) { .sec { padding: 120px 40px; } }
.photo { overflow: hidden; border: var(--line); border-radius: 28px; box-shadow: var(--shadow); margin-top: 32px; }
.photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* 守れるもの（scroll-snap） */
.things__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 16px -20px 0; padding: 4px 20px 20px; scroll-padding: 0 20px; }
.tc { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; background: #fff; border: var(--line); border-radius: 28px; box-shadow: var(--shadow); padding: 22px 22px 26px; }
.tc svg { width: 100%; height: 96px; border-radius: 18px; fill: none; stroke: var(--c-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; }
.tc--1 svg { background: var(--c-yellow); }
.tc--2 svg { background: var(--c-leaf); }
.tc--3 svg { background: var(--c-mint); }
.tc--4 svg { background: #d6f0a8; }
.tc__tag { display: inline-block; font-weight: 700; font-size: 15px; color: var(--c-ink); background: var(--c-bg); border: 2px solid var(--c-ink); border-radius: 999px; padding: 0 12px; }
.tc h3 { font-family: var(--font-ja); font-size: 28px; color: var(--c-ink); margin: 8px 0 4px; }
.things__btns { display: none; gap: 12px; margin-top: 4px; }
.is-js .things__btns { display: flex; }
.arrow { width: 52px; height: 52px; border-radius: 50%; border: var(--line); background: var(--c-yellow); box-shadow: 0 4px 0 var(--c-ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.arrow svg { width: 22px; height: 22px; fill: none; stroke: var(--c-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1080px) { .things__track { margin: 16px 0 0; padding: 4px 4px 20px; } .tc { flex-basis: 260px; } }

/* こんな人に */
.who__list { display: grid; gap: 16px; }
.who__list li { background: #fff; border: var(--line); border-radius: 28px; padding: 22px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; }
.who__icon { grid-row: span 2; width: 64px; height: 64px; padding: 10px; border-radius: 50%; background: var(--c-leaf); border: var(--line); fill: none; stroke: var(--c-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.who__list h3 { font-family: var(--font-ja); font-size: 22px; color: var(--c-ink); }
@media (min-width: 900px) { .who__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 流れ */
.flow__list { position: relative; display: grid; gap: 20px; }
.flow__list::before { content: ""; position: absolute; left: 27px; top: 20px; bottom: 20px; border-left: 4px dotted var(--c-green); }
.flow__list li { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: start; }
.flow__list span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--c-yellow); border: var(--line); font-family: var(--font-en); font-weight: 900; font-size: 24px; color: var(--c-ink); }
.flow__list li > div { background: #fff; border: var(--line); border-radius: 24px; padding: 16px 20px; }
.flow__list h3 { font-family: var(--font-ja); font-size: 21px; color: var(--c-ink); }

/* 費用 */
.price__table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: var(--line); border-radius: 24px; overflow: hidden; }
.price__table th, .price__table td { padding: 16px 20px; text-align: left; border-bottom: 2px dashed var(--c-mint); font-weight: 400; }
.price__table tr:last-child th, .price__table tr:last-child td { border-bottom: 0; }
.price__table th { color: var(--c-ink); font-weight: 700; }
.price__table td { text-align: right; white-space: nowrap; }
.price__table strong { font-family: var(--font-ja); font-weight: 400; font-size: 22px; color: var(--c-accent-text); }
.price__note { margin-top: 12px; color: var(--c-sub); }

/* 事例 */
.case__body { display: grid; gap: 24px; }
.case__body > * { min-width: 0; }
.case__body p + p { margin-top: 12px; }
.photo--tilt { rotate: -2deg; margin-top: 0; }
.case__note { color: var(--c-sub); }
@media (min-width: 900px) { .case__body { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } }

/* よくある質問 */
.faq__list details { background: #fff; border: var(--line); border-radius: 24px; margin-bottom: 14px; }
.faq__list summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 20px; font-weight: 700; color: var(--c-ink); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::before { content: "Q"; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c-leaf); font-family: var(--font-en); font-weight: 900; }
.faq__list details p { padding: 0 20px 20px 66px; }

/* 相談 */
.contact { position: relative; overflow: hidden; background: #eaf6dc; border-top: var(--line); }
.contact__inner { position: relative; z-index: 1; display: grid; gap: 32px; max-width: 1120px; margin: 0 auto; padding: 96px 20px 120px; }
.contact__inner > * { min-width: 0; }
.contact__photo { overflow: hidden; border: var(--line); border-radius: 50% 50% 28px 28px; box-shadow: var(--shadow); }
.contact__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.contact .btn { margin-top: 24px; }
.contact__tel { margin-top: 18px; font-weight: 700; color: var(--c-ink); }
@media (min-width: 900px) { .contact__inner { grid-template-columns: 380px 1fr; gap: 64px; align-items: center; padding: 120px 40px 140px; } }

/* ===== G01：右下からのぞく案内役 ===== */
.guide { position: fixed; right: 4px; bottom: 0; z-index: 55; display: flex; align-items: flex-end; gap: 0; pointer-events: none; }
.guide__img { width: 82px; height: auto; margin-bottom: -26px; filter: drop-shadow(0 4px 0 rgba(31, 61, 35, .25)); }
.guide__bubble { position: relative; max-width: 184px; margin-bottom: 64px; margin-right: -6px; background: #fff; border: var(--line); border-radius: 18px; padding: 8px 12px; font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--c-ink); box-shadow: 0 4px 0 var(--c-ink); }
.guide__bubble::after { content: ""; position: absolute; right: -10px; bottom: 14px; width: 14px; height: 14px; background: #fff; border-top: var(--line); border-right: var(--line); transform: rotate(45deg); }
@media (min-width: 900px) {
  .guide { right: 16px; }
  .guide__img { width: 150px; margin-bottom: -40px; }
  .guide__bubble { max-width: 230px; margin-bottom: 140px; padding: 12px 18px; font-size: 16px; }
}
/* PCでは吹き出しを頭の上に置き、右の余白（本文の列の外）に収める（横に並べると本文の右端に重なった） */
@media (min-width: 900px) {
  .guide { flex-direction: column; align-items: flex-end; }
  .guide__img { width: 140px; }
  .guide__bubble { max-width: 170px; margin: 0 4px 6px 0; padding: 10px 14px; font-size: 15px; }
  .guide__bubble::after { right: 36px; bottom: -10px; transform: rotate(135deg); }
}
/* スマホでは、ひとこと言ったら消える（JS）。JSなしでは吹き出しを出さず、案内役だけがのぞく */
@media (max-width: 899px) {
  .guide__bubble { transition: opacity .4s, visibility .4s; }
  .guide__bubble.is-quiet { opacity: 0; visibility: hidden; }
  html:not(.is-js) .guide__bubble { display: none; }
}
.is-motion .guide__bubble.is-pop { animation: pop .5s cubic-bezier(.3, 1.8, .5, 1); }
.is-motion .guide__img.is-peek { animation: peek .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes peek { from { transform: translateY(40%); } to { transform: translateY(0); } }

/* フッター */
.footer { background: var(--c-ink); color: #eef7e4; text-align: center; padding: 0 20px 96px; font-size: 15px; }
.footer__photo { max-width: 560px; margin: 0 auto 32px; transform: translateY(-40px); border: var(--line); border-color: #eef7e4; border-radius: 28px; overflow: hidden; }
.footer__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.footer__logo { font-family: var(--font-ja); font-size: 24px; color: var(--c-yellow); margin-bottom: 8px; }
.footer__fiction { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}