/* 改行：「。」「、」のところで折り返し、言葉の途中では切らない */
.nw { display: inline-block; }

/* 最初の画面：上の文（ラベル・見出し・説明）は元のまま。その下に、ボタン → 信頼の数字 → ビルを並べる */
.hero { padding-bottom: 32px; }
.hero .hero-inner { display: block; max-width: none; padding: 0; }
.hero .hero-text { position: relative; top: auto; left: auto; right: auto; padding: clamp(28px, 3.4vw, 52px) 24px 0; text-align: center; }
.hero-trust { max-width: 720px; margin: 26px auto 0; color: #fff; text-align: center; }
.ht-lead { font: 800 clamp(16px, 1.8vw, 20px)/1.6 var(--round); }
.ht-lead b { color: var(--yellow); }
.ht-lead .nw { display: inline-block; }
.ht-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.ht-list li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 8px; border: 3px solid var(--navy); border-radius: 12px; background: #fff; color: var(--navy); box-shadow: 0 4px 0 rgba(30, 42, 90, .55); }
.ht-list .k { font: 800 13px/1.4 var(--round); }
.ht-list b { font: 900 clamp(28px, 3.2vw, 40px)/1.1 var(--round); color: var(--orange); letter-spacing: .02em; white-space: nowrap; }
.ht-list small { display: block; margin: 0; font-size: 12px; line-height: 1.3; font-weight: 800; color: var(--navy); }
.ht-note { margin-top: 8px; font-size: 12px; opacity: .85; }
.hero .hero-row { display: block; max-width: 560px; margin: 18px auto 0; padding: 0 16px; }
.hero .hero-row .hero-art { width: 100%; margin: 0; aspect-ratio: 4 / 3; }
@media (max-width: 820px) {
  .hero { padding-bottom: 24px; }
  .hero .hero-text { padding: 26px 20px 0; }
  .hero-trust { margin-top: 22px; }
  .ht-lead { font-size: 16px; }
  .ht-list { gap: 8px; }
  .ht-list li { padding: 10px 4px; border-width: 2px; }
  .ht-list .k { font-size: 11px; }
  .ht-list b { font-size: 26px; }
  .ht-list small { font-size: 11px; }
  .hero .hero-row { max-width: 420px; margin-top: 12px; padding: 0 16px; }
}

/* 月額のほかにご用意いただくもの */
.need { max-width: 760px; margin: 34px auto 0; padding: 20px 22px; border: 2px solid var(--navy); border-radius: 12px; background: #fff; }
.need-title { text-align: center; font: 800 17px/1.6 var(--round); color: var(--navy); }
.need-list { display: grid; gap: 10px; margin-top: 14px; }
.need-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; text-align: left; }
.need-no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font: 800 16px/1 var(--round); }
.need-list b { display: block; font-size: 16px; line-height: 1.6; color: var(--navy); }
.need-list small { display: block; font-size: 13px; line-height: 1.6; color: #5a6485; }
@media (max-width: 820px) { .need { margin-top: 26px; padding: 16px 14px; } .need-list b { font-size: 15px; } }

/* 料金の項目 */
.price-terms { width: min(640px, 100%); margin: 18px auto 0; display: grid; gap: 10px; }
.price-terms > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 14px; padding: 14px 18px; border-radius: 12px; background: #fff; text-align: left; }
.price-terms dt { font: 800 15px/1.7 var(--round); color: var(--blue); }
.price-terms dd { font-size: 15px; line-height: 1.8; }
@media (max-width: 820px) { .price-terms > div { grid-template-columns: 1fr; gap: 2px; padding: 12px 14px; } .price-terms dd { font-size: 14px; } }

/* 記事のジャンル */
.genres { max-width: 880px; margin: 30px auto 0; text-align: center; }
.genres-title { font: 800 17px/1.6 var(--round); color: var(--navy); }
.genre-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.genre-list li { padding: 5px 14px; border: 2px solid var(--blue); border-radius: 999px; background: #fff; color: var(--blue); font: 800 14px/1.6 var(--round); }
.genre-list .genre-etc { border-style: dashed; color: #5a6485; border-color: #9db0d8; }
@media (max-width: 820px) { .genre-list li { font-size: 13px; padding: 4px 11px; } }

/* 制作した記事の例 */
.arts { padding: 64px 0 60px; background: var(--sky-l); background-image: radial-gradient(rgba(58, 90, 197, .1) 1.6px, transparent 2px); background-size: 20px 20px; }
.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 34px auto 0; }
.art a { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 2px solid var(--navy); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 0 #C9D6F2; color: var(--navy); transition: transform .2s, box-shadow .2s; }
.art a:hover { transform: translateY(-3px); box-shadow: 0 7px 0 #C9D6F2; }
.art a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.art img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 336; object-fit: cover; border-bottom: 2px solid var(--navy); }
.art-body { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 14px 16px 16px; text-align: left; }
.art-media { justify-self: start; padding: 2px 12px; border-radius: 6px; background: var(--blue); color: #fff; font: 800 12px/1.7 var(--round); }
.art-title { font: 800 15px/1.65 var(--round); text-wrap: balance; }
.art-go { font: 800 13px/1.6 var(--round); color: var(--blue); }
@media (max-width: 820px) {
  .arts { padding: 44px 0 40px; }
  .art-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; padding: 0 12px; }
  .art-body { padding: 10px 10px 12px; gap: 6px; }
  .art-media { font-size: 11px; padding: 1px 9px; }
  .art-title { font-size: 12.5px; line-height: 1.6; word-break: auto-phrase; }
  .art-go { font-size: 12px; }
}
.arts .result-note { max-width: none; margin: 22px auto 0; text-align: center; }

/* 数字のカードの後ろから、ロボットがひょっこり（パソコンだけ） */
.hero-trust { position: relative; max-width: 740px; }
.ht-list { position: relative; z-index: 1; }
.ht-robot { position: absolute; z-index: 0; right: 24px; top: -34px; width: 124px; height: auto; pointer-events: none; transform: rotate(4deg); }
@media (max-width: 820px) { .ht-robot { display: none; } }
.hero { padding-bottom: 36px; }

/* 料金は「作っている人」の次。地は白にして、前後と区別する */
.facts { background-color: #fff; padding: 64px 0 72px; }
.facts .ttl { margin-bottom: 30px; }
@media (max-width: 820px) { .facts { padding: 44px 0 52px; } .facts .ttl { margin-bottom: 22px; } }

/* 文の折り返し：窓の下の悩みは、ふつうの文として「。」「、」で折り返す */
.win-worry { display: block; align-self: center; }
.steps p { padding: 0 2px; font-size: 15px; }
@media (max-width: 1100px) { .steps p { font-size: 14px; } }
.steps li { padding-left: 12px; padding-right: 12px; }
@media (max-width: 820px) {
  .merits p { font-size: 12.5px; line-height: 1.65; }
  .win-worry { font-size: 12px; line-height: 1.6; }
  /* 記事の例：スマホは横にスワイプ（題名が2行に収まる幅） */
  .art-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 14px; scrollbar-width: none; }
  .art-grid::-webkit-scrollbar { display: none; }
  .art-grid .art { flex: 0 0 82%; scroll-snap-align: center; }
  .art-title { font-size: 13px; }
}

/* 強調の言葉は、途中で切らない */
.merits h4 em, .panel-ttl em, .ttl em { display: inline-block; white-space: nowrap; }

/* ヘッダー：ボタンの大きさ、スマホで名前が折り返さない */
.header .btn-s { min-height: 46px; padding: 0 20px; font-size: 15px; box-shadow: 0 4px 0 #04A546; }
@media (max-width: 820px) {
  .header .btn-s { min-height: 40px; padding: 0 12px; font-size: 13px; box-shadow: 0 3px 0 #04A546; }
  .header .brand span { white-space: nowrap; font-size: 14px; }
  .header .brand-logo { width: 36px; height: 36px; }
}

/* 窓の下は悩みだけ（3段そろえ） */
@supports (grid-template-rows: subgrid) {
  .win { grid-row: span 3; }
}