/* 窓のあかりの型（lp-window）
   青と黄色の図解イラスト。最初の画面の窓に1つずつあかりがつき、最後は「あなたの窓」にあかりがつく。
   色を変えるときは :root の6色だけを変える。絵の背景の青（--blue）は hero.webp の地の色と合わせてある */
:root {
  --blue: #3A5AC5;
  --blue-d: #2F4AA8;
  --navy: #1E2A5A;
  --sky: #DDE6F8;
  --sky-l: #EEF3FC;
  --yellow: #FFD43B;
  --yellow-l: #FFF6D3;
  --orange: #F28C28;
  --red: #E8513F;
  --round: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
}
body { font-family: "Noto Sans JP", sans-serif; color: var(--navy); background: #fff; }
.sp { display: none; }
img { height: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: #fff; padding: 8px 14px; }
.skip:focus { left: 8px; }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 64px; padding: 0 34px; border-radius: 999px;
  background: var(--red); color: #fff; font: 800 19px/1.3 var(--round); letter-spacing: .04em;
  box-shadow: 0 6px 0 #B83A2B; transition: transform .2s, box-shadow .2s; }
.btn span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--red); font-size: 16px; }
.btn:hover { transform: translateY(3px); box-shadow: 0 3px 0 #B83A2B; }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.btn-s { gap: 0; min-height: 46px; padding: 0 22px; font-size: 15px; box-shadow: 0 4px 0 #B83A2B; }
.btn-line { background: var(--yellow); color: var(--navy); box-shadow: 0 6px 0 #D9A900; }
.btn-line span { background: var(--navy); color: var(--yellow); }
.btn-line:hover { box-shadow: 0 3px 0 #D9A900; }

/* ヘッダー */
.header { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 32px; background: rgba(255,255,255,.96); box-shadow: 0 2px 0 rgba(30,42,90,.08); }
.brand { display: flex; align-items: center; gap: 12px; font: 900 19px/1.25 var(--round); }
.brand small { display: block; font: 500 11px/1.4 "Noto Sans JP"; opacity: .7; }
.brand-mark { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 34px; height: 34px; padding: 4px; border-radius: 7px; background: var(--blue); }
.brand-mark i { border-radius: 2px; background: var(--yellow); }
.brand-mark i:nth-child(4) { background: var(--sky); }

/* 見出し */
.ttl { font: 900 clamp(28px, 3.4vw, 42px)/1.4 var(--round); text-align: center; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.ttl em { font-style: normal; color: var(--blue); background: linear-gradient(transparent 68%, var(--yellow) 68%); padding: 0 .1em; }
.ttl small { display: block; width: 100%; font-size: 16px; font-weight: 800; color: var(--blue); letter-spacing: .1em; }
.ttl-deco { width: 22px; height: 34px; background: repeating-linear-gradient(115deg, var(--orange) 0 4px, transparent 4px 10px); }
.ttl-w { flex-direction: column; gap: 4px; }

/* 最初の画面 */
.hero { position: relative; padding-top: 72px; overflow: hidden; color: #fff; text-align: center;
  background: var(--blue); }
.hero-text { position: absolute; z-index: 2; left: 0; right: 0; top: calc(72px + clamp(28px, 3.4vw, 56px)); padding: 0 24px; }
.pills { display: flex; justify-content: center; gap: 14px; margin-bottom: 14px; }
.pills span { position: relative; padding: 4px 24px; border: 3px solid #fff; border-radius: 999px; font: 800 18px/1.6 var(--round); background: rgba(30,42,90,.22); }
.pills span::before, .pills span::after { content: ""; position: absolute; top: 50%; width: 10px; height: 3px; background: var(--yellow); }
.pills span::before { left: -14px; } .pills span::after { right: -14px; }
.hero h1 { font: 900 clamp(34px, 4.6vw, 64px)/1.22 var(--round); letter-spacing: .03em; }
.h1-a { display: block; color: var(--yellow); text-shadow: 0 4px 0 var(--navy); }
.h1-b { display: block; font-size: .72em; margin-top: 4px; }
.hero-lead { margin: 12px auto 0; max-width: 40em; font-size: 16px; font-weight: 500; }
.hero-btn { margin-top: 18px; }
.hero-art { position: relative; width: min(100%, 1680px); margin: 0 auto; aspect-ratio: 2400 / 1500; margin-top: clamp(24px, 3vw, 48px); }
.hero-art img { width: 100%; height: 100%; }
/* 消えている窓（あかりがつくと、ふたが消える）。位置は絵の窓に合わせた割合 */
.lamp { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 15.9%; height: 16.2%;
  background: repeating-linear-gradient(90deg, #C9D6F2 0 6px, var(--sky) 6px 22px); border-radius: 2px;
  box-shadow: inset 0 0 0 3px rgba(30,42,90,.15); }
.js .lamp { animation: lampOn .6s ease forwards; animation-delay: calc(.8s + var(--d) * .45s); }
@keyframes lampOn { to { opacity: 0; } }

/* 料金と時間 */
.facts { position: relative; padding: 72px 0 80px; background: var(--sky-l);
  background-image: linear-gradient(rgba(58,90,197,.07) 2px, transparent 2px), linear-gradient(90deg, rgba(58,90,197,.07) 2px, transparent 2px);
  background-size: 44px 44px; }
.fact-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 960px; margin: 0 auto; }
.fact-list li { position: relative; padding: 46px 18px 24px; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 6px 0 var(--sky); }
.fact-k { position: absolute; left: 50%; top: -18px; translate: -50% 0; padding: 4px 18px; border-radius: 999px; background: var(--yellow); font: 800 15px/1.6 var(--round); white-space: nowrap; }
.fact-list b { display: block; font: 900 64px/1 var(--round); color: var(--orange); }
.fact-list b small { font-size: 24px; color: var(--navy); margin-left: 4px; }
.fact-list .fact-w { font-size: 28px; line-height: 1.5; color: var(--blue); }
.fact-w small { margin: 0 4px; }
.fact-s { display: block; margin-top: 6px; font-weight: 700; font-size: 15px; }
.cta-pair { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 24px; margin-top: 44px; }

/* こんな方に：窓のカード */
.for { padding: 96px 0 104px; background: #fff;
  background-image: repeating-linear-gradient(135deg, rgba(58,90,197,.05) 0 2px, transparent 2px 14px); }
.win-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; max-width: 980px; margin: 52px auto 0; padding: 30px 30px 0; border-radius: 26px 26px 0 0; background: var(--sky);
  box-shadow: inset 0 0 0 4px var(--navy); position: relative; }
.win-grid::before { content: ""; position: absolute; left: -14px; right: -14px; top: -14px; height: 22px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 4px var(--navy); }
.win { display: flex; flex-direction: column; align-items: center; }
.win-glass { position: relative; display: block; width: 100%; aspect-ratio: 16 / 11; overflow: hidden; border: 4px solid var(--navy); border-radius: 6px; background: var(--yellow); }
.win-glass img { width: 100%; height: 100%; object-fit: cover; }
.win-glass::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #C9D6F2 0 6px, var(--sky) 6px 22px); transition: opacity .6s ease; }
.win.is-in .win-glass::after { opacity: 0; }
.win:nth-child(2).is-in .win-glass::after { transition-delay: .15s; }
.win:nth-child(3).is-in .win-glass::after { transition-delay: .3s; }
.win:nth-child(5).is-in .win-glass::after { transition-delay: .15s; }
.win:nth-child(6).is-in .win-glass::after { transition-delay: .3s; }
.win-sill { width: 108%; margin-top: -2px; padding: 8px 6px; border: 4px solid var(--navy); border-radius: 6px; background: var(--yellow); text-align: center; font: 800 17px/1.4 var(--round); }
.win-grid + * { margin: 0; }

/* 悩み */
.worry { padding: 90px 0; background: var(--yellow-l);
  background-image: radial-gradient(rgba(242,140,40,.18) 2px, transparent 2.5px); background-size: 24px 24px; }
.worry-in { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 40px; max-width: 1000px; }
.worry-art { width: 100%; max-width: 340px; justify-self: center; }
.worry-q { font: 900 clamp(28px, 3.2vw, 40px)/1.45 var(--round); }
.worry-q em { font-style: normal; color: var(--blue); }
.bubbles { display: grid; gap: 12px; margin: 26px 0; }
.bubbles li { position: relative; justify-self: start; padding: 10px 22px; border: 3px solid var(--navy); border-radius: 999px; background: #fff; font-weight: 700; }
.bubbles li:nth-child(2) { margin-left: 34px; }
.bubbles li::before { content: ""; position: absolute; left: 26px; bottom: -11px; width: 14px; height: 14px; background: #fff; border-right: 3px solid var(--navy); border-bottom: 3px solid var(--navy); rotate: 45deg; }
.worry-a { font-weight: 500; }

/* タブ */
.check { padding: 96px 0 0; background: var(--blue); color: #fff;
  background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.07) 0 2px, transparent 2px 46px); }
.check .ttl em { color: var(--navy); }
.check .ttl small { color: var(--yellow); }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 920px; margin: 40px auto 0; }
.tabs button { min-height: 72px; padding: 10px 8px; border: 0; border-radius: 16px 16px 0 0; background: var(--navy); color: #fff; font: 800 18px/1.35 var(--round); transition: background .2s, color .2s; }
.tabs button[aria-selected="true"] { background: var(--yellow); color: var(--navy); }
.tabs button:hover { background: var(--blue-d); }
.tabs button[aria-selected="true"]:hover { background: var(--yellow); }
.tabs button:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.panels { border-top: 8px solid var(--yellow); background: var(--sky-l); color: var(--navy); padding: 64px 0 90px;
  background-image: radial-gradient(rgba(58,90,197,.12) 1.6px, transparent 2px); background-size: 20px 20px; }
.js .panel[hidden] { display: none; }
.panel { max-width: 1000px; margin: 0 auto; }
.panel + .panel { margin-top: 80px; }
.js .panel + .panel { margin-top: 0; }
.panel:focus-visible { outline: 3px dashed var(--blue); outline-offset: 10px; }
.panel-ttl { text-align: center; font: 900 clamp(26px, 3vw, 36px)/1.4 var(--round); margin-bottom: 40px; }
.panel-ttl em { font-style: normal; color: var(--orange); font-size: 1.3em; }

.merits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }
.merits li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 38px 20px 0; border-radius: 22px; background: #fff; text-align: center; overflow: hidden;
  background-image: linear-gradient(var(--yellow-l), var(--yellow-l)); background-size: 100% 46%; background-position: bottom; background-repeat: no-repeat; }
.merits li::before, .merits li::after { content: ""; position: absolute; width: 28px; height: 28px; border: 4px solid var(--blue); }
.merits li::before { left: 10px; top: 10px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.merits li::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.no { position: absolute; top: 0; left: 50%; translate: -50% 0; padding: 2px 18px 4px; border-radius: 0 0 10px 10px; background: var(--orange); color: #fff; font: 800 14px/1.5 var(--round); letter-spacing: .1em; }
.merits h4 { font: 800 21px/1.45 var(--round); }
.merits h4 em { font-style: normal; color: var(--blue); }
.merits p { margin-top: 6px; font-size: 16px; line-height: 1.7; }
.merits img { width: 70%; margin-top: auto; padding-top: 10px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: s; }
.steps li { position: relative; padding: 18px 16px 24px; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 5px 0 var(--sky); }
.steps li:not(:last-child)::after { content: ""; position: absolute; right: -22px; top: 30%; width: 18px; height: 26px; background: var(--yellow); clip-path: polygon(0 0, 100% 50%, 0 100%); z-index: 2; }
.steps img { width: 82%; height: 150px; object-fit: contain; margin: 0 auto 8px; }
.steps .no { position: static; translate: none; display: inline-block; border-radius: 999px; background: var(--blue); }
.steps h4 { margin-top: 8px; font: 800 20px/1.5 var(--round); }
.steps p { font-size: 16px; line-height: 1.75; margin-top: 4px; text-align: left; }

.price { width: min(640px, 100%); margin: 0 auto; border-collapse: separate; border-spacing: 0 10px; }
.price th, .price td { padding: 18px 26px; background: #fff; }
.price th { text-align: left; font-weight: 700; border-radius: 14px 0 0 14px; }
.price td { text-align: right; border-radius: 0 14px 14px 0; font-weight: 700; white-space: nowrap; }
.price td b { font: 900 40px/1 var(--round); color: var(--orange); margin-right: 4px; }
.price-note { width: min(640px, 100%); margin: 18px auto 0; font-size: 15px; line-height: 1.8; }

.faq { display: grid; gap: 14px; max-width: 780px; margin: 0 auto; }
.faq details { border-radius: 16px; background: #fff; border: 3px solid var(--navy); }
.faq summary { position: relative; padding: 18px 56px 18px 64px; font: 800 18px/1.5 var(--round); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; position: absolute; left: 18px; top: 14px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 14px; font-size: 26px; color: var(--blue); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 24px 20px 64px; }

/* まとめの一言 */
.promise { padding: 90px 0 0; background: #fff; overflow: hidden; }
.promise-in { position: relative; max-width: 860px; }
.promise-art { width: 100%; }
.promise-text { position: absolute; left: 50%; top: 14%; translate: -50% 0; width: 50%; text-align: center; }
.promise-s { display: inline-block; padding: 8px 26px; border-radius: 999px; background: var(--navy); color: #fff; font: 800 18px/1.5 var(--round); }
.promise-m { margin-top: 16px; font: 900 clamp(26px, 3.2vw, 40px)/1.5 var(--round); }
.promise-m span { display: inline-block; background: linear-gradient(transparent 62%, var(--yellow) 62%); }
.promise::after { content: ""; display: block; height: 18px; background: repeating-linear-gradient(90deg, var(--blue) 0 22px, var(--yellow) 22px 44px); }

/* 問い合わせ */
.contact { padding: 90px 0; background: var(--sky-l);
  background-image: repeating-linear-gradient(135deg, rgba(58,90,197,.06) 0 2px, transparent 2px 16px); }
.contact-in { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 20px; max-width: 1000px; }
.contact-card { padding: 34px 36px 40px; border-radius: 26px; background: #fff; box-shadow: 0 6px 0 var(--sky); }
.contact-k { display: inline-block; padding: 6px 20px; border-radius: 999px; background: var(--yellow); font: 800 16px/1.5 var(--round); }
.tel { margin-top: 12px; font: 900 clamp(34px, 4.4vw, 54px)/1.2 var(--round); color: var(--blue); letter-spacing: .03em; }
.tel span { font-size: .4em; margin-right: 10px; color: var(--navy); }
.contact-s { font-size: 15px; }
.contact .cta-pair { justify-content: flex-start; margin-top: 24px; }
.contact-art { width: 100%; max-width: 260px; justify-self: center; }

/* 申込み */
.entry { padding: 96px 0 104px; background: var(--blue); color: #fff;
  background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.07) 0 2px, transparent 2px 46px); }
.entry-in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; max-width: 1060px; }
.entry .ttl { align-items: flex-start; text-align: left; }
.entry .ttl em { color: var(--navy); }
.entry .ttl small { color: var(--yellow); }
.mywin { width: min(320px, 70%); margin-bottom: 18px; }
.js .mywin img { filter: grayscale(1) brightness(1.25); opacity: .7; transition: filter 1.2s ease, opacity 1.2s ease; }
.js .mywin.is-in img { filter: none; opacity: 1; }
.entry-lead { margin-top: 14px; }
.form { display: grid; gap: 18px; padding: 34px; border-radius: 24px; background: #fff; color: var(--navy); border: 4px solid var(--navy); box-shadow: 10px 10px 0 var(--yellow); }
.form label { display: grid; gap: 6px; font-weight: 700; }
.req { justify-self: start; margin-left: 8px; padding: 0 8px; border-radius: 4px; background: var(--red); color: #fff; font-size: 12px; }
.form label:has(.req) { grid-template-columns: auto 1fr; }
.form label:has(.req) input { grid-column: 1 / -1; }
.form input[type=text], .form input[type=email], .form textarea { width: 100%; padding: 12px 14px; border: 2px solid #B8C6E8; border-radius: 10px; font: inherit; background: var(--sky-l); }
.form input:focus, .form textarea:focus { outline: 3px solid var(--yellow); border-color: var(--blue); }
.form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.form legend { font-weight: 700; margin-bottom: 6px; width: 100%; }
.form .radio { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.btn-submit { width: 100%; border: 0; margin-top: 6px; }
.form-note { font-size: 13px; text-align: center; opacity: .75; }

/* ご注意 */
.notes { padding: 60px 0; background: var(--navy); color: #fff; font-size: 15px; }
.notes h2 { font: 800 22px/1.5 var(--round); text-align: center; margin-bottom: 18px; }
.notes h2::before, .notes h2::after { content: "●"; color: var(--yellow); font-size: .6em; margin: 0 10px; vertical-align: middle; }
.notes ul { max-width: 820px; margin: 0 auto; display: grid; gap: 6px; }
.notes li { padding-left: 1.2em; text-indent: -1.2em; }
.notes li::before { content: "※"; margin-right: .2em; }

/* 下に出る申込みボタン（スマホ） */
.sticky-cta { display: none; }

footer { padding: 46px 24px 120px; text-align: center; background: #fff; font-size: 14px; display: grid; justify-items: center; gap: 16px; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.foot-nav a { text-decoration: underline; }
.back { color: var(--blue); font-weight: 700; }

/* スクロールで出る */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .merits { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps li:nth-child(2)::after { display: none; }
}

@media (max-width: 820px) {
  .sp { display: inline; }
  .header { height: 60px; padding: 0 14px; }
  .brand { font-size: 16px; gap: 8px; }
  .brand small { display: none; }
  .brand-mark { width: 28px; height: 28px; }
  .btn-s { min-height: 40px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
  .btn-s .pc { display: none; }
  .btn { min-height: 58px; font-size: 17px; padding: 0 26px; }

  .hero { padding-top: 60px; }
  .hero-text { position: relative; top: auto; padding: 30px 20px 0; }
  .pills { gap: 10px; }
  .pills span { padding: 3px 14px; font-size: 14px; border-width: 2px; }
  .pills span::before, .pills span::after { display: none; }
  .hero h1 { font-size: 30px; }
  .h1-b { font-size: .7em; }
  .hero-lead { font-size: 15px; text-align: left; }
  .hero-btn { width: 100%; }
  /* 絵は相談員と両側の窓を中心に、大きく切り取る */
  .hero-art { width: 190%; max-width: none; margin: -46vw 0 0 -45%; }

  .facts { padding: 56px 0; }
  .fact-list { grid-template-columns: 1fr; gap: 30px; }
  .fact-list li { padding: 34px 14px 18px; display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; }
  .fact-list b { font-size: 48px; grid-row: span 2; order: 2; }
  .fact-list .fact-w { font-size: 22px; }
  .cta-pair { flex-direction: column; margin-top: 34px; }
  .cta-pair .btn { width: 100%; }

  .for { padding: 70px 0; }
  .for .ttl { flex-wrap: nowrap; gap: 10px; font-size: 25px; }
  .ttl-deco { width: 16px; height: 26px; flex: none; }
  .win-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; padding: 22px 16px 0; margin-top: 40px; }
  .win-grid::before { left: -8px; right: -8px; }
  .win-sill { font-size: 14px; padding: 6px 2px; }

  .worry { padding: 64px 0; }
  .worry-in { grid-template-columns: 1fr; gap: 10px; }
  .worry-art { max-width: 200px; order: 2; }
  .bubbles li:nth-child(2) { margin-left: 18px; }

  .check { padding-top: 70px; }
  .tabs { gap: 6px; margin-top: 30px; }
  .tabs button { min-height: 64px; font-size: 14px; padding: 6px 2px; border-radius: 12px 12px 0 0; }
  .panels { padding: 44px 0 64px; }
  .panel-ttl { margin-bottom: 26px; }
  .merits { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .merits li { padding: 34px 10px 0; }
  .merits h4 { font-size: 16px; }
  .merits p { font-size: 13.5px; }
  .merits img { width: 92%; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .steps li { display: grid; grid-template-columns: 110px 1fr; gap: 0 14px; text-align: left; align-items: center; }
  .steps img { grid-row: span 3; width: 100%; height: 100px; margin: 0; }
  .steps li::after { display: none; }
  .steps li:not(:last-child)::before { content: ""; position: absolute; left: 50%; bottom: -24px; width: 24px; height: 16px; translate: -50% 0; background: var(--yellow); clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .steps h4 { margin-top: 2px; font-size: 18px; }
  .steps .no { justify-self: start; }
  .steps p { font-size: 15px; }
  .price th, .price td { padding: 14px 16px; font-size: 15px; }
  .price td b { font-size: 32px; }
  .faq summary { padding: 14px 44px 14px 56px; font-size: 16px; }
  .faq summary::before { left: 12px; top: 12px; }
  .faq details p { padding: 0 18px 16px 20px; }

  .promise { padding-top: 60px; }
  .promise-in { display: flex; flex-direction: column-reverse; }
  .tel { font-size: 32px; }
  .promise-text { position: relative; left: auto; top: auto; translate: none; width: 100%; margin-bottom: 14px; }
  .promise-s { font-size: 15px; }

  .contact { padding: 64px 0; }
  .contact-in { grid-template-columns: 1fr; }
  .contact-card { padding: 26px 20px 30px; }
  .contact-art { max-width: 150px; order: -1; margin-bottom: -30px; position: relative; z-index: 1; }

  .entry { padding: 70px 0 80px; }
  .entry-in { grid-template-columns: 1fr; gap: 30px; }
  .mywin { margin: 0 auto 14px; width: 62%; }
  .entry .ttl { text-align: center; align-items: center; font-size: 26px; }
  .form { padding: 24px 18px; box-shadow: 6px 6px 0 var(--yellow); }

  .sticky-cta { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; opacity: 0; transform: translateY(120%); transition: opacity .3s, transform .3s; pointer-events: none; }
  .sticky-cta.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .sticky-cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .lamp { animation: none; opacity: 0; }
  .win-glass::after { display: none; }
  .js .mywin img { filter: none; opacity: 1; }
  .js .reveal { opacity: 1; transform: none; }
  .btn, .sticky-cta { transition: none; }
}

/* tpl:4bb3fa872bcc */

/* ここから：この案件の追加 */
.brand-logo { width: 48px; height: 48px; object-fit: contain; }
.win-worry { display: block; width: 108%; margin-top: 10px; font: 700 14px/1.5 var(--round); text-align: center; color: var(--navy); }
.win-fix { display: block; width: 108%; margin-top: 8px; padding: 10px 10px; border-radius: 8px; background: var(--yellow-l); font: 500 13px/1.6 "Noto Sans JP", sans-serif; text-align: left; opacity: 0; transform: translateY(6px); transition: opacity .6s ease .3s, transform .6s ease .3s; }
.win.is-in .win-fix { opacity: 1; transform: none; }
.js .win:not(.is-in) .win-worry { opacity: .85; }
.results { margin-top: 56px; }
.result-list { max-width: 760px; margin: 24px auto 0; display: grid; gap: 10px; }
.result-list li { padding: 14px 18px; border-radius: 10px; background: var(--sky-l); line-height: 1.7; }
.result-list b, .result-list a { display: block; font: 800 16px/1.5 var(--round); color: var(--blue); }
.result-list a { text-decoration: underline; }
.result-note { max-width: 760px; margin: 14px auto 0; font-size: 13px; color: #5a6485; }
.maker { display: grid; gap: 8px; margin: 14px 0 20px; text-align: left; line-height: 1.8; }
.maker li { padding-left: 1.2em; position: relative; }
.maker li::before { content: ""; position: absolute; left: 0; top: .75em; width: .5em; height: .5em; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 2px var(--navy); }
.maker a { text-decoration: underline; }
.calc input { font-size: 20px; }
.calc-out { margin: 14px 0 0; padding: 16px 18px; border-radius: 12px; background: var(--yellow-l); font: 800 18px/1.6 var(--round); }
.calc-note { margin: 12px 0 18px; }
@media (max-width: 820px) { .brand-logo { width: 40px; height: 40px; } .win-worry { font-size: 12px; } .win-fix { font-size: 12px; padding: 8px; } }
@media (prefers-reduced-motion: reduce) { .win-fix { opacity: 1; transform: none; transition: none; } }

/* 直し（確認4）：見出しの強調色・余白・窓の高さをそろえる・最初の説明を2行に */
.check .ttl em, .entry .ttl em { color: var(--yellow); background: none; }
.hero-lead { line-height: 1.8; }
.hero-lead .nw { display: inline-block; }
.facts { padding: 48px 0 56px; }
.for { padding: 64px 0 72px; }
.worry { padding: 56px 0; }
.check { padding: 64px 0 0; }
.panels { padding: 44px 0 60px; }
.promise { padding: 56px 0 0; }
.results { margin-top: 36px; padding-bottom: 56px; }
.contact { padding: 56px 0; }
.entry { padding: 64px 0 72px; }
.notes { padding: 44px 0; }
.win-grid { align-items: start; }
.win-worry { min-height: 3.2em; display: flex; align-items: center; justify-content: center; }
.win-fix { min-height: 5.2em; }
@media (max-width: 820px) {
  .facts { padding: 40px 0; } .for { padding: 48px 0; } .worry { padding: 44px 0; } .check { padding-top: 48px; }
  .panels { padding: 32px 0 44px; } .promise { padding-top: 40px; } .contact { padding: 44px 0; } .entry { padding: 48px 0 56px; }
  .win-worry { min-height: 4.8em; } .win-fix { min-height: 7.5em; }
}

/* 直し2：窓の下の文を枠の中に収めて中央にそろえる／特長カードの余白 */
.win-worry, .win-fix { width: 100%; text-align: center; box-sizing: border-box; }
.win-fix { padding: 12px 12px; }
.win-grid { padding-bottom: 22px; }
.merits li { padding-bottom: 0; }
.merits li p { margin-bottom: 8px; }
.doc { padding: 56px 0 72px; background: #fff; }
.doc h1 { font: 900 clamp(26px, 3vw, 36px)/1.4 var(--round); text-align: center; margin-bottom: 28px; }
.doc .wrap { max-width: 820px; }
.doc h2 { font: 800 20px/1.5 var(--round); margin: 32px 0 10px; padding-left: 12px; border-left: 6px solid var(--yellow); }
.doc p, .doc li { line-height: 1.9; }
.doc ul { list-style: disc; padding-left: 1.4em; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.doc th, .doc td { padding: 14px 16px; border: 1px solid #C9D6F2; text-align: left; vertical-align: top; line-height: 1.8; }
.doc th { width: 30%; background: var(--sky-l); font-weight: 700; }
.doc .todo { background: var(--yellow-l); }
.doc .back { display: inline-block; margin-top: 28px; text-decoration: underline; }
@media (max-width: 820px) { .doc th { width: 34%; } .doc th, .doc td { padding: 10px 10px; font-size: 14px; } }
.win-worry, .win-fix, .merits li p, .merits li h4 { text-wrap: balance; }

/* ===== 案C：Aの親しみやすさを土台に、きっちり感を足す ===== */
:root { --yellow-l: #F1F5FC; --red: #06C755; }
body { letter-spacing: .02em; }
/* 文字はAと同じ丸ゴシック（M PLUS Rounded 1c）のまま */
/* 形：丸みを小さく */
.btn { border-radius: 10px; min-height: 58px; box-shadow: 0 5px 0 #04A546; letter-spacing: .03em; }
.btn span { border-radius: 6px; }
.fact-list li, .merits li, .steps li, .win-fix, .result-list li, .contact-card, .form, .price, .faq details { border-radius: 10px; }
.pills span { border-radius: 6px; }
.tabs button { border-radius: 8px 8px 0 0; }
.win-grid { border-radius: 14px 14px 0 0; }
/* 色：黄色は強調だけに。窓の下の札は白地に紺の枠 */
.win-sill { background: #fff; font-size: 15px; letter-spacing: .04em; }
.win-fix { background: var(--sky-l); border-left: 4px solid var(--blue); }
.contact-k, .promise-s { border-radius: 6px; }
.promise-s { background: var(--blue); }
/* 見出し：英字ラベル＋下線でそろえる */
.ttl small { color: var(--blue); letter-spacing: .2em; font-size: 13px; }
.check .ttl small, .entry .ttl small { color: var(--yellow); }
.ttl { font-weight: 900; }
.ttl-w span::after { content: ""; display: block; width: 44px; height: 4px; margin: 14px auto 0; background: var(--yellow); }
.entry .ttl-w span::after { margin-left: 0; }
/* ヘッダー：ページ内リンク */
.header { gap: 18px; }
.gnav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; font-weight: 700; }
.gnav a:hover { text-decoration: underline; }
@media (max-width: 960px) { .gnav { display: none; } }
/* 数字のカード：枠をはっきり */
.fact-list li { border: 2px solid var(--navy); box-shadow: 0 4px 0 var(--sky); }
/* 実績：表のようにそろえる */
.result-list { gap: 0; border: 2px solid var(--navy); border-radius: 10px; overflow: hidden; background: #fff; }
.result-list li { display: grid; grid-template-columns: 230px 1fr; gap: 12px; align-items: center; border-radius: 0; border-bottom: 1px solid #C9D6F2; background: #fff; padding: 14px 18px; }
.result-list li:last-child { border-bottom: 0; }
.result-list b, .result-list a { display: inline; font-size: 15px; }
@media (max-width: 820px) { .result-list li { grid-template-columns: 1fr; gap: 2px; } }
.maker li::before { border-radius: 2px; }
/* 日本語の折り返し：文節の切れ目で改行する */
.win-worry, .win-fix, .merits li p, .merits li h4, .steps p, .faq p { text-wrap: wrap; word-break: auto-phrase; line-break: strict; }

/* ===== 新しい絵に合わせた最初の画面（ビル＋ロボット） ===== */
.hero { padding-bottom: 28px; }
.hero-text { position: relative; top: auto; padding: clamp(28px, 3.4vw, 52px) 24px 0; }
.hero-art { width: min(92%, 880px); aspect-ratio: 4 / 3; margin-top: 8px; }
/* あかり：暗い画面が、記事のページに切り替わる */
.lamp { width: 12.9%; height: 9.1%; border-radius: 3px; opacity: 0; box-shadow: none;
  background:
    linear-gradient(#7a7a7a,#7a7a7a) 10% 28% / 46% 9% no-repeat,
    linear-gradient(#7a7a7a,#7a7a7a) 10% 52% / 46% 9% no-repeat,
    linear-gradient(#7a7a7a,#7a7a7a) 10% 76% / 46% 9% no-repeat,
    linear-gradient(#fff,#fff) 92% 50% / 36% 62% no-repeat,
    var(--yellow); }
.js .lamp { animation: lampIn .6s ease forwards; animation-delay: calc(.8s + var(--d) * .45s); }
@keyframes lampIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .lamp { animation: none; opacity: 1; } }
@media (max-width: 820px) { .hero-art { width: 100%; } .hero-text { padding: 26px 20px 0; } }
.hero-art { margin-top: -40px; margin-bottom: -44px; }
@media (max-width: 820px) { .hero-art { margin-top: -10px; margin-bottom: -14px; } }
/* 「必ず一緒に」：文字を絵の上に出す（絵に重ねない） */
.promise-in { display: flex; flex-direction: column; align-items: center; }
.promise-text { position: relative; left: auto; top: auto; translate: none; width: 100%; margin-bottom: 8px; }
.promise-art { width: min(100%, 560px); }
@media (max-width: 820px) { .promise-in { flex-direction: column; } .promise-art { width: 100%; } }

.promise-text { order: -1; }

/* スマホの直し */
@media (max-width: 820px) {
  .hero-art { width: 100%; max-width: 100%; margin: -6px auto -10px; }
  .pills { flex-wrap: nowrap; gap: 6px; }
  .pills span { padding: 4px 6px; font-size: 12px; line-height: 1.45; flex: 1 1 0; }
  .hero-lead { font-size: 13.5px; text-align: center; }
  .fact-list li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 30px 14px 16px; }
  .fact-list b { order: 0; grid-row: auto; font-size: 44px; }
  .tabs button { font-size: 13px; padding: 10px 4px; }
  .check .ttl, .panel-ttl { text-wrap: balance; }
}
.pills span > span { padding: 0; border: 0; background: none; display: inline-block; font: inherit; }
.pills span > span::before, .pills span > span::after { display: none; }
@media (max-width: 820px) { .contact .btn, .entry .btn { font-size: 15px; padding: 0 14px; } }

/* ===== 整え：行の高さ・中央ぞろえ・折り返しを、全体でそろえる ===== */
body { word-break: auto-phrase; line-break: strict; }
h1, h2, h3, h4, .ttl, .panel-ttl, .promise-m, .worry-q { text-wrap: balance; }
p, li, dd, summary { text-wrap: pretty; }
.steps p, .merits p, .win-worry, .win-fix, .fact-s, .price-note, .contact-card li { text-wrap: pretty; }
.steps p { text-align: center; }
.steps h4 { text-wrap: balance; }
.steps img { height: 170px; }
.merits li, .steps li, .win { text-align: center; }
.entry-in, .contact-in { align-items: center; }
.faq details p { text-align: left; }

/* 同じ列のカードは、行の高さをそろえる（絵・見出し・文の位置がずれない） */
@supports (grid-template-rows: subgrid) {
  .win-grid { row-gap: 0; }
  .win { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; justify-items: center; align-items: start; margin-bottom: 34px; }
  .win-worry { min-height: 0; align-self: center; }
  .win-fix { min-height: 0; align-self: stretch; }
  .merits { gap: 0 24px; margin-bottom: -30px; }
  .merits li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; justify-items: center; align-items: start; margin-bottom: 30px; }
  .merits h4 { align-self: center; }
  .merits p { align-self: start; margin-top: 8px; }
  .merits img { align-self: end; }
  .steps { gap: 0 26px; }
  .steps li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; justify-items: center; align-items: start; }
  .steps h4 { align-self: center; margin-top: 10px; }
  .steps p { margin-top: 6px; }
  .steps .no { margin-top: 4px; }
  @media (max-width: 820px) {
    .win-grid { row-gap: 0; }
    .merits { gap: 0 12px; margin-bottom: -16px; }
    .merits li { margin-bottom: 16px; }
    .steps { gap: 30px; }
    .steps li { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: 110px 1fr; justify-items: start; text-align: left; align-items: center; }
    .steps p { text-align: left; }
  }
}
.win-fix { display: flex; align-items: center; justify-content: center; text-align: center; }